Feature Sliced Design
Feature-Sliced Design (FSD) - aynan frontend uchun arxitektura metodoligayasi. Kod qanday tashkil qilish haqida bir necha qoidalar to'plami. Asosiy e'tibori tushunarli, masshtabli, zarur bo'lganda oson kengaytiriladigan loyihalar yozishga qaratilgan.
FSD uchta qismdan iborat desak ham bo'ladi, bular - layers, slices, segments.
Layers (qatlamlar) - hamma projectlar uchun standart qism , har bir qatlamda yotgan modullar faqat shu qatlamdan pastda bo'lgan qatlam modullari bilan o'zaro ishlay oladi, ya'ni yuqoriroqda joylashgan qatlam faqat o'zidan pastroqda joylashgan qatlamni o'ziga import qilib ishlashi mumkin. Hozircha qatlamlar soni 7 ta (har bir qatlam pastdan yuqoriga joylashtirilgan).
Davomi pastda ->
Feature-Sliced Design (FSD) - aynan frontend uchun arxitektura metodoligayasi. Kod qanday tashkil qilish haqida bir necha qoidalar to'plami. Asosiy e'tibori tushunarli, masshtabli, zarur bo'lganda oson kengaytiriladigan loyihalar yozishga qaratilgan.
FSD uchta qismdan iborat desak ham bo'ladi, bular - layers, slices, segments.
Layers (qatlamlar) - hamma projectlar uchun standart qism , har bir qatlamda yotgan modullar faqat shu qatlamdan pastda bo'lgan qatlam modullari bilan o'zaro ishlay oladi, ya'ni yuqoriroqda joylashgan qatlam faqat o'zidan pastroqda joylashgan qatlamni o'ziga import qilib ishlashi mumkin. Hozircha qatlamlar soni 7 ta (har bir qatlam pastdan yuqoriga joylashtirilgan).
Davomi pastda ->
👍1
1.
2.
3.
4.
Davomi pastda ->
shared - qayta ishlatiladigan, biznesga to'g'ridan to'g'ri aloqasi yo'q modullar joylashtiriladi, bularga UI kit, har projectga kerak bo'ladigan helper (yordamchi) funksiyalar, har xil configlar (env, api) va shu tipdagi utilitalarni kiritish mumkin, bu qatlamda joylashgan modullar bir projectdan boshqa projectga o'zgarishsiz ko'chirib o'tilsa bo'ladi. 2.
entities - asosiy biznes obyektlar, masalan user, post, todo, comment. Bu qatlamda aynan biron biznes obyekt uchun kerak bo'lgan modullar yotadi, masalan user kartochkasi, hamma userlar listini saqlovchi store va hokazolar. 3.
features - bu qatlamda foydalanuvchi va biznes o'zaro aloqa qiladigan, foydalanuvchi uchun biron biznes-qiymat keltiradigan senariylar yoziladi, masalan registratsiya formasi, todo create qilish formasi, komment jo'natish va hokazolar.4.
widgets - entities va features qatlamlarida joylashgan modulelarni alohida mustaqil bloklarga biriktiruvchi qatlam, masalan usersList va usersFilterDavomi pastda ->
5.
6.
7.
O'z navbatida bu qatlamlar
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
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
pages - sahifalar, o'zida entities, features, widgetslarni jamlaydi, M-n: todolar sahifasi o'ziga noscript, 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
👍8👎1
elyor.dev
Кириллча ёки lotincha? Қайси бири qulay?
Postlarni lotin alifbosida yozishga qaror qildim. Ko'pchilikka shu ma'qul ekan, kommentda esa erkinroq yozaman, xafa bo'lmaysilar)
@elyor_dev
@elyor_dev
👍8👎1👌1
Mobx bo'yicha bir nechta seriyali post'lar chiqarmoqchiman nasib bo'lsa. Kimga qiziq bo'lsa boshlang'ich materiallarni quyidagi chatdan topib ko'rishlik mumkin, ozgina tushuncha olishlik uchun. O'zi mobx qiyin ham emas.
https://news.1rj.ru/str/mobxjs_uz
#mobx #qaqshatgich_zarba #redux_trash
@elyor_dev
https://news.1rj.ru/str/mobxjs_uz
#mobx #qaqshatgich_zarba #redux_trash
@elyor_dev
👍7👎1💔1
Mobx va React Context
Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz.
1. O'zimizga kerakli storelarni create qilamiz, Ular nechtaligi, qayerda joylashishi muhim emas.
2. RootStore class ichida bizda bor barcha storelarni register qilib chiqamiz, xuddi 2-rasmdagidek.
3. React context create qilamiz, project'da ts bo'lsa tiplarini ko'rsatgan holda, va shu context'ni ishlata olishlik uchun Provider va useStore hooklarni ham create qilib olamiz, unchalik murakkab emas nazarimda.
4. So'ng entry point fileda (main.tsx yoki index.tsx) Appni Providerga o'raymiz
5. useStore orqali kerakli storelarni olib ishlataveramiz. Faqat store ishlatilgan componentlarni observerga o'rash kerak
#mobx #context_api
@elyor_dev
Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz.
1. O'zimizga kerakli storelarni create qilamiz, Ular nechtaligi, qayerda joylashishi muhim emas.
2. RootStore class ichida bizda bor barcha storelarni register qilib chiqamiz, xuddi 2-rasmdagidek.
3. React context create qilamiz, project'da ts bo'lsa tiplarini ko'rsatgan holda, va shu context'ni ishlata olishlik uchun Provider va useStore hooklarni ham create qilib olamiz, unchalik murakkab emas nazarimda.
4. So'ng entry point fileda (main.tsx yoki index.tsx) Appni Providerga o'raymiz
5. useStore orqali kerakli storelarni olib ishlataveramiz. Faqat store ishlatilgan componentlarni observerga o'rash kerak
#mobx #context_api
@elyor_dev
👍3👎2
elyor.dev
Mobx va React Context Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz. 1. O'zimizga kerakli storelarni…
Agar yuqoridagi holatda bizga bir store boshqa store ichida kerak bo'lib qolsa, u holda biz istalgan storega rootStore'ni berib yuborib bir store ichida boshqa store bilan ishlay olamiz.
Rasmlardagi exampleda agar TodoStore ichida currentUser kerak bo'lib qolsa, biz TodoStore ga rootStore'ni berib yuborib u orqali currentStore bilan ishlay olamiz. Ya'ni bu misollar aynan componentdan turib storelarga nimanidir set qilmaslik uchun
#mobx #root_store #linked_stores
@elyor_dev
Rasmlardagi exampleda agar TodoStore ichida currentUser kerak bo'lib qolsa, biz TodoStore ga rootStore'ni berib yuborib u orqali currentStore bilan ishlay olamiz. Ya'ni bu misollar aynan componentdan turib storelarga nimanidir set qilmaslik uchun
#mobx #root_store #linked_stores
@elyor_dev
👍2⚡1👎1🔥1
elyor.dev
Mobx va React Context Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz. 1. O'zimizga kerakli storelarni…
Yuqoridagi holatda
1. Mobx ishlatilgan joyda context nega kerak degan savol:
Mobx va React qaralganda data transfer qilishni bir necha yo'llari bor
- Singleton storelar
- Context Api orqali
- DI containerlar (singleton'ga yaqin)
Nima uchun Context Api? Context Api react'da data transfer uchun ishlatiladigan mexanizm, masalan redux ham shundan foydalanadi, context + mobx ishlatilganda context api dagi ortiqcha rerender muammosi to'liq yo'qoladi, sababi mobx statelar mutable va ularga link o'zgarmaydi, keyin agar sizda SSR bo'lsa u holda singleton pattern o'z o'zidan kuchini yo'qotadi, yagona variant Context Api qoladi.
2. Storelarni lazy load qilsa bo'lmaydimi, hammasini bittada yig'gandan.
Agar aynan biror bir sahifa yoki moduledagina ishlatiladigan store bo'lsa sahifaga kirish oldidan rootStore'ga set qilsa bo'lar, o'zim qilib ko'rmaganman
#mobx
@elyor_dev
1. Mobx ishlatilgan joyda context nega kerak degan savol:
Mobx va React qaralganda data transfer qilishni bir necha yo'llari bor
- Singleton storelar
- Context Api orqali
- DI containerlar (singleton'ga yaqin)
Nima uchun Context Api? Context Api react'da data transfer uchun ishlatiladigan mexanizm, masalan redux ham shundan foydalanadi, context + mobx ishlatilganda context api dagi ortiqcha rerender muammosi to'liq yo'qoladi, sababi mobx statelar mutable va ularga link o'zgarmaydi, keyin agar sizda SSR bo'lsa u holda singleton pattern o'z o'zidan kuchini yo'qotadi, yagona variant Context Api qoladi.
2. Storelarni lazy load qilsa bo'lmaydimi, hammasini bittada yig'gandan.
Agar aynan biror bir sahifa yoki moduledagina ishlatiladigan store bo'lsa sahifaga kirish oldidan rootStore'ga set qilsa bo'lar, o'zim qilib ko'rmaganman
#mobx
@elyor_dev
👍2👎1
👍2👎2🤓1
Mobx haqida seriyali postlar vada qilgandim. Bu hafta ishlar ko'payib ketdi biroz, vaqt kamroq.
Qaysi mavzular qiziq aynan mobx bo'yicha?
#mobx
@elyor_dev
Qaysi mavzular qiziq aynan mobx bo'yicha?
#mobx
@elyor_dev
Forwarded from Azimjon's Fikrlog
Leverage | Tayanch
Savdolashish san’atini o’rganing. Eng foydali qobiliyat.
11 yoshimdan uyga bozorni o’zim qilardim. Savdolashib, narxini kelishib olardim. Korzinka? Pfft, Farxadskiy!
Yuqorida Polshaga kelib 2-ishimni topganim haqida yozgandim. Ular oyiga 3.5k zł taklif berishgandi. Meni yo’qotadigan hech narsam yo’q edi, qiziqishga savdolashib ko’rdim.
16k zł ga rozi bo’lishimni aytdim, yo’q deyishlarini bilib. Ular 5k taklif qilishdi - rozi bo’lmadim, 15k so’radim. 8k ga chiqarishdi…
Axiri 14k ga kelishdik. Qanday qilib? Tayanchni ishga solib.
“Leverage” nima bo’lishi mumkin? Hozir ishlab turgan ishingiz yoki boshqa kompaniya bergan taklif. Har doim leverage/tayanch qidiring.
Eng muhimi, qadringizni biling.
Savdolashish san’atini o’rganing. Eng foydali qobiliyat.
11 yoshimdan uyga bozorni o’zim qilardim. Savdolashib, narxini kelishib olardim. Korzinka? Pfft, Farxadskiy!
Yuqorida Polshaga kelib 2-ishimni topganim haqida yozgandim. Ular oyiga 3.5k zł taklif berishgandi. Meni yo’qotadigan hech narsam yo’q edi, qiziqishga savdolashib ko’rdim.
16k zł ga rozi bo’lishimni aytdim, yo’q deyishlarini bilib. Ular 5k taklif qilishdi - rozi bo’lmadim, 15k so’radim. 8k ga chiqarishdi…
Axiri 14k ga kelishdik. Qanday qilib? Tayanchni ishga solib.
“Leverage” nima bo’lishi mumkin? Hozir ishlab turgan ishingiz yoki boshqa kompaniya bergan taklif. Har doim leverage/tayanch qidiring.
Eng muhimi, qadringizni biling.
👍8
👍11👎4
Mobx Funksional styleda
Assalomu aleykum, mobx bo'yicha postlarni davom ettirgan holda, bugun mobx'ni qanaqa qilib funksional styleda yozish haqida ko'rsatmoqchiman. Juda base holatda albatta.
1. Bitta yordamchi funksiya qilib olamiz, ortiqcha yozuvlarni kamaytirishlik uchun.
2. Store create qilish
Object ichida kerakli state va actionlarni yozib createStore funksiyamizga uzatib yuborsak bo'lgani. actionlar async yoki sync ekanligini farqi yo'q, middleware kerak emas,Salom reduxchilar)).
3. Kerakli componentga import qilamiz va ishlatamiz. Tamom.
Ha aytgancha bu misollarda global store yozilgan, commentlarda local store yozib ko'rishga urunib ko'ring))
#mobx #functional_style #mobxVsFunction
@elyor_dev
Assalomu aleykum, mobx bo'yicha postlarni davom ettirgan holda, bugun mobx'ni qanaqa qilib funksional styleda yozish haqida ko'rsatmoqchiman. Juda base holatda albatta.
1. Bitta yordamchi funksiya qilib olamiz, ortiqcha yozuvlarni kamaytirishlik uchun.
createStore funksiya boshlang'ich qiymat qabul qiladi va uni makeAutoObservable ga o'rab qaytaradi.2. Store create qilish
Object ichida kerakli state va actionlarni yozib createStore funksiyamizga uzatib yuborsak bo'lgani. actionlar async yoki sync ekanligini farqi yo'q, middleware kerak emas,
Ha aytgancha bu misollarda global store yozilgan, commentlarda local store yozib ko'rishga urunib ko'ring))
#mobx #functional_style #mobxVsFunction
@elyor_dev
👍1