Feature sliced design example with mobx

Tech stack: React, Typescript, Mobx, Tsyringe

Proyektdagi qatlamlar (en: layer, ru: слой) ketma-ketligi (yuqoridan pastga)

  1. app (yuqori qatlam, har xil provayderlar, global style uchun)
  2. pages (barcha sahifalar)
  3. widgets (features va entitities larni mustaqil bloklarga jamlovchi kompozitsion qatlam)
  4. features (foydalanuvchi bilan aloqa qiluvchi qatlam)
  5. entities (dasturimizdagi asosiy biznes obyektlar)
  6. shared (dasturimizdagi biznesga aloqasi yo'q bo'lgan qayta ishlatiluvchi kod)
MUHIM QOIDALAR:
  1. Pastki qatlamda joylashgan modullar o'zidan yuqori joylashgan modullarni to'g'ridan to'g'ri import qilishligi mumkin emas
  2. Modullar qatlamlarga ajratilishligi file type ga qarab emas modulning vazifasiga qarab ajratilishligi kerak
  3. Logika va ui bir komponent ichida qolib ketmasligi kerak (ya'ni bir-birian alohida bo'lishligi kerak)
  4. modullar uchun testlar modullar yonida yoziladi (hozirgi proyektda test yozilmagan)
Foydali linklar:
Kichik eslatmalar:
  • Ushbu arxitektura uchun ushbu proyektdagi hech bir texnologiya majburiy emas
  • API so'rovlari sekin ishlaydi, sababi mock server javobni sekinroq qaytarishida