Feature-Sliced Design

↑ 8.2 Архитектура фронтенда и паттерны · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

FSD — популярная методология для крупных фронтенд-проектов; знание показывает системность.

Слои (сверху вниз)

Слой	Что содержит
app	инициализация, провайдеры, роутер, глобальные стили
pages	страницы (композиция виджетов)
widgets	крупные самостоятельные блоки (шапка, таблица заказов)
features	пользовательские сценарии (добавить в корзину, фильтр)
entities	бизнес-сущности (user, order, product)
shared	переиспользуемое без домена (ui-kit, api, lib, config)

Правило зависимостей: слой импортирует только из слоёв ниже. Слайсы одного слоя не знают друг о друге.

Сегменты

Внутри слайса: ui, model, api, lib, config. Публичный API — index.ts.

features/
  add-to-cart/
    ui/AddToCartButton.vue
    model/useAddToCart.ts
    api/addToCart.ts
    index.ts
entities/
  product/
    ui/ProductCard.vue
    model/types.ts
    index.ts

Плюсы

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

Минусы и критика

• порог входа, споры «где слой»;
• лишняя церемония на небольших проектах;
• сложные случаи (связь двух entities) требуют решений;
• нужен линтер границ (@feature-sliced/eslint-config, steiger).

Когда брать

Большое приложение с несколькими командами и долгой жизнью. Небольшим проектам хватит feature-структуры.

Вопросы с ответами

Основное правило FSD?

Слой может зависеть только от нижележащих; между слайсами одного слоя зависимостей нет; наружу — только через публичный API.

Чем features отличается от entities?

Entities — бизнес-сущности и их представление. Features — действия пользователя над сущностями.