ব্যাখ্যা করছি Feature-Sliced Design কী — একটি ফ্রন্টএন্ড মডুলার আর্কিটেকচার পদ্ধতি যা প্রোজেক্টকে টেকনিক্যাল স্তরের পরিবর্তে ব্যবসায়িক ফিচার দ্বারা বিভাজনের উপর ভিত্তি করে তৈরি। ক্লাসিক্যাল লেয়ার্ড আর্কিটেকচার (কন্ট্রোলার, সার্ভিস, রিপোজিটরি) থেকে ভিন্ন, FSD কোডকে অ্যাপ্লিকেশনের কার্যকরী ক্ষমতা অনুযায়ী গ্রুপ করে: প্রতিটি ফিচারে নিজস্ব লজিক, UI এবং ডেটা থাকে। State of Frontend 2024 জরিপ অনুসারে, 23% React ডেভেলপার FSD কে তাদের প্রধান আর্কিটেকচার পদ্ধতি হিসাবে ব্যবহার করেন, যা এটিকে বিশুদ্ধ Feature-based কাঠামোর পরে দ্বিতীয় সর্বাধিক জনপ্রিয় করে তোলে।
মূল পয়েন্ট
Feature-Sliced Design (FSD) একটি ফ্রন্টএন্ড অ্যাপ্লিকেশন আর্কিটেকচার পদ্ধতি যা প্রথম 2021 সালে feature-sliced.design সম্প্রদায় দ্বারা প্রস্তাবিত হয়েছিল। FSD-এর মূল ধারণা হল কোডকে ব্যবসায়িক ফিচার (স্লাইস) দ্বারা গ্রুপ করা, যার প্রতিটি একটি স্বয়ংসম্পূর্ণ ইউনিট: এতে নিজস্ব ব্যবসায়িক লজিক, ইউজার ইন্টারফেস, API মিথস্ক্রিয়া, ডেটা মডেল এবং টেস্ট রয়েছে। এটি FSD-কে ক্লাসিক্যাল লেয়ার্ড আর্কিটেকচার থেকে আলাদা করে যেখানে কোড টেকনিক্যাল মানদণ্ড (controller, service, repository) দ্বারা বিভক্ত হয়।
পদ্ধতিটি Domain-Driven Design (DDD) এবং Bounded Context থেকে ধারণা ধার করে: অ্যাপ্লিকেশনের প্রতিটি ফিচার স্পষ্ট সীমানা সহ একটি পৃথক bounded context। একটি ফিচারের ভিতরে পরিবর্তনগুলি অন্যান্য ফিচার ভাঙবে না যদি তারা কেবল স্লাইসের পাবলিক API ব্যবহার করে। State of Frontend 2024 জরিপ অনুসারে, FSD React আর্কিটেকচারের মধ্যে জনপ্রিয়তায় দ্বিতীয় স্থানে রয়েছে (23%), যা শুধুমাত্র অনানুষ্ঠানিক Feature-based কাঠামোর (31%) পরে।
মোবাইল ডেভেলপমেন্টে, FSD Android মডিউল এবং iOS ফ্রেমওয়ার্কের বিশেষত্বের সাথে খাপ খায়। IT Sectr-এ, আমরা 10+ স্ক্রিন এবং 3+ টিমের প্রোজেক্টের জন্য FSD ব্যবহার করি — পদ্ধতিটি স্বাধীনভাবে ফিচার ডেভেলপ করার অনুমতি দেয় এবং স্লাইস সীমানা ছাড়া মনোরেপোর তুলনায় git দ্বন্দ্ব 40% হ্রাস করে।
FSD সাতটি শ্রেণিবদ্ধ স্তর সংজ্ঞায়িত করে, প্রতিটিতে একটি নির্দিষ্ট অ্যাবস্ট্রাকশন স্তরের কোড থাকে। প্রধান আর্কিটেকচার নিয়ম হল যে স্তরগুলি কেবল নীচের স্তর থেকে কোড ইমপোর্ট করতে পারে। এই নিয়ম লঙ্ঘন (entities-এ features স্তর ইমপোর্ট করা) একটি আর্কিটেকচার ত্রুটি হিসাবে বিবেচিত হয় এবং লিন্টার দ্বারা ব্লক করা হয়।
| স্তর | উদ্দেশ্য | ইমপোর্ট করে |
|---|---|---|
| app | অ্যাপ্লিকেশন ইনিশিয়ালাইজেশন, প্রোভাইডার, গ্লোবাল স্টাইল, রাউটিং | যেকোনো স্তর |
| processes | ব্যবসায়িক প্রক্রিয়া যা একাধিক ফিচার একত্রিত করে (অনবোর্ডিং, পেমেন্ট) | pages, features, entities, shared |
| pages | পৃষ্ঠায় ফিচার কম্পোজিশন, পৃষ্ঠা রাউটিং | features, entities, shared |
| features | ব্যবহারকারীর পরিস্থিতি: লগইন ফর্ম, পছন্দের তালিকা, অনুসন্ধান ফিল্টার | entities, shared |
| entities | ব্যবসায়িক সত্তা: User, Product, Order, Cart | shared |
| widgets | যৌগিক UI উপাদান: Header, Sidebar, ArticleCard | shared, entities |
| shared | ইউটিলিটি, UI-kit, API ক্লায়েন্ট, কনফিগ — ব্যবসায়িক লজিক থেকে স্বাধীন | শুধুমাত্র বাহ্যিক লাইব্রেরি |
FSD প্রোজেক্টের ডিরেক্টরি কাঠামোর উদাহরণ:
src/
├── app/ // অ্যাপ্লিকেশন স্তর
│ ├── providers/
│ ├── router/
│ └── styles/
├── pages/ // পৃষ্ঠা — ফিচার কম্পোজিশন
│ └── main/
├── features/ // ফিচার — ব্যবহারকারীর পরিস্থিতি
│ ├── auth/ // স্লাইস «প্রমাণীকরণ»
│ │ ├── ui/
│ │ ├── model/
│ │ └── api/
│ └── productList/ // স্লাইস «পণ্য তালিকা»
│ ├── ui/
│ └── model/
├── entities/ // ব্যবসায়িক সত্তা
│ ├── user/
│ └── product/
├── widgets/ // যৌগিক উপাদান
│ └── header/
└── shared/ // শেয়ার্ড ইউটিলিটি এবং UI-kit
└── ui/«স্তরগুলি কেবল নীচের দিকে তাকায়» নিয়মটি FSD-এর ভিত্তিপ্রস্তর। যদি feature auth entity user ইমপোর্ট করে — এটি সঠিক। যদি entity user feature auth ইমপোর্ট করা শুরু করে — এটি একটি চক্রীয় নির্ভরতা এবং আইসোলেশন লঙ্ঘন। এই নিয়ম নিশ্চিত করতে ESLint প্লাগইন (eslint-plugin-fsd) বা স্লাইসের পাবলিক API-এর কাস্টম লিন্টার ব্যবহার করা হয়।
স্লাইস (Slice) — FSD-তে গ্রুপিংয়ের প্রধান একক, যা একটি ব্যবসায়িক ফিচার বা সত্তার সাথে সম্পর্কিত। প্রতিটি স্লাইস সাতটি স্তরের (features, entities, widgets, pages) একটির ভিতরে অবস্থিত এবং নির্দিষ্ট কার্যকারিতা বাস্তবায়নের জন্য সম্পূর্ণ কোড সেট ধারণ করে: UI উপাদান, ডেটা মডেল, API ক্লায়েন্ট, ধ্রুবক এবং টেস্ট।
স্লাইস সীমানা ব্যবসায়িক ডোমেন দ্বারা সংজ্ঞায়িত করা হয়: feature auth-এ প্রমাণীকরণ সম্পর্কিত সবকিছু অন্তর্ভুক্ত (লগইন ফর্ম, রেজিস্ট্রেশন ফর্ম, পাসওয়ার্ড রিসেট); entity user-এ User মডেল, UserRepository এবং সিরিয়ালাইজেশন অন্তর্ভুক্ত। সীমানাগুলি ওভারল্যাপ করা উচিত নয়: যদি feature auth-এর ব্যবহারকারী ডেটা প্রয়োজন হয় — তবে এটি লজিক নকল করার পরিবর্তে entity user ইমপোর্ট করে। মোবাইল ডেভেলপমেন্টে, একটি FSD স্লাইস প্রায়শই Android-এ Gradle মডিউল বা iOS-এ Swift প্যাকেজের সাথে মিলে যায়।
স্লাইসগুলি কঠোরভাবে বিচ্ছিন্ন: একটি স্লাইসের অভ্যন্তরীণ কাঠামো অন্যান্য স্লাইসের জন্য অদৃশ্য। স্লাইসের মধ্যে মিথস্ক্রিয়ার জন্য একটি পাবলিক API ব্যবহার করা হয় — একটি index.ts/index.js ফাইল যা কেবল বাহ্যিক ব্যবহারের জন্য অনুমোদিত তা রপ্তানি করে। বাকি সবকিছু ব্যক্তিগত মডিউল। এই পদ্ধতি আকস্মিক নির্ভরতা প্রতিরোধ করে এবং রিফ্যাক্টরিং সহজ করে: একটি স্লাইসের ব্যক্তিগত বাস্তবায়ন পরিবর্তন করা অন্যান্য স্লাইসকে প্রভাবিত করে না।
প্রতিটি FSD স্লাইসের ভিতরে, কোড সেগমেন্ট দ্বারা আরও সংগঠিত হয় — টেকনিক্যাল বিভাগ যা সমস্ত স্লাইসে পুনরাবৃত্তি হয়। সেগমেন্টের মানক সেটের মধ্যে রয়েছে ui (ইন্টারফেস উপাদান), model (ব্যবসায়িক লজিক, Store, Actions, Reducer), api (সার্ভার অনুরোধ, মিউটেশন), lib (ইউটিলিটি এবং সহায়ক) এবং config (ফিচার কনফিগারেশন)।
| সেগমেন্ট | সামগ্রী | উদাহরণ |
|---|---|---|
| ui/ | React/Vue/SwiftUI উপাদান, স্টাইল, Storybook | LoginForm.tsx, login.module.css |
| model/ | Store, Reducer, Actions, প্রকার, চুক্তি | LoginStore.ts, authReducer.ts |
| api/ | HTTP ক্লায়েন্ট, মিউটেশন, RPC কল | authApi.ts, loginMutation.ts |
| lib/ | সহায়ক ফাংশন, ভ্যালিডেটর | validateEmail.ts, formatPhone.ts |
| config/ | ধ্রুবক, ফিচার কনফিগারেশন | authConfig.ts, endpoints.ts |
সেগমেন্টগুলি একটি সুপারিশ, কঠোর নিয়ম নয়। যদি স্লাইস ছোট হয়, সেগমেন্টগুলি একত্রিত করা যেতে পারে। বড় স্লাইসের জন্য (10+ ফাইল বিশিষ্ট ফিচার), সেগমেন্টেশন বাধ্যতামূলক — এটি ছাড়া অভ্যন্তরীণ কাঠামো দ্রুত 50 ফাইলের একটি «ঝুড়ি»তে পরিণত হয় যেখানে প্রয়োজনীয় উপাদান খুঁজে পেতে মিনিট সময় লাগে। মোবাইল ডেভেলপমেন্টে, সেগমেন্টগুলি প্রায়শই টাইপ অনুসারে ফাইল কাঠামো দ্বারা প্রতিস্থাপিত হয়: প্রতিটি ফিচার একটি পৃথক Swift ফাইল বা অভ্যন্তরীণ প্রকার সহ Kotlin ক্লাস।
মোবাইল ডেভেলপমেন্টে, FSD প্ল্যাটফর্ম-নির্দিষ্ট বৈশিষ্ট্যের সাথে খাপ খায় — Android-এর মডুলার কাঠামো (Gradle মডিউল) এবং Swift Package Manager। Android অভিযোজন ধরে নেয় যে প্রতিটি স্লাইস নিজস্ব build.gradle সহ একটি পৃথক Gradle মডিউল। মডিউল feature-auth, feature-profile, entity-user, shared-ui বিল্ড স্তরে একে অপরের থেকে বিচ্ছিন্ন: feature-auth নির্ভরতায় উল্লেখ না করা পর্যন্ত feature-profile ইমপোর্ট করতে পারে না।
iOS অভিযোজন Swift Package Manager-এর উপর নির্মিত: প্রতিটি স্লাইস একটি পাবলিক API সহ একটি Swift প্যাকেজ। TCA প্রোজেক্টে, feature.auth স্লাইসে নিজস্ব Reducer, Store, View এবং API ক্লায়েন্ট রয়েছে। Swift Community Survey 2024 অনুসারে, TCA সহ 28% iOS প্রোজেক্ট FSD-এর কাছাকাছি একটি স্লাইস আর্কিটেকচার ব্যবহার করে।
মোবাইল FSD অভিযোজনের প্রধান সমস্যা হল shared স্তরের নকল। মোবাইল ডেভেলপমেন্টে, UI উপাদান (shared/ui) প্রায়শই প্ল্যাটফর্মের উপর নির্ভর করে (Android Views বনাম Jetpack Compose বনাম SwiftUI), যার জন্য প্রতিটি প্রযুক্তির জন্য পৃথক shared মডিউল প্রয়োজন। FSD-তে, shared স্তরটি সাধারণত প্ল্যাটফর্ম-স্বাধীন (ইউটিলিটি, কনফিগ), যখন UI-kit একটি পৃথক মডিউল বা উপাদান লাইব্রেরিতে সরানো হয়।
সুবিধা FSD-এর 10+ ডেভেলপার সহ বড় প্রোজেক্টে লক্ষণীয় হয়। প্রতিটি ডেভেলপার বা টিম অন্যদের কোড স্পর্শ না করেই নিজস্ব স্লাইসে কাজ করে। git-এ দ্বন্দ্ব 40–60% হ্রাস পায় (feature-sliced.design কেস স্টাডি থেকে ডেটা)। নতুন ফিচার বিদ্যমান ফিচার ভাঙার ঝুঁকি ছাড়া যোগ করা হয়, যদি তারা কেবল স্লাইসের পাবলিক API ব্যবহার করে। একটি ফিচারের রিফ্যাক্টরিং অন্যগুলিতে পরিবর্তনের প্রয়োজন হয় না — পাবলিক API বজায় রেখে একটি স্লাইসের ভিতরে ui/model/api পুনরায় লেখা যথেষ্ট।
| দিক | FSD | Feature-based (FSD ছাড়া) | লেয়ার্ড আর্কিটেকচার |
|---|---|---|---|
| ফিচার আইসোলেশন | কঠোর | মাঝারি | কম |
| সমান্তরাল উন্নয়ন | 10+ টিম | 3–5 টিম | 1–2 টিম |
| ক্রস-প্রোজেক্ট পুনর্ব্যবহার | হ্যাঁ (স্লাইস প্যাকেজ) | শুধুমাত্র কপি-পেস্টের মাধ্যমে | shared মডিউলের মাধ্যমে |
| প্রবেশের বাধা | উচ্চ | নিম্ন | মাঝারি |
| Gradle আইসোলেশন (Android) | নেটিভ (মডিউল) | নেটিভ (মডিউল) | দুর্বল |
অসুবিধা FSD-এর — ছোট প্রোজেক্টের জন্য অতিরিক্ত নেস্টিং। যদি একটি অ্যাপ্লিকেশন 3–5 স্ক্রিন নিয়ে গঠিত হয়, তবে সাতটি স্তর এবং প্রতিটি স্লাইসের ভিতরে সেগমেন্টেশন নিজেই অ্যাপ্লিকেশনের চেয়ে বেশি সাংগঠনিক কোড তৈরি করে। প্রবেশের বাধা উচ্চ: নতুন ডেভেলপাররা পদ্ধতি শিখতে 2–4 সপ্তাহ ব্যয় করে। এছাড়াও, FSD দ্রুত প্রোটোটাইপিংয়ের সাথে খারাপভাবে সামঞ্জস্যপূর্ণ — প্রোটোটাইপিংয়ের জন্য ঘন ঘন ক্রস-লেয়ার ইমপোর্ট প্রয়োজন, যা FSD-তে নিষিদ্ধ এবং পুনরাবৃত্তি ধীর করে দেয়।
সুপারিশ করা হয় সরল Feature-based কাঠামো দিয়ে শুরু করুন এবং FSD-তে মাইগ্রেট করুন যখন স্ক্রিনের সংখ্যা 20 ছাড়িয়ে যায় এবং টিম 5 ডেভেলপার ছাড়িয়ে যায়।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
Feature-based আর্কিটেকচার কঠোর ইমপোর্ট নিয়ম ছাড়া ফিচার দ্বারা কোড গ্রুপ করে — feature Auth কোনো সীমাবদ্ধতা ছাড়াই অন্য feature Profile ইমপোর্ট করতে পারে। FSD একটি স্তর শ্রেণিবিন্যাস এবং «স্তরগুলি কেবল নীচের দিকে তাকায়» নিয়ম যোগ করে। Feature-based-এ, entity এবং feature একই স্তরে থাকতে পারে এবং একে অপরকে ইমপোর্ট করতে পারে; FSD-তে, entity feature-এর নীচে থাকে এবং feature entity ইমপোর্ট করে, বিপরীতটি নয়। Feature-based ছোট প্রোজেক্টের জন্য উপযুক্ত, FSD বড় প্রোজেক্টের জন্য।
স্লাইস আইসোলেশন ইউনিট টেস্টিং সহজ করে — প্রতিটি স্লাইস নীচের স্তরের নির্ভরতা মক করে স্বাধীনভাবে পরীক্ষা করা হয়। feature auth-এর জন্য, entity user মক করা যথেষ্ট। ইন্টিগ্রেশন টেস্ট স্লাইসের পাবলিক API যাচাই করে। Android-এ, একটি ফিচারের Gradle মডিউলে Reducer, API ক্লায়েন্ট এবং UI (Compose Test-এর মাধ্যমে) পরীক্ষার সাথে নিজস্ব টেস্ট ডিরেক্টরি থাকে। iOS-এ, একটি স্লাইস প্যাকেজ সমস্ত সেগমেন্টের পরীক্ষা অন্তর্ভুক্ত করে।
হ্যাঁ, FSD Jetpack Compose-এর সাথে ভালভাবে কাজ করে, বিশেষ করে মাল্টি-মডিউল Android প্রোজেক্টে। প্রতিটি স্লাইস exported নির্দেশের মাধ্যমে পাবলিক API সহ একটি পৃথক Gradle মডিউল। features স্তরে Composable ফিচার (LoginFeature, ProductListFeature), entities স্তরে ডেটা ক্লাস এবং Repository এবং shared-এ UI-kit (MaterialTheme-wrapper, কাস্টম উপাদান) থাকে। FSD 5+ ডেভেলপার সহ বড় Compose প্রোজেক্টের জন্য সুপারিশ করা হয়।
বাধ্যতামূলক স্তরগুলি হল app, shared, entities এবং features। বাকি (processes, pages, widgets) ঐচ্ছিক এবং প্রয়োজন অনুসারে যোগ করা হয়। মোবাইল ডেভেলপমেন্টে, pages স্তরটি প্রায়শই নেভিগেশন রাউটিংয়ের সাথে একত্রিত হয় এবং widgets shared/ui-kit দ্বারা প্রতিস্থাপিত হয়। প্রক্রিয়াগুলি (processes) সাধারণত মোবাইল প্রোজেক্টে ব্যবহৃত হয় না — তাদের ভূমিকা ডোমেন স্তর বা ViewModel-এ ব্যবসায়িক লজিক দ্বারা পূর্ণ হয়। প্রধান বিষয় হল ইমপোর্ট শ্রেণিবিন্যাস নিয়ম অনুসরণ করা।
FSD DDD থেকে Bounded Context এবং Ubiquitous Language ধারণা ধার করে। প্রতিটি স্লাইস একটি bounded context-এর সাথে মিলে যায় — একটি সীমানা যার মধ্যে শর্তাবলীর দ্ব্যর্থহীন অর্থ রয়েছে। স্লাইসের ভিতরে, একটি একীভূত ভাষা (ubiquitous language) ব্যবহার করা হয়, যা ডেভেলপার এবং ব্যবসায়িক বিশ্লেষক উভয়েরই বোধগম্য। উদাহরণস্বরূপ, auth স্লাইসে, «লগইন», «পাসওয়ার্ড», «টোকেন» শব্দগুলির টিমের সকল সদস্যের জন্য একই অর্থ রয়েছে, যা বিশ্লেষক এবং ডেভেলপারদের মধ্যে ভুল বোঝাবুঝি 30–50% হ্রাস করে।
সারসংক্ষেপ
আমরা একটি মোবাইল অ্যাপ্লিকেশন টার্নকি তৈরি করব
IT Sectr 2017 সাল থেকে স্টার্টআপ এবং ব্যবসার জন্য iOS এবং Android অ্যাপ্লিকেশন তৈরি করে। আমরা আপনাকে পরামর্শ দেব এবং সেরা সমাধান প্রস্তাব করব।
আরও পড়ুন