Frontend Arxitekturasında Feature-Sliced Design (FSD)

Layihəyə ilk başlayanda hər şey sadə görünür: 'components', 'hooks', 'utils' qovluqları açılır. Lakin layihə böyüdükcə, komandaya yeni mühəndislər qoşulduqca 'components' içində 300-dən çox qarışıq fayl yaranır. Hansı düymə hansı səhifənindir? Bir komponenti dəyişəndə başqa haralar sıradan çıxacaq? Bu xaosa son qoymaq üçün müasir frontend dünyasında Feature-Sliced Design (FSD) metodologiyası sürətlə standartlaşır. 📌 1. FSD-nin Əsas Qatları (Layers) FSD layihəni iyerarxik qatlara bölür: 1. app: Qlobal stillər, provayderlər və marşrut konfiqurasiyası. 2. pages: Tam səhifələr (məsələn, Bloq səhifəsi, Profil səhifəsi). 3. widgets: Bir neçə xüsusiyyəti birləşdirən böyük bloklar (məsələn, Header, BlogSidebar). 4. features: İstifadəçiyə birbaşa dəyər verən interaktiv funksiyalar (məsələn, LikeButton, SearchAndFilter). 5. entities: Biznes obyektləri və modelləri (məsələn, PostCard, AuthorCard). 6. shared: Heç bir biznes məntiqi olmayan təmiz UI primitivləri və köməkçilər (məsələn, FormInput, Button, ReadingProgressBar). 📌 2. Qızıl Qayda: Yuxarıdan Aşağıya Asılılıq FSD-də heç bir qat özündən yuxarıdakı qatı import edə bilməz! Məsələn, 'shared' qatındakı bir komponent 'pages' və ya 'features'-dən heç nə götürə bilməz. Bu sadə qayda layihədəki "spagetti" kodlaşmanın və dairəvi asılılıqların (Circular Dependencies) qarşısını 100% alır. Nəticədə yeni gələn proqramçı kodun hara aid olduğunu dərhal anlayır və hər bir xüsusiyyət asanlıqla test olunub təcrid edilir.