Цель — чтобы изменение в одной функции не задевало остальные и новый человек быстро находил код. Основа — разделение по функциональности (features, страницы, сущности), а не по типу файлов (components, utils, hooks), явные публичные API модулей, направление зависимостей (верхние слои зависят от нижних, не наоборот) и проверка границ линтером. Популярная методология — Feature-Sliced Design: слои app, pages, widgets, features, entities, shared.
А ещё Архитектура должна соответствовать размеру: для маленького приложения FSD избыточна
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Признаки проблем: циклические импорты, «utils» на тысячи строк, изменение формы ломает три страницы, страх рефакторинга.
Принципы:
sottoindex модуля;FSD:
| слой | что внутри |
|---|---|
| app | инициализация, провайдеры, маршруты |
| pages | страницы из виджетов |
| widgets | крупные блоки интерфейса |
| features | действия пользователя (добавить в корзину) |
| entities | бизнес-сущности (товар, пользователь) |
| shared | UI-кит, утилиты, клиент API |
Эволюция: при росте до нескольких команд — монорепозиторий с пакетами, затем, если нужно независимое развёртывание, микрофронтенды.
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.