S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
160 lines
6.1 KiB
Markdown
160 lines
6.1 KiB
Markdown
---
|
||
title: Сегменты SLM
|
||
description: Что такое сегмент модуля в SLM-архитектуре и какие они бывают.
|
||
---
|
||
|
||
# Сегменты SLM
|
||
|
||
Что такое сегмент модуля в SLM-архитектуре и какие они бывают.
|
||
|
||
## Определение
|
||
|
||
**Сегмент — папка внутри модуля, которая группирует файлы по назначению. Набор сегментов не фиксирован — модуль включает только те, которые ему нужны. Команда сама определяет какие сегменты используются в проекте — архитектура даёт рекомендацию.**
|
||
|
||
## Обзор
|
||
|
||
| Сегмент | Содержимое |
|
||
|---------|------------|
|
||
| `ui/` | Вспомогательные компоненты модуля — только `.tsx` файлы |
|
||
| `parts/` | Вложенные модули со своими сегментами |
|
||
| `hooks/` | React-хуки |
|
||
| `stores/` | Сторы состояния |
|
||
| `services/` | Работа с внешними источниками данных |
|
||
| `mappers/` | Трансформация данных между форматами |
|
||
| `types/` | TypeScript-типы и интерфейсы |
|
||
| `styles/` | Стили |
|
||
| `lib/` | Утилиты и хелперы модуля |
|
||
| `config/` | Константы и конфигурация |
|
||
|
||
## Сегмент ui/
|
||
|
||
Вспомогательные компоненты модуля. Содержит только `.tsx` файлы — без своих сегментов, стилей, типов, хуков и публичного API. Использует сегменты родительского модуля.
|
||
|
||
Корневой компонент модуля в `ui/` не размещается. Он лежит в корне модуля: `{module-name}.tsx`.
|
||
|
||
```text
|
||
user/
|
||
├── ui/
|
||
│ ├── user-avatar.tsx
|
||
│ └── user-status.tsx
|
||
├── types/
|
||
├── hooks/
|
||
├── user.tsx
|
||
└── index.ts
|
||
```
|
||
|
||
Если компоненту нужны собственные сегменты — это уже не `ui/`, а `parts/`.
|
||
|
||
## Сегмент parts/
|
||
|
||
Вложенные модули со своими сегментами. `parts/` содержит только модули: каждый элемент `parts/` — папка полноценного модуля с собственным публичным API. Отдельные `.tsx`, стили, хуки или произвольные файлы в `parts/` не размещаются.
|
||
|
||
```text
|
||
home/
|
||
├── parts/
|
||
│ ├── hero-section/
|
||
│ │ ├── hero-section.tsx
|
||
│ │ ├── styles/
|
||
│ │ ├── parts/
|
||
│ │ │ └── top-banner/
|
||
│ │ │ ├── top-banner.tsx
|
||
│ │ │ └── index.ts
|
||
│ │ └── index.ts
|
||
│ └── features-section/
|
||
│ ├── features-section.tsx
|
||
│ ├── hooks/
|
||
│ └── index.ts
|
||
├── home.screen.tsx
|
||
└── index.ts
|
||
```
|
||
|
||
Отличие от `ui/`: элемент `parts/` — модульная папка со своими сегментами. Элемент `ui/` — вспомогательный компонент, один `.tsx` файл.
|
||
|
||
Вложенность `parts/` инкапсулирует область разработки горизонтально: каждый разработчик работает в своём `parts/`-модуле, не затрагивая чужие. Это снижает конфликты при параллельной разработке.
|
||
|
||
Если вложенный модуль обрастает своими `parts/` — это сигнал, что он достаточно самостоятельный для подъёма на уровень выше.
|
||
|
||
## Сегмент hooks/
|
||
|
||
React-хуки модуля. Инкапсулируют логику, состояние, подписки, побочные эффекты.
|
||
|
||
```text
|
||
hooks/
|
||
├── use-auth.hook.ts
|
||
├── use-session.hook.ts
|
||
└── use-permissions.hook.ts
|
||
```
|
||
|
||
## Сегмент stores/
|
||
|
||
Сторы состояния модуля. Конкретная реализация зависит от выбранного стейт-менеджера (Zustand, MobX, Redux и т.д.).
|
||
|
||
```text
|
||
stores/
|
||
├── auth.store.ts
|
||
└── session.store.ts
|
||
```
|
||
|
||
## Сегмент services/
|
||
|
||
Работа с внешними источниками данных: API-вызовы, запросы, подписки.
|
||
|
||
```text
|
||
services/
|
||
├── auth.service.ts
|
||
└── token.service.ts
|
||
```
|
||
|
||
## Сегмент mappers/
|
||
|
||
Функции трансформации данных из одного формата в другой: DTO в доменный тип, доменный тип в DTO, доменный тип в ViewModel.
|
||
|
||
```text
|
||
mappers/
|
||
├── map-user.ts
|
||
├── map-product.ts
|
||
└── map-order-to-dto.ts
|
||
```
|
||
|
||
## Сегмент types/
|
||
|
||
TypeScript-типы и интерфейсы модуля. Доменные типы, DTO, пропсы компонентов.
|
||
|
||
```text
|
||
types/
|
||
├── user.type.ts
|
||
└── session.type.ts
|
||
```
|
||
|
||
## Сегмент styles/
|
||
|
||
Стили модуля. Формат зависит от выбранного подхода (CSS Modules, SCSS, CSS-in-JS и т.д.).
|
||
|
||
```text
|
||
styles/
|
||
├── auth.module.css
|
||
└── login-form.module.css
|
||
```
|
||
|
||
## Сегмент lib/
|
||
|
||
Утилиты и хелперы, специфичные для модуля. Чистые функции без побочных эффектов.
|
||
|
||
```text
|
||
lib/
|
||
├── validate-email.ts
|
||
└── format-phone.ts
|
||
```
|
||
|
||
Отличие от `shared/lib/`: здесь лежат утилиты, нужные только этому модулю. Общие утилиты — в `shared/lib/`.
|
||
|
||
## Сегмент config/
|
||
|
||
Константы и конфигурация модуля: маршруты, лимиты, дефолтные значения.
|
||
|
||
```text
|
||
config/
|
||
├── routes.ts
|
||
└── constants.ts
|
||
```
|