Вопрос направлен на выявление опыта в структурировании кодовой базы и понимания философии разных популярных методологий.
Atomic Design — это методология дизайна, которая делит интерфейс на иерархические уровни: атомы (кнопка, инпут), молекулы (поисковая строка = инпут + кнопка), организмы (шапка сайта), шаблоны и страницы. FSD (Feature-Sliced Design) — это архитектурная методология для frontend-проектов, которая фокусируется на организации папок по бизнес-логике: она делит код на слои (app, pages, features, entities, shared). Ключевое отличие: Atomic Design — это про компоненты, а FSD — про всю структуру проекта, включая логику, состояния и API.
Обе методологии помогают создавать масштабируемые и поддерживаемые проекты, но делают это с разных точек зрения.
Atomic Design (by Brad Frost)
Философия: Декомпозиция пользовательского интерфейса на небольшие, переиспользуемые компоненты, подобно тому, как вещество состоит из атомов, молекул и т.д.
Уровни:
Атомы: Базовые строительные блоки (кнопки, инпуты, иконки).
Молекулы: Простые комбинации атомов (поисковая строка = поле ввода + кнопка).
Организмы: Более сложные, законченные блоки интерфейса (шапка, содержащая логотип, навигацию и поисковую молекулу).
Шаблоны: Макеты страниц без контента, показывающие структуру.
Страницы: Конкретные экземпляры шаблонов с реальным контентом.
Фокус: В первую очередь на визуальной составляющей и переиспользовании компонентов.
Feature-Sliced Design (FSD)
Философия: Организация всей кодовой базы по бизнес-возможностям (features) и строгое разделение ответственности между различными архитектурными слоями.
Слои (от низкого к высокому уровню):
Shared: Переиспользуемые общие модули (UI-кит, утилиты, API-инстансы).
Entities: Бизнес-сущности (например, User, Product, Order).
Features: Бизнес-возможности, специфичные для приложения (например, auth-by-email, product-search). Каждая фича содержит всю логику для своей работы (UI, хуки, store, API-вызовы).
Widgets: Композитные блоки, собирающие несколько фич и сущностей для создания сложных секций страниц.
Pages: Конечные страницы приложения, композитные слои, которые собирают виджеты и фичи.
App: Глобальная конфигурация приложения, провайдеры, стили.
Фокус: На архитектуре всего приложения, разделении ответственности и управляемости бизнес-логики.
Ключевые отличия:
Scope: Atomic Design — это дизайн-система и структура компонентов. FSD — это полноценная архитектурная методология для всего проекта.
Гибридный подход: Часто эти методологии используют вместе. В рамках FSD-слоя shared/ui можно организовать компоненты по принципам Atomic Design, а в слоях features и pages — использовать эти компоненты для построения бизнес-логики.
