Modular Architecture
Arxitektura haqida gap ketarkan, birinchi o'rinda to'g'ri arxitektura tanlash juda muhim. Buni qanday amalga oshirish kerak ? Albatta ozgina research qilib, project va team memberlar sonidan kelib chiqilgan holatda shu arxitekturalardan birini tanlab ishlashni maslahat bergan bo'lar edim (Basic Architecture, Modular va FSD).
Bu postda biz Modullardan tashkil topgan Arxitektura haqida gapiramiz. Xa, etkancha bu arxitektura Framework Specific emas, yani Vue yoki React da bemalol ishlatsangiz bo'ladi.
Modular Architecture bu nima ?
- Modullar bu application ni bir qismi bo'lib va xar bir qism o'ziga tegishli feature ga javob berishi va modulga hos bo'lgan logiclarni qamrab olishiga nisbatan etiladi. Xar bir modul alohida ishlashi, test qilinishi va ishlab chiqarilishi mumkun, modul boshqa bir moduldan bog'lik bo'lmasligi shularni umumiy yig'inmasiga Modular Architecture deb aytsak bo'ladi.
Asosiy prinsiplari esa:
Single Responsibility: Xar bir modul faqat bir feature ni o'z ichiga oladi va uni bajaradi.
Loose Coupling: Modullar bir biri bilan minimal darajada ishlashi, iloji boricha umuman bog'lanmasligi.
Reusability: Bir modulni biz qayta ishlata olamiz, lekin asosiy logika qismi o'zgartirilmagan xolatda albatta.
Modular Architecture ni strukturasi shunday ko'rinishga ega
src/
├── modules/
│ ├── user/
│ │ ├── components/
│ │ │ ├── UserList.vue
│ │ │ └── UserDetail.vue
│ │ ├── store/
│ │ │ └── user-store.ts
│ │ ├── api/
│ │ │ └── user-api.ts
│ │ └── types/
│ │ └── user-types.ts
│ ├── auth/
│ │ ├── components/
│ │ ├── store/
│ │ ├── api/
│ │ └── types/
│ └── dashboard/
│ ├── components/
│ ├── store/
│ ├── api/
│ └── types/
├── pages/
│ ├── UserPage.vue
│ ├── UserProfilePage.vue
│ ├── DashboardPage.vue
│ └── LoginPage.vue
└── shared/
├── utils/constants.ts
├── UI/base-button/BaseButton.vue
/modules - bu yerda biror bir business logic ega bo'lgan modul bo'lib uning o'zi ham bir necha qismlarga bo'linadi:
modules/components - bu yerda module ga tegishli componentlar
modules/store - bu module ga tegishli store bo'lib bu qism optional hisoblanadi
modules/api - api lar bilan ishlash va ularni saqlash qismi
modules/types - agar TypeScript dan foydalansez module ga tegishli type lar saqalanadigan folder
/pages - bu qismdan biz umumiy projectdagi sahifalarni saqlash uchun foydalanamiz
Nega User.vue emas UserPage.vue yozgan maqul, Page suffix bizga bu component aynan Page ekanligini bildirib turishi uchun kerakdur.
/shared - bu folderni biz projectdagi qayta ishlanadigan codelar yani constantlar, typelar va dumb componentlarni saqlash uchun ishlatamiz, ( qoshimcha api, plugins va etc)
utils/constants.ts -> umumiy qayta ishlanadigan constant lar
types/common.types.ts -> umumiy qayta ishlanadigan type lar
UI/base-button/BaseButton.vue -> dumb componentlar yani o'zida bir logic saqlamaydigan componentlar, asosan Button, Input va hakozolar.
Bu rasmda ko'rib turganizdek real project dagi struktura, va composablelardan foydalanilgan, xar bir module alohida va bir biridan bog'lik emas, module o'zi bir necha segmentlardan tashkil topgan (task-about, task-chat, tash-header) va segmentlar ham bir necha qismlarga bo'lingan
UI/ChatFile.vue - bu dumb component
TaskChat.vue - bu asosiy component
useTaskChat.js - bu Module Pattern hisoblanib faqat bir segmentni logic qismini saqlash uchun ishlatilinadi
Modular Architecture dan foydalanish bizga bir nechta ustunliklarni beradi, va undan tashqari agar team kottalashib FSD ga switch qilmoxchi bo'lsangiz modules -> features/widgets larga o'zgatirishingiz mumkun.
Improved Maintainability: Xatoliklar (Bugs) ni topish juda oson va ular
Better Collaboration: Dasturchilarga bir vaqtda turli xil modullarda ishlash imkonini beradi
Scalability: Yangi feature qo'shish yoki oldingi feature ni extend qilish juda oson
Reusability: Module ni qayta ishlatish juda qulay va qiyinchilik tug'dirmaydi
Modular Architecture kimlarga to'gri keladi ?
Team memberlar soni 2-4 bo'lgan holatda siz bu arxitekturadan foydalanishingiz mumkun, va yuqorida etkanimdek arxitektura framework specific emas Vue/React/Svelte hammasiga tushib ketaveradi.
Qo'llab quvvatlash uchun - https://tirikchilik.uz/@sheyxuz