Атомарная архитектура web-приложения (Atomic Design)

Подход заключается в разделении компонентов на пять основных слоев, где каждый слой должен состоять только из компонентов нижестоящего слоя.

Структура:

Атомы

Базовый слой UI-компонентов (кнопки, инпуты, лейблы)

Молекулы

Компоненты состоящие из атомов, но не обладающие бизнес-логикой (формы, диалоги, поп-апы)

Организмы

Компоненты состоящие из молекул и обладающие бизнесс-логикой (хэдер, сайдбар, виджет)

Шаблоны

Компоненты задающие структуру страницы, но без привязки к контенту

Страницы

Точка входа для компоновки конечной страницы

Итог

Плюсы

• Четкие правила для организации взаимосвязей компонентов

Минусы

• Нет четкой бизнес-ориентированности в структуре слоев

Подходит:

• Для построения UI-систем