Feature-Sliced Design: katta loyihalar uchun frontend arxitekturasi

Feature-Sliced Design nima

Feature-Sliced Design (FSD) — frontend kodini fayl turi bo‘yicha emas, biznes ma’nosi bo‘yicha tuzadigan metodologiya. Bitta ulkan components/ va hooks/ papkasi o‘rniga kod qatlamlar, slaysalar va segmentlarga guruhlanadi va bitta qat’iy qoida amal qiladi: bog‘liqliklar faqat pastga yo‘naladi. Natijada funksiyani bog‘liq bo‘lmagan qismlarni buzmasdan topish, o‘zgartirish yoki o‘chirish mumkin.

Qatlamlar

Qatlamlar — eng aniqdan eng umumiygacha bo‘lgan yuqori darajadagi papkalar:

Eski hujjatlarda processes qatlami tilga olinadi — u eskirgan va uning mantiqi odatda features yoki app’ga ko‘chadi. Barcha qatlamlar shart emas: kichik loyihalar ko‘pincha app, pages, shared va bir nechta entity bilan cheklanadi.

Slaysalar va segmentlar

Slaysalar qatlamni biznes-domenlar bo‘yicha bo‘ladi: entities/user, entities/product, features/add-to-cart. app va shared qatlamlarida slaysalar yo‘q.

Segmentlar slaysni texnik vazifasi bo‘yicha bo‘ladi. Odatiy nomlar:

• ui — komponentlar
• model — holat, store’lar, biznes mantiq
• api — backend’ga so‘rovlar
• lib — shu slaysga xos yordamchi kod
• config — konstantalar va flaglar

Import qoidalari va ommaviy API

FSD ikkita qoidaga tayanadi:

1. Modul faqat o‘zidan qat’iy pastdagi qatlamlardan import qiladi. Feature entities va shared’dan foydalana oladi, lekin widgets yoki boshqa feature’dan emas. Bir qatlamdagi slaysalar bir-birini import qilmaydi.
2. Har bir slaysning ommaviy API’si bor — index.ts fayli. Qolgan kod faqat undan import qiladi, hech qachon ichki yo‘llardan emas.

// entities/product/index.ts
export { ProductCard } from "./ui/product-card";
export { useProduct } from "./model/use-product";
export type { Product } from "./model/types";

// to‘g‘ri
import { ProductCard } from "@/entities/product";
// noto‘g‘ri: ichki qismlarga kirib ketish
import { ProductCard } from "@/entities/product/ui/product-card";

Steiger linteri va modul chegaralari uchun ESLint plaginlari bu qoidalarni avtomatik tekshiradi, shunda arxitektura faqat code review’ga bog‘liq bo‘lmaydi.

Agar ikki entity haqiqatan bir-biriga kerak bo‘lsa (buyurtma foydalanuvchiga havola qiladi), FSD @x orqali kross-import notatsiyasini taklif qiladi — aniq va nazorat qilinadigan istisno. Undan kamdan-kam foydalaning.

Next.js’dagi papka misoli

Next.js’dagi app/ papkasi nomi bo‘yicha FSD’dagi app qatlami bilan to‘qnashadi. Keng tarqalgan yechim: Next.js routing’ini ildizdagi app/da FSD sahifalarini qayta eksport qiladigan yupqa fayllar sifatida qoldirish, FSD kodini esa src/ga ko‘chirish.

app/                      # faqat Next.js routing
  products/[id]/page.tsx  # export { ProductPage as default } from "@/pages/product"
src/
  app/                    # provayderlar, global stillar
  pages/
    product/
      ui/product-page.tsx
      index.ts
  widgets/
    product-gallery/
  features/
    add-to-cart/
      ui/add-to-cart-button.tsx
      model/use-add-to-cart.ts
      index.ts
  entities/
    product/
      api/get-product.ts
      ui/product-card.tsx
      model/types.ts
      index.ts
  shared/
    ui/button.tsx
    api/http.ts

pages nomi bilan ham ehtiyot bo‘ling: Next.js pages papkasini (shu jumladan src/pagesni) Pages Router marshrutlari deb qabul qilishi mumkin. FSD’ning Next.js bo‘yicha rasmiy qo‘llanmasida bu to‘qnashuvdan qanday qochish yozilgan — tuzilmani qat’iylashtirishdan oldin unga qarang.

Mavjud loyihani ko‘chirish

Hammasini birdaniga qayta yozmang. Bosqichma-bosqich yo‘l:

1. shared yarating va u yerga UI-kit, API-klient va utilitalarni ko‘chiring.
2. Ilova gapiradigan asosiy entitylarni ajrating (foydalanuvchi, mahsulot, buyurtma).
3. Keyin sahifalarni ko‘chiring va ularni yupqa saqlang: ular yig‘adi, mantiq saqlamaydi.
4. Yangi vazifalarda kodga tegsangiz, featurelarni ajratib boring.
5. Tuzilma barqarorlashgach, import qoidalari linting’ini yoqing va buzilishlarni asta-sekin tuzating.

Eng ko‘p uchraydigan qiyinchilik — nima feature, nima entity ekanini aniqlash. Amaliy test: entity — ot (mahsulot), feature — foydalanuvchi bajaradigan fe’l (mahsulotni savatga qo‘shish).

FSD qachon ortiqcha

• Lendinglar, kichik marketing saytlari va prototiplar.
• Tuzilmadan ko‘ra tezlik muhimroq bo‘lgan qisqa muddatli MVP’lar.
• Bir nechta ekranli kichik ilova ustida yolg‘iz ishlaydigan dasturchi.
• Qoidalarga rioya qilmaydigan jamoalar: yarim joriy qilingan FSD oddiy, lekin izchil tuzilmadan yomonroq.

FSD bir nechta dasturchi, ko‘plab funksiyalar va uzoq umr ko‘radigan loyihalarda o‘zini oqlaydi.