Platform
    • FSD Layers
    • Entity Structure
Projects
  • API Connections & Tools
  1. Documentation
  2. Architecture (FSD)

Правила Feature-Sliced Design

Установление строгой иерархии слоев и границ зависимостей для обеспечения горизонтальной и вертикальной развязки.

Архитектурный стандарт проекта

Методология FSD позволяет создавать масштабируемые и предсказуемые приложения, разделяя код на функциональные слои с четкой изоляцией ответственности.

01Ментальная иерархия

Поток зависимостей всегда направлен вниз: верхние слои используют нижние, но никогда наоборот.

app
Можно использовать ↓
pages
Можно использовать ↓
widgets
Можно использовать ↓
features
Можно использовать ↓
entities
Можно использовать ↓
shared
Фундамент

02Границы зависимостей

Каждый слой имеет четко определенные права импорта.

entities
имеет доступ к:
shared
features
имеет доступ к:
entities
shared
features
widgets
имеет доступ к:
features
entities
shared
pages
имеет доступ к:
widgets
features
entities
shared
app
имеет доступ к:
pages
widgets
features
entities
shared

03Стандартная структура Entity

Каждая сущность (entity) — это самодостаточный модуль. Мы используем строгое разделение по подпапкам для предсказуемости и простоты поддержки.

Доступные модули

  • api/: RTK Query определения.
  • converters/: Мапперы данных (DTO <-> Domain).
  • handlers/: Мок-обработчики (MSW).
  • mock/: Статические фикстуры и фейки.
  • schema/: Zod-схемы валидации.
  • slice/: Redux-стейт и селекторы.
  • ui/: Компоненты отображения.
  • types/: Интерфейсы и типы данных.
  • index.ts: Точка входа модуля.

04Widget: Разделение Model и UI

Виджеты — это "умные" блоки. Мы отделяем логику (model) от визуальной части (ui), чтобы упростить тестирование и рефакторинг.

Почему это важно

Папка model/ содержит всё то, что делает виджет функциональным (схемы Zod, конфиги форм, локальные типы). Папка ui/ содержит только компоненты отображения.

05Практические примеры

✅ Корректно
src/features/auth/ui/login-form.tsx
1import { useAuthStore } from "@/entities/session"; // OK: feature -> entity 2import { Button } from "@/shared/ui"; // OK: feature -> shared
❌ Нарушение
src/entities/user/model/user.ts
1import { logoutFeature } from "@/features/auth"; // ERROR: entity -> feature (LAYER VIOLATION)

06Глобальные настройки

Кросс-слойные импорты
Соблюдается
Контроль структуры
Соблюдается
Приватные импорты
Соблюдается
Barrel-экспорты
Соблюдается