docs(architecture): переработать раздел архитектуры
- заменил описание слоёв и модулей FSD на новую модель с компонентами - добавил раздел 'Что важно знать' с пояснением что архитектура надстройка над FSD - добавил описание master component и его правил - добавил раздел сегментов с таблицей - убрал дублирующиеся правила зависимостей и публичного API
This commit is contained in:
@@ -4,57 +4,67 @@ title: Архитектура
|
||||
|
||||
# Архитектура
|
||||
|
||||
Архитектура построена на FSD (`Feature‑Sliced Design`) и строгих границах модулей.
|
||||
Цель — разделить ответственность, упростить сопровождение и контроль зависимостей.
|
||||
Этот раздел описывает архитектуру проекта: из каких слоёв состоит приложение,
|
||||
как организован код внутри слоёв и какие правила управляют зависимостями.
|
||||
|
||||
## Принципы
|
||||
## Что важно знать
|
||||
|
||||
- Разделять UI, бизнес-логику и инфраструктуру.
|
||||
- Держать зависимости однонаправленными.
|
||||
- Открывать наружу только публичный API модулей.
|
||||
- Не допускать циклических зависимостей.
|
||||
Проект использует [FSD (Feature-Sliced Design)](https://feature-sliced.design/docs/get-started/overview)
|
||||
как базовую архитектурную методологию. Если вы не знакомы с FSD — начните с официальной документации.
|
||||
|
||||
## Слои (FSD)
|
||||
Данная архитектура является **надстройкой над FSD**, а не заменой. Все правила FSD действуют
|
||||
по умолчанию — если правило явно не переопределено в этом документе, применяется стандарт FSD.
|
||||
Единственное отклонение: вместо слайсов используются **компоненты**.
|
||||
|
||||
- **app** — инициализация приложения: провайдеры, глобальные стили. В Next.js эта же папка `app/` дополнительно содержит системные файлы роутинга (`layout.tsx`, `page.tsx`).
|
||||
- **screens** — UI-компоненты страниц. Каждый экран — отдельный компонент, который собирает виджеты и фичи конкретной страницы. Роутинг только использует эти компоненты — он не является частью слоя `screens`. В Next.js файлы `page.tsx` остаются тонкими: импортируют экран и рендерят его.
|
||||
- **layouts** — каркас и шаблоны страниц.
|
||||
- **widgets** — крупные блоки интерфейса, собирающие несколько сценариев.
|
||||
- **features** — отдельные пользовательские действия и сценарии.
|
||||
- **entities** — бизнес-сущности и их модель.
|
||||
- **shared** — переиспользуемая инфраструктура, утилиты и базовые UI‑компоненты.
|
||||
## Слои
|
||||
|
||||
## Модули (FSD)
|
||||
| Слой | Назначение |
|
||||
|------|-----------|
|
||||
| `app` | Инициализация: провайдеры, стили, роутинг Next.js |
|
||||
| `screens` | Сборка страницы из виджетов и фич |
|
||||
| `layouts` | Каркасы и шаблоны страниц |
|
||||
| `widgets` | Крупные блоки интерфейса |
|
||||
| `features` | Пользовательские сценарии и действия |
|
||||
| `entities` | Бизнес-сущности |
|
||||
| `shared` | Утилиты, UI-кит, инфраструктура |
|
||||
|
||||
- Модуль — это отдельная папка в слоях `screens`, `layouts`, `widgets`, `features`, `entities`, которая реализует один сценарий/блок. В корне модуля лежит главный файл (`*.screen.tsx`, `*.layout.tsx`, `*.widget.tsx`, `*.feature.tsx`, `*.entity.tsx`) и публичный API (`index.ts`).
|
||||
- Внутри модуля используются подпапки (по необходимости):
|
||||
- `ui/` — дочерние UI‑компоненты модуля.
|
||||
- `model/` — состояние и бизнес‑логика модуля.
|
||||
- `styles/` — локальные стили модуля.
|
||||
- `helpers/` — локальные хелперы.
|
||||
- `lib/` — утилиты модуля.
|
||||
- `api/` — API‑вызовы модуля.
|
||||
Слой `pages` не используется — конфликтует с Next.js. Вместо него: `screens` и `layouts`.
|
||||
|
||||
## Правила зависимостей
|
||||
Зависимости идут строго сверху вниз: `app → screens → layouts → widgets → features → entities → shared`.
|
||||
|
||||
- Допустимые импорты идут сверху вниз: `app → screens → layouts → widgets → features → entities → shared`.
|
||||
- Импорты между слоями — через публичный API.
|
||||
- Внутри одного слоя — относительные импорты.
|
||||
## Компоненты
|
||||
|
||||
## Публичный API модулей
|
||||
Компонент — стандартная UI-единица, такая же как в любом React-проекте. Содержит корневой `.tsx`,
|
||||
публичный API (`index.ts`) и сегменты.
|
||||
|
||||
- Каждый модуль экспортирует наружу только то, что нужно другим слоям.
|
||||
- Внешние импорты идут только через `index`‑файл модуля.
|
||||
- Внутренние файлы не импортируются напрямую извне.
|
||||
Компоненты располагаются в:
|
||||
- `shared/ui/` — переиспользуемые компоненты без бизнес-контекста
|
||||
- `ui/` внутри master component'а — дочерние компоненты *(подробнее в разделе [Master component](#master-component))*
|
||||
|
||||
## Границы ответственности
|
||||
## Сегменты
|
||||
|
||||
- Бизнес‑логика не размещается в UI‑компонентах.
|
||||
- UI‑компоненты должны быть максимально простыми и предсказуемыми.
|
||||
- Связь между независимыми сценариями поднимается на уровень выше.
|
||||
Сегмент — папка внутри компонента, группирующая код по техническому назначению. Набор не фиксирован.
|
||||
|
||||
## Типовые ошибки
|
||||
| Сегмент | Назначение |
|
||||
|---------|-----------|
|
||||
| `styles/` | Стили |
|
||||
| `types/` | Интерфейсы, типы, enums, DTO |
|
||||
| `ui/` | Компоненты, провайдеры и любые другие элементы интерфейса |
|
||||
| `stores/` | Сторы состояния |
|
||||
| `hooks/` | React-хуки |
|
||||
| `services/` | Внешние источники данных |
|
||||
| `lib/` | Утилиты |
|
||||
| `helpers/` | Вспомогательные функции |
|
||||
| `config/` | Константы, конфигурация |
|
||||
|
||||
- Импорт из более высокого слоя в более низкий.
|
||||
- Смешивание логики нескольких слоёв в одном модуле.
|
||||
- Прямые импорты внутренних файлов, минуя публичный API.
|
||||
## Master component
|
||||
|
||||
Master component — это обычный компонент, на который наложен ряд дополнительных правил.
|
||||
Эти правила определяют его место в архитектуре и границы зависимостей.
|
||||
|
||||
- Может располагаться только в слоях: `screens`, `layouts`, `widgets`, `features`, `entities`
|
||||
- Импортирует master component'ы только из слоёв ниже по иерархии
|
||||
- Корневой `.tsx` именуется с суффиксом слоя: `header.widget.tsx`, `auth.feature.tsx`
|
||||
- Корневой `.tsx` необязателен — `index.ts` может экспортировать несколько сущностей напрямую
|
||||
- Дочерние компоненты в `ui/` доступны снаружи только через `index.ts`
|
||||
- Компоненты внутри одного `ui/` могут импортировать друг друга
|
||||
|
||||
Reference in New Issue
Block a user