pages - sahifalar, o'zida entities, features, widgetslarni jamlaydi, M-n: todolar sahifasi o'ziga title, todo-filters, todo-list ni jamlaydi.6.
processes - (eskirgan qatlam) bir nechta sahifani o'zida jamlab ishlatishi mumkin bo'lgan senariylar to'planmasi, m-n: authorization (Qadamma qadam bir necha sahifa ochilib qilinadigan hollarda)7.
app - bu qatlamda global stylelar, providerlar, yoki shunga o'xshash butun app uchun kerak bo'lgan sozlamar joylashadi.O'z navbatida bu qatlamlar
slice'larga bo'linadi, masalanentities - (users, posts, comments, todos). Slice'lar o'zida logika tomondan o'zaro bog'liq bo'lgan modullarni o'zida birlashtiradi, va ular uchun muhim bo'lgan qoidalardan biri bu - bir slice o'zi bilan bir darajada joylashgan boshqa slice modullarini o'ziga import qila olmaydi, ya'ni enitities-users da joylashgan qatlam enitities-posts da joylashgan qatlamdagi modulelarni o'ziga import qila olmaydi. Bu qoida biznes obyektlarni boshqa modulelardan qaramligini kamaytiradi va o'zi mustaqil yashay olishini ta'minlaydi.
Va har bir slice ham
segment'larga bo'linadi, segmentlar modulelarning texnik tarafdan ishlatilishiga qarab bo'linadi, segmentlar asosan ui (UserCard, UserList componentlar), model (storelar, userListStore), api (api so'rovlar - usersApi), lib (helper funksiyalar, hooklar) lardan iborat bo'ladi, lekin kerak bo'lsa yana qanaqadir segmentlar qo'shish mumkin.FSD da modullarni ularning turiga qarab emas, balki ular ishlatilish joyiga qarab bo'lish muhim. Ko'pchilik proyektlarda ko'rganmiz, types, stores, api, components, styles nomli bo'lingan folderlarni, aynan bu modullarni turiga qarab bo'lish deyiladi, FSD da esa ishlatilish nuqtasiga qarab bo'linadi, bu o'z navbatida projectda kerakli modulelarni tezda topish, uni kengaytirish, va projectda umuman biznes obyektlar, modulelarning bir biri bilan qanday bog'langanini oldindan ko'rsatib turadi.
FSD docs'ga kirsanggiz u yerda frontenddagi har xil frameworklar bilan fsd'ni qanday ishlatish kerakligi haqida examplelar topasiz, link qoldiraman.
FSD docs'ga o'zbek tilini ham qo'shishibdi, menimcha hali to'liq emasku, lekin asosiy momentlarni o'qib olsa bo'ladi
FSD ni tezda tushunib olish uchun DDD (Domain Driven Design) haqida ham bir muncha o'qib ko'rishni tavsiya qilaman!
Qisqa tanishtiruv post bo'ldi, savollar bo'lsa kommentga marhamat!
Foydali linklar:
- FSD docs
- FSD official examples
- Official fsd eslint plugin
Aynan o'zim yozgan projectlardan misollar
- fsd-react-mobx
#feature_sliced_design #fsd
@elyor_dev