Архитектура фронтенда
Вопрос
Как ты организуешь структуру большого фронтового проекта?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
слои по назначению, а не по типу файла
запрет зависимостей снизу вверх - слой знает только о нижних
фича - вертикальный срез: UI, модель, запросы вместе
общее выносится в shared только после третьего использования
публичный API слоя через index - внутрь не импортируют
структура должна отвечать на вопрос «где лежит фича X»
Что могут спросить следом
- Что делать, если фича нужна двум страницам
- Как не превратить shared в свалку
- Чем FSD лучше группировки по типам на практике
Разбор
Ключевой выбор - группировать по назначению, а не по типу файла. Папки
components/, hooks/, utils/ на сто экранов превращаются в свалку: чтобы понять фичу,
надо открыть пять папок.
Рабочая схема (FSD или её упрощение): app → pages → widgets → features →
entities → shared. Правило одно и проверяется линтером: слой импортирует только
из нижних. Фича - вертикальный срез: её компоненты, модель и запросы лежат вместе, и удалить
фичу - значит удалить папку.
shared наполняется не заранее, а по факту третьего использования. У каждого модуля -
публичный API через index.ts, внутрь не импортируют.
Проверка качества структуры простая: новый человек должен находить код фичи по её названию, не спрашивая.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.