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

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

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

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