FSD архитектура⚙️

Чтобы я сильно не скучала, меня на некоторое время добавили в другой проект, который использует FSD архитектуру.
Я трогала ее совсем немного и давно, а последний год работала с Atomic Design, поэтому сегодня я проникаюсь FSD, разворачиваю проект и погружаюсь в него.
Собственно, расскажу и вам, что это такое.

Feature-Sliced Design (FSD) — это архитектурная методология для проектирования frontend-приложений.
Проще говоря, это свод правил и соглашений по организации кода.
Главная цель методологии — сделать проект понятным и структурированным, особенно когда условия бизнеса постоянно меняются.

Проект на FSD состоит из слоев layers, каждый слой состоит из слайсов slices и каждый слайс состоит из сегментов segments (1, 2 картинка).

Слои:
1. app — настройки, стили и провайдеры для всего приложения (собсна как и везде).
2. processes (уже устарел) — сложные сценарии, покрывающие несколько страниц.
3. pages — страницы из сущностей, фич и виджетов. (обыкновенные страницы как и везде)
4. widgets — слой для соединения сущностей и фич в самостоятельные блоки. (например, IssuesList, UserProfile)
5. features — взаимодействия с пользователем. (например, SendComment, AddToCart, UsersSearch)
6. entities — бизнес-сущности. (например, User, Product, Order)
7. shared — переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса. (например, UIKit, libs, API, короче как и во многих других не FSD проектах)

При этом такая история, что верхний слой может использовать нижние, а наоборот - нет. То есть виджет может использовать фичи, которые используют сущности, фичи могут использовать только сущности, а сущности вообще ничего исползовать не могут. Shared может использовать во всех слоях (3 картинка).

Затем есть слайсы, разделяющие код по предметной области. Разделение на слайсы обеспечивает высокий уровень связности (cohesion) при низком уровне зацепления (coupling).

В свою очередь, каждый слайс состоит из сегментов. Это маленькие модули, главная задача которых — разделить код по техническому назначению.
Самые распространенные сегменты — ui, model (store, actions), api и lib (utils/hooks), но в некоторых случаях api и config вынесены в shared-слой.

Пример построения приложения по FSD.

Я пока не работала достаточно с этим подходом, чтобы написать вам свое мнение, но дока FSD говорит о следующих преимуществах:
- Единообразие
- Контролируемое переиспользование логики
- Устойчивость к изменениям и рефакторингу
- Ориентированность на потребности бизнеса и пользователей

Постаралсь очень кратко, штука на мой взгляд прикольная, но надо привыкнуть, вот пошла привыкать🤓