115 lines
7.1 KiB
Markdown
115 lines
7.1 KiB
Markdown
|
---
|
|||
|
|
title: SLM Design
|
|||
|
|
description: "Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили."
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# SLM Design
|
|||
|
|
Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили.
|
|||
|
|
|
|||
|
|
## Разделы спецификации
|
|||
|
|
|
|||
|
|
Спецификация SLM Design состоит из нескольких связанных разделов. Этот обзор даёт общий контекст, а детальные правила описаны дальше:
|
|||
|
|
|
|||
|
|
- [Слои](./layers.md) — уровни организации `src/`, направление зависимостей и зона ответственности каждого слоя.
|
|||
|
|
- [Модули](./modules.md) — границы ответственности, публичный API, типы модулей и отличие модуля от компонента.
|
|||
|
|
- [Сегменты](./segments.md) — внутренние папки модуля (`ui/`, `parts/`, `hooks/`, `types/` и другие) и правила размещения файлов.
|
|||
|
|
- [Монорепозитории](./monorepo.md) — применение SLM в `apps/` и `packages/`, правила выноса общих слоёв и ограничения для business.
|
|||
|
|
|
|||
|
|
Рекомендуемый порядок чтения: обзор → слои → модули → сегменты → монорепозитории.
|
|||
|
|
|
|||
|
|
## Преимущества
|
|||
|
|
|
|||
|
|
### Вертикальная организация домена
|
|||
|
|
|
|||
|
|
Бизнес-домен не разбивается по техническим слоям — сценарии, сущности, типы и UI живут в одном модуле. Это сокращает время навигации и упрощает сопровождение: все изменения домена локализованы.
|
|||
|
|
|
|||
|
|
### Dependency Injection без фреймворков
|
|||
|
|
|
|||
|
|
Cross-domain зависимости в бизнес-слое реализуются через фабрики — модуль декларирует что ему нужно, а точка использования предоставляет зависимости. Домены изолированы без DI-контейнеров, провайдеров и шин событий.
|
|||
|
|
|
|||
|
|
### Разделение ответственности без перегрузки слоёв
|
|||
|
|
|
|||
|
|
Сервисы приложения (`infra/`), UI-кит (`ui/`) и общие ресурсы (`shared/`) — три разных слоя с разной природой. Ни один слой не превращается в свалку разнородного кода.
|
|||
|
|
|
|||
|
|
### Горизонтальная инкапсуляция
|
|||
|
|
|
|||
|
|
Вложенные модули (`parts/`) и направление зависимостей позволяют нескольким разработчикам работать над одной областью приложения параллельно, не затрагивая код друг друга.
|
|||
|
|
|
|||
|
|
### Колокация по умолчанию
|
|||
|
|
|
|||
|
|
Код начинает жизнь рядом с местом использования и поднимается в общие слои только при реальной потребности. Глобальные слои не засоряются преждевременными абстракциями.
|
|||
|
|
|
|||
|
|
### Явное разделение каркаса и контента
|
|||
|
|
|
|||
|
|
Каркас группы маршрутов (`layouts/`) и контент конкретной страницы (`screens/`) — независимые слои с собственной ответственностью.
|
|||
|
|
|
|||
|
|
### Масштабирование через группировку
|
|||
|
|
|
|||
|
|
При росте проекта слои не теряют структуру — модули группируются по естественным признакам: бизнес-домены по субдоменам, страницы по разделам, UI-компоненты по уровню абстракции (примитивы и композиции).
|
|||
|
|
|
|||
|
|
### Адаптация к монорепозиториям
|
|||
|
|
|
|||
|
|
SLM применяется внутри каждого приложения, а `packages/*` используются только для общего кода из слоёв `ui`, `infra` и `shared`. Бизнес-домены остаются внутри приложений, чтобы не размывать продуктовые границы.
|
|||
|
|
|
|||
|
|
## Происхождение
|
|||
|
|
|
|||
|
|
SLM Design вырос на основе:
|
|||
|
|
|
|||
|
|
- **Feature-Sliced Design** — слоистая структура, публичный API модуля, направление зависимостей
|
|||
|
|
- **Vertical Slice Architecture** — модуль как вертикальный срез, содержащий всё необходимое
|
|||
|
|
- **Screaming Architecture** — структура проекта «кричит» о назначении: открыл `business/auth` — видишь авторизацию
|
|||
|
|
- **Colocation Principle** — код живёт рядом с местом использования
|
|||
|
|
|
|||
|
|
## Пример структуры проекта
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
src/
|
|||
|
|
├── app/
|
|||
|
|
│
|
|||
|
|
├── layouts/
|
|||
|
|
│ ├── main/
|
|||
|
|
│ └── dashboard/
|
|||
|
|
│
|
|||
|
|
├── screens/
|
|||
|
|
│ ├── home/
|
|||
|
|
│ ├── products/
|
|||
|
|
│ ├── product-detail/
|
|||
|
|
│ └── about/
|
|||
|
|
│
|
|||
|
|
├── widgets/
|
|||
|
|
│ ├── page-heading/
|
|||
|
|
│ ├── hero-section/
|
|||
|
|
│ └── promo-banner/
|
|||
|
|
│
|
|||
|
|
├── business/
|
|||
|
|
│ ├── auth/
|
|||
|
|
│ ├── catalog/
|
|||
|
|
│ ├── orders/
|
|||
|
|
│ └── chat/
|
|||
|
|
│
|
|||
|
|
├── infra/
|
|||
|
|
│ ├── theme/
|
|||
|
|
│ ├── i18n/
|
|||
|
|
│ ├── backend-api/
|
|||
|
|
│ └── logger/
|
|||
|
|
│
|
|||
|
|
├── ui/
|
|||
|
|
│ ├── button/
|
|||
|
|
│ ├── input/
|
|||
|
|
│ ├── modal/
|
|||
|
|
│ ├── toast/
|
|||
|
|
│ └── dropdown/
|
|||
|
|
│
|
|||
|
|
└── shared/
|
|||
|
|
├── lib/
|
|||
|
|
├── types/
|
|||
|
|
└── styles/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Принципы
|
|||
|
|
|
|||
|
|
- **Домен — единое целое.** Всё, что относится к домену, живёт в одном модуле.
|
|||
|
|
- **Колокация.** Код рождается рядом с местом использования и поднимается только при необходимости.
|
|||
|
|
- **Зависимости однонаправлены.** Импорты только сверху вниз, только через публичный API.
|
|||
|
|
- **Архитектура — каркас, не клетка.** Правила фиксируют направление зависимостей и структуру модуля, остальное определяет команда.
|