Какие основные слои существуют в Feature-Sliced Design и за что они отвечают?

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

Основные слои FSD (сверху вниз)

• app — самый верхний слой, отвечает за инициализацию приложения, глобальные настройки, провайдеры (например, роутинг, стили, store) и общую логику запуска. Это точка входа в приложение.
• pages — слой, который композирует сущности и фичи для формирования конкретных страниц приложения. Каждая страница соответствует маршруту (route) и обычно не содержит сложной бизнес-логики, а лишь собирает компоненты из нижележащих слоёв.
• features — слой для интерактивной логики, привязанной к предметной области (например, аутентификация, комментарии, корзина). Здесь размещаются пользовательские сценарии (features), которые могут включать компоненты, хуки, хранилища (store), специфичные для данной фичи.
• entities — слой базовых бизнес-сущностей, таких как User, Product, Order. Эти сущности независимы от конкретных фич и представляют собой фундаментальные понятия предметной области. Обычно содержат компоненты отображения, типы, модели данных.
• shared — самый нижний слой, содержащий переиспользуемые технические компоненты, утилиты, хелперы, UI-кит (кнопки, инпуты), конфигурации. Этот слой не привязан к бизнес-логике и используется всеми вышележащими слоями.

Пример структуры проекта

Вот как может выглядеть файловая структура, отражающая слои FSD:

src/
  app/                    # Инициализация приложения, провайдеры
    providers/
    styles/
    App.tsx
  pages/                  # Страницы приложения
    home/
      ui/
        HomePage.tsx
    about/
  features/               # Фичи (пользовательские сценарии)
    auth-by-phone/
      ui/
      model/
      lib/
    toggle-theme/
  entities/               # Бизнес-сущности
    user/
      ui/
        UserCard.tsx
      model/
        types.ts
    product/
  shared/                 # Переиспользуемый код
    ui/
      Button.tsx
      Input.tsx
    lib/
      api/
      helpers/

Как и где применяется FSD

FSD особенно полезен в крупных frontend-проектах с долгосрочной поддержкой и командной разработкой. Он помогает:

• Чётко разделить ответственность между частями приложения.
• Управлять зависимостями (например, фича не может импортировать код из pages, но может из entities и shared).
• Упростить навигацию по коду благодаря единой структуре.
• Повысить переиспользуемость компонентов и логики.

Методология часто используется с React/TypeScript-стеком, но может быть адаптирована и для других фреймворков.

Вывод: Feature-Sliced Design стоит применять в средних и крупных frontend-приложениях, где важны масштабируемость, чёткая организация кода и управление зависимостями между модулями. Для маленьких проектов или прототипов внедрение FSD может быть избыточным.