frontend-docs/docs/architecture/03-atomic-design.md

sidebar_position

sidebar_position
3

Atomic design

Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов.

Основные принципы Atomic Design

1. Иерархия компонентов:
   • Компоненты организуются в иерархию от простых к сложным.
   • Каждый уровень иерархии имеет своё назначение и уровень абстракции.
2. Переиспользуемость:
   • Компоненты проектируются так, чтобы их можно было использовать в разных частях интерфейса.
3. Модульность:
   • Каждый компонент изолирован и независим, что упрощает тестирование и поддержку.
4. Масштабируемость:
   • Методология подходит как для небольших, так и для крупных проектов.

Уровни Atomic Design

1. Атомы (Atoms):
   • Наименьшие и базовые элементы интерфейса, которые нельзя разделить на более мелкие части.
   • Примеры: кнопки, инпуты, иконки, текстовые элементы.
2. Молекулы (Molecules):
   • Комбинация нескольких атомов, которые вместе выполняют определённую функцию.
   • Примеры: форма поиска (инпут + кнопка), карточка товара (изображение + заголовок + цена).
3. Организмы (Organisms):
   • Более сложные компоненты, состоящие из молекул и/или атомов.
   • Примеры: шапка сайта (логотип + навигация + форма поиска), футер (ссылки + текст + иконки).
4. Шаблоны (Templates):
   • Макеты страниц, которые определяют структуру и расположение организмов.
   • Пример: шаблон главной страницы (шапка + список карточек товаров + футер).
5. Страницы (Pages):
   • Конкретные реализации шаблонов с реальными данными.
   • Пример: главная страница сайта с заполненными карточками товаров.

Пример структуры проекта с использованием Atomic Design

src/
│
├── components/
│   ├── atoms/              # Атомы
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Text/
│   │
│   ├── molecules/          # Молекулы
│   │   ├── SearchForm/     # Форма поиска (Input + Button)
│   │   └── ProductCard/    # Карточка товара (Image + Text + Button)
│   │
│   ├── organisms/          # Организмы
│   │   ├── Header/         # Шапка сайта (Logo + Navigation + SearchForm)
│   │   └── Footer/         # Футер (Links + Text + Icons)
│   │
│   ├── templates/          # Шаблоны
│   │   ├── HomeTemplate/   # Шаблон главной страницы
│   │   └── ProductTemplate/# Шаблон страницы товара
│   │
│   └── pages/              # Страницы
│       ├── HomePage/       # Главная страница
│       └── ProductPage/    # Страница товара
│
└── App.tsx                 # Основной файл приложения

Преимущества Atomic Design

1. Переиспользуемость:
   • Компоненты можно использовать в разных частях интерфейса, что сокращает дублирование кода.
2. Масштабируемость:
   • Методология подходит для проектов любого размера.
3. Упрощение разработки:
   • Чёткая структура помогает разработчикам быстро находить и изменять нужные компоненты.
4. Согласованность интерфейса:
   • Использование атомов и молекул обеспечивает единообразие дизайна.
5. Упрощение тестирования:
   • Компоненты можно тестировать изолированно.

Недостатки Atomic Design

1. Сложность для небольших проектов:
   • В маленьких проектах такая структура может показаться излишне сложной.
2. Требует дисциплины:
   • Необходимо строго следовать принципам, чтобы избежать смешения уровней.
3. Ограниченная гибкость:
   • В некоторых случаях строгая иерархия может ограничивать возможности кастомизации.

Пример реализации Atomic Design

1. Атом: Кнопка (Button)
2. Молекула: Форма поиска (SearchForm)
3. Организм: Шапка сайта (Header)
4. Шаблон: Главная страница (HomeTemplate)
5. Страница: Главная страница (HomePage)

Когда использовать Atomic Design

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

🚀 Источник: DeepSeek