Что такое Feature-Sliced Design (FSD)
Что проверяют
Знаете ли вы структуру слоёв и понимаете ли главное правило импортов.
Как отвечать
Это методология организации фронтенд-проекта: она отвечает на вопрос, куда положить файл, и ограничивает связи между частями.
Структура трёхуровневая: слои, срезы внутри слоя, сегменты внутри среза.
Слои сверху вниз:
- app: инициализация, провайдеры, глобальные стили, маршрутизация;
- pages: страницы, собранные из нижележащего;
- widgets: самостоятельные блоки страницы, например шапка или карточка вакансии со всеми действиями;
- features: пользовательские сценарии, то есть действия, приносящие ценность: авторизоваться, добавить в избранное, откликнуться;
- entities: сущности предметной области с их представлением и моделью: пользователь, вакансия, компания;
- shared: переиспользуемое без привязки к предметной области: библиотека компонентов, обёртка над сетью, утилиты.
Главное правило: слой может импортировать только нижележащие. Обратные и горизонтальные связи запрещены, поэтому одна функция не может напрямую зависеть от другой. Если такая связь потребовалась, значит либо общая часть спускается ниже, либо композиция поднимается выше, на страницу или виджет.
Срез это деление внутри слоя по предметной области, сегмент это деление внутри среза по технической роли: интерфейс, модель, обращения к серверу, вспомогательное.
Что это даёт: предсказуемое место для любого файла, ограниченная связность, возможность удалить функцию целиком одной папкой, простое разделение работы в большой команде.
Цена честно: избыточность для маленького проекта, заметный порог входа и постоянные споры о том, функция это или сущность. Правило импортов обязательно проверять линтером, иначе структура размывается за пару месяцев.
Где спотыкаются
Импортируют между срезами одного слоя.
Кладут предметную логику в общий слой.
Применяют методологию на проекте из трёх экранов.
Не настраивают проверку правил и получают формально соблюдённую структуру с реальными нарушениями.