FSD - Feature-Sliced-Design

Architectural methodology for frontend projects

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

Она имеет ряд преимуществ таких как:

• Явная бизнес-логика

  Архитектуру легко осваивать, поскольку она состоит из доменных модулей

• Адаптивность

  Компоненты архитектуры можно гибко заменять, добавлять под новые условия

• Технический долг

  Каждый модуль можно независимо модифицировать / переписать без сайд-эффектов

• Явная переиспользуемость

  Сохраняется баланс между DRY и локальной кастомизацией

А также имеет ряд концепций:

• Public API

  Каждый модуль должен иметь на верхнем уровне декларацию своего публичного API

• Изоляция

  Модуль не должен зависеть напрямую от других модулей того же слоя или вышележаших слоев

• Понимание потребностей

  Ориентирование на потребности бизнеса и пользователя

Основы

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

Слои стандартизированы во всех проектах и расположены вертикально. Модули на одном слое могут взаимодействовать лишь с модулями, находящимися на слоях строго ниже. На данный момент слоев шесть (снизу вверх) , чем ниже модуль тем опаснее будет его изменять.

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

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

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

Это был краткий обзор архитектуры FSD , более подробно вы можете ознакомиться на сайте