TGViewer
elyor.dev elyor.dev @elyor_dev · 249 subscribers
Post #15 359
5. 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, masalan
entities - (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
  • 👍 8
  • 👎 1
More from @elyor_dev
  1. Jun 29, 2026#tekin Tekin! Kompyuteringizda yoki serveringizda modellarni ishga tushirish bo'yicha Said…
  2. May 26, 2026Qurbon hayiti muborak boʼlsin!
  3. Apr 5, 2026Mobx Endi Mobx'ning ishga tushish tezligi, ma’lumotlarni tahlil qilish va Proxy bilan ishl…
  4. Mar 20, 2026Ҳайит айёми муборак бўлсин!
  5. Feb 18, 2026Ramazon muborak bo'lsin!
  6. Jan 8, 2026wakatime.com statistikasiga qaraganda, 2025-yilda PHPda o'rtacha php'chidan 4 marta kamroq…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →