SLM Design

Русский

English

Русский

English

Appearance

🤖 Единый файл для AI-ассистентов: https://gromlab.ru/gromov/slm-design/raw/tag/v0.1.5/generated/ru/ARCHITECTURE.md


SLM Design ​

Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили.

Преимущества ​

Вертикальная организация домена ​

Бизнес-домен не разбивается по техническим слоям — сценарии, сущности, типы и UI живут в одном модуле. Это сокращает время навигации и упрощает сопровождение: все изменения домена локализованы.

Dependency Injection без фреймворков ​

Cross-domain зависимости в бизнес-слое реализуются через фабрики — модуль декларирует что ему нужно, а точка использования предоставляет зависимости. Домены изолированы без DI-контейнеров, провайдеров и шин событий.

Разделение ответственности без перегрузки слоёв ​

Сервисы приложения (infrastructure/), UI-кит (ui/) и общие ресурсы (shared/) — три разных слоя с разной природой. Ни один слой не превращается в свалку разнородного кода.

Горизонтальная инкапсуляция ​

Вложенные модули (parts/) и направление зависимостей позволяют нескольким разработчикам работать над одной областью приложения параллельно, не затрагивая код друг друга.

Колокация по умолчанию ​

Код начинает жизнь рядом с местом использования и поднимается в общие слои только при реальной потребности. Глобальные слои не засоряются преждевременными абстракциями.

Явное разделение каркаса и контента ​

Каркас группы маршрутов (layouts/) и контент конкретной страницы (screens/) — независимые слои с собственной ответственностью.

Масштабирование через группировку ​

При росте проекта слои не теряют структуру — модули группируются по естественным признакам: бизнес-домены по субдоменам, страницы по разделам, UI-компоненты по уровню абстракции (примитивы и композиции).

Происхождение ​

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/
│
├── infrastructure/
│   ├── theme/
│   ├── i18n/
│   ├── backend-api/
│   └── logger/
│
├── ui/
│   ├── button/
│   ├── input/
│   ├── modal/
│   ├── toast/
│   └── dropdown/
│
└── shared/
    ├── lib/
    ├── types/
    └── styles/

Принципы ​

  • Домен — единое целое. Всё, что относится к домену, живёт в одном модуле.
  • Колокация. Код рождается рядом с местом использования и поднимается только при необходимости.
  • Зависимости однонаправлены. Импорты только сверху вниз, только через публичный API.
  • Архитектура — каркас, не клетка. Правила фиксируют направление зависимостей и структуру модуля, остальное определяет команда.