Zustand

Va'da berganimdek zustand'ning aynan core qismini qisqa "обзор"i haqida post. (React uchun binding qismi boshqa safarga qoldi)

Zustand'dagi asosiy funksiya bu rasmdagi createStoreImpl funksiyasi.

Xo'sh uni ichida ishlatilayotgan variable va functionlarni rasmda raqamlab chiqdim. (destroyni qoldirdim, u deprecated bo'lgani uchun)

Birma-bir ko'rib chiqamiz

1. state - bizga kerakli data va actionlar aynan shu variableda joylashadi.
Oxiridan bitta qator yuqoridagi
state = createState(setState, getState, api)
ushbu code biz store create qilayotganimizda uzatib yuboradigan callback'ni chaqirib natijasini state'ga yozib qo'ymoqda, ya'ni initial state va actionlarni.

2. listeners - bu biz tartib bo'yicha 5-da turgan subscribe funksiyasiga uzatib yuboradigan callbacklarimizni saqlovchi variable. (Set haqida bilmasanggiz).

3. setState - bu funksiya state'ni update qilishlik uchun, funksiya bir necha turli xil formatdagi parameterlar qabul qila olgani uchun ichida tekshiruvlar soni ko'proq, lekin baribir asosiy ishi stateni yangilash. Stateni yangilashdan oldin Object.is() bilan tekshiruv ham bor, agar state qiymatlari o'zgarmagan bo'lsa stateni yangilab ortiqcha hisob-kitob qilmaslik uchun.

Note: Object.is({}, {}) // false

Xullas agar set qilinganda uzatilgan state bilan bizdagi state teng (shallow equal) bo'lmasa, stateni yangilaymiz, va state yangilangani haqida hamma subscriberlarni xabardor qilishlik uchun listeners'dagi har bir funksiyani chaqirib chiqamiz.

4. getState - state'ni qaytaruvchi funksiya, store.getState() qilsak, barcha actionlar, va ayni hozirgi paytda actual bo'lgan data'ni olamiz.

5. subscribe - store o'zgarishiga "подписка" qilish uchun
Misol uchun sahifada todolar sonini ko'rsatishimiz kerak:

todoListStore.subscribe((state, prevState) => {
todoListCounterDiv.innerHTML = state.todos.length
})

subscribe funksiyasi unsubscribe qilishlik uchun funksiya ham qaytaradi, masalan todolar sahifasidan boshqa sahifaga o'tish oldidan:

const unsubscribeTodoList = todoListStore.subscribe((state, prevState) => {
todoListCounterDiv.innerHTML = state.todos.length
})

unsubscribeTodoList()
window.location.pathname = '/other-page'

#zustand #source_code

@elyor_dev

Ertalab, toza miyaga o'qish uchun statya.

Hozir esa uxlash kerak)



Внутреннее представление и оптимизации строк в JavaScript-движке V8: «отмываем» строки, «обгоняем» C++ https://habr.com/p/745008/


#v8 #work_with_strings

@elyor_dev

Feature Sliced Design haqida eshitganmisiz? Eshitmagan bo'lsanggiz bir qarab chiqishni maslahat beraman. Ertaga uzunroq post yozishga harakat qilaman nasib bo'lsa.

https://feature-sliced.design/

#fsd

@elyor_dev

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 ->

1. 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 usersFilter

Davomi pastda ->

5. 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, 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

Postlarni lotin alifbosida yozishga qaror qildim. Ko'pchilikka shu ma'qul ekan, kommentda esa erkinroq yozaman, xafa bo'lmaysilar)

@elyor_dev

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

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

Singleton pattern haqida

https://www.patterns.dev/posts/singleton-pattern

@elyor_dev

Bitta hater borda, kim ekan o'sha a?

#haterlarga_omonlik

@elyor_dev