Ответ вслух Middle Feature-Sliced Design обновлено

Альтернативы FSD

Вопрос

Какие ещё подходы к структуре фронтенда ты знаешь и чем они отличаются?

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

Рамка, с которой стоит начать: все подходы занимаются одним - управлением направлением зависимостей. Различаются они только тем, по какому признаку режут код и насколько жёстко запрещают связи.

Что должно прозвучать в ответе

  • atomic design - деление UI по размеру: atoms, molecules, organisms

  • у atomic слабое место: он про внешний вид, а не про зависимости

  • модульная структура по фичам без слоёв - проще, но не запрещает связи вбок

  • слоистая/чистая архитектура - домен в центре, наружу зависимости не идут

  • монорепозиторий с пакетами - границы обеспечивает сборщик

  • выбор определяется не модой, а тем, какие связи хочется запретить

Что могут спросить следом

  • Что выбрал бы ты и почему?

Разбор

Рамка, с которой стоит начать: все подходы занимаются одним - управлением направлением зависимостей. Различаются они только тем, по какому признаку режут код и насколько жёстко запрещают связи. Чем жёстче граница, тем дороже её держать.

  • По типам файлов (components/, utils/) - не запрещает ничего. Нормально для прототипа, разваливается на горизонте года.
  • По фичам - папка на фичу. Фичу видно целиком, но ничто не мешает ей импортировать соседнюю, и клубок возвращается из комков покрупнее.
  • Atomic Design - деление по размеру UI. Отличный язык для дизайн-системы и никакой как архитектура приложения: про бизнес-зависимости он молчит, и «organism» быстро начинает ходить в API. С FSD не конкурирует - хорошо ложится внутрь shared/ui.
  • FSD - слой плюс домен, запрет импортов вбок и вверх. Ацикличный граф по построению, цена - церемония.
  • Чистая / гексагональная - домен в центре, зависимости внутрь, снаружи адаптеры. Оправдана там, где логики действительно много: тарифы, расчёты, редакторы. На типичном фронте даёт пять файлов на кнопку.
  • Слоистая (n-tier) - только слои, без деления по доменам: внутри слоя снова непонятно, что от чего зависит.
  • Монорепо с пакетами - границу держит сборщик, а не соглашение: нельзя импортировать то, чего нет в зависимостях. Самая жёсткая гарантия и самая дорогая инфраструктура.
  • Микрофронтенды - разные приложения на одной странице. Решают проблему команд, а не кода; при одной команде это чистый убыток.

Заканчивать надо своим выбором с причиной: «на небольшом продукте деление по доменам без слоёв - горизонт и размер команды не оправдывали церемонию; на продукте с командой взял бы FSD и сразу поставил линтер».

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Термины по теме