Перейти к основному содержимому

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

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

Big Ball of Mud

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

Smart & Dumb components

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

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

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

Design Principles

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

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

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

DDD

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

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

См. также

Clean Architecture

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

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

Frameworks

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

О применимости в фронтенде; Почему они не решают проблему; Почему это не единственный подход; позиция 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 фокусируется на разбиении функциональности приложения на независимые модули и их взаимосвязи.

Feature Driven

WIP

Статья находится в процессе написания

Чтобы ускорить ее появление, можно:


🍰 Stay tuned!

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

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