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

История архитектурных подходов

Big Ball of Mud

Что это; Почему так распространено; Когда это начинает приносить проблемы; Как быть; И как помогает в этом FSD

• (Статья) Oleg Isonen - Last words on UI architecture before an AI takes over
• (Доклад) Юлия Николаева, iSpring - Big Ball of Mud и другие проблемы монолита, с которыми мы справились
• (Статья) DDD - Big Ball of mud

Smart & Dumb components

О подходе; О применимости в фронтенде; позиция FSD

Про устарелость, про новый взгляд со стороны методологии

Почему компонентно/контейнерный подход - зло

• (Статья) Dan Abramov - Presentational and Container Components (TLDR: deprecated)

Design Principles

Про что речь; позиция FSD

SOLID, GRASP, KISS, YAGNI, … - и почему они плохо работают вместе на практике

И как она агрегирует эти практики

• (Доклад) Илья Азин - Feature-Sliced Design (фрагмент про Принципы проектирования)

DDD

О подходе; Почему плохо работает на практике

В чем отличие, чем улучшает применимость, где перенимает практики

См. также

• (Статья) DDD, Hexagonal, Onion, Clean, CQRS, … How I put it all together
• (Доклад) Илья Азин - Feature-Sliced Design (фрагмент про Clean Architecture, DDD)

Clean Architecture

О подходе; О применимости в фронтенде; позиция FSD

В чем схожи (многим), чем отличаются

• (Тред) Про use-case/interactor в методологии
• (Тред) Про DI в методологии
• (Статья) Александр Беспоясов - Чистая архитектура на фронтенде
• (Статья) DDD, Hexagonal, Onion, Clean, CQRS, … How I put it all together
• (Доклад) Илья Азин - Feature-Sliced Design (фрагмент про Clean Architecture, DDD)
• (Статья) Заблуждения Clean Architecture

Frameworks

О применимости в фронтенде; Почему они не решают проблему; Почему это не единственный подход; позиция FSD

Framework-agnostic, conventional-подход

• (Статья) Про причины создания методологии (фрагмент про фреймворки)
• (Тред) Про применимость методологии для разных фреймворков

Atomic Design

Что это?

В Atomic Design сфера ответственности разделена на стандартизированные слои.

Atomic Design разбивается на 5 слоев (сверху вниз):

1. pages - Назначение аналогично слою pages в FSD.
2. templates - Компоненты задающие структуру страницы, без привязки к контенту.
3. organisms - Модули состоящие из молекул, обладающие бизнес логикой.
4. moleculs - Более сложные компоненты, в которых, как правило, нет бизнес логики.
5. atoms - UI компоненты без бизнес логики.

Модули на одном слое взаимодействуют только с модулями, находящимися на слоях ниже, как в FSD. То есть, молекулы строятся из атомов, организмы из молекул, шаблоны из организмов, страницы из шаблонов. Также Atomic Design подразумевает использование Public API внутри модулей для изоляции.

Применимость во фронтенде

Atomic Design относительно часто встречается в проектах. Atomic Design популярнее среди веб-дизайнеров, нежели в разработке. Веб-дизайнеры часто используют Atomic Design для создания масштабируемых и легко поддерживаемых дизайнов. В разработке Atomic Design часто смешивается с другими архитектурными методологиями.

Однако, так как Atomic Design концентрирует внимание на UI компонентах и их композицию, возникает проблема реализации бизнес логики в рамках архитектуры.

Проблема заключается в том, что Atomic Design не предусматривает четкого уровня ответственности для бизнес-логики, что приводит к распределению по различным компонентам и уровням, усложняя поддержку и тестирование. Бизнес-логика становится размыта, что затрудняет четкое разделение ответственности и делает код менее модульным и переиспользуемым.

Как оно сочетается с FSD?

В контексте FSD некоторые элементы Atomic Design могут быть применены для создания гибких и масштабируемых UI компонентов. Слои atoms и molecules можно реализовать в shared/ui в FSD, что упрощает переиспользование и поддержку базовых UI элементов.

• Директорияshared

  • Директорияui

    • Директорияatoms/

      • …
    • Директорияmolecules/

      • …
  • …

Сравнение FSD и Atomic Design показывает, что обе методологии стремятся к модульности и переиспользованию, но акцентируют внимание на разных аспектах. Atomic Design ориентирован на визуальные компоненты и их композицию. FSD фокусируется на разбиении функциональности приложения на независимые модули и их взаимосвязи.

• Методология Atomic Design
• (Тред) Про применимость в shared/ui
• (Видео) Кратко о Atomic Design
• (Доклад) Илья Азин - Feature-Sliced Design (фрагмент про Atomic Design)

Feature Driven

О подходе; О применимости в фронтенде; позиция FSD

Про совместимость, историческое развитие и сравнение

• (Доклад) Oleg Isonen - Feature Driven Architecture
• Feature Driven - Краткая спецификация (с точки зрения FSD)