S.Gromov
464c709859
- удалены обороты «Раздел описывает», «Этот раздел описывает» из 10 файлов docs/ru - вводные абзацы переписаны в формате «тема: категории/области» без перечисления конкретного содержимого раздела - удалён frontmatter description из basics/architecture/index.md (подтягивается первый абзац после h1 — про SLM Design) - в CONTRIBUTING.md добавлен раздел «Вводный абзац» с правилами и блоками «Хорошо/Плохо»: что делать, чего избегать, проверка на излишнюю конкретику
5.5 KiB
title
| title |
|---|
| Сегменты |
Сегменты
Сегменты SLM: типы, назначение, что лежит внутри каждого.
Определение
Сегмент — папка внутри модуля, которая группирует файлы по назначению. Набор сегментов не фиксирован — модуль включает только те, которые ему нужны. Команда сама определяет какие сегменты используются в проекте — архитектура даёт рекомендацию.
Обзор
| Сегмент | Содержимое |
|---|---|
ui/ |
Компоненты модуля — только .tsx файлы |
parts/ |
Вложенные модули со своими сегментами |
hooks/ |
React-хуки |
stores/ |
Сторы состояния |
services/ |
Работа с внешними источниками данных |
mappers/ |
Трансформация данных между форматами |
types/ |
TypeScript-типы и интерфейсы |
styles/ |
Стили |
lib/ |
Утилиты и хелперы модуля |
config/ |
Константы и конфигурация |
Сегмент ui/
Компоненты, принадлежащие модулю. Содержит только .tsx файлы — без своих сегментов, стилей, типов, хуков. Использует сегменты родительского модуля.
auth/
├── ui/
│ ├── auth-provider.tsx
│ ├── auth-guard.tsx
│ └── logout-button.tsx
├── types/
├── hooks/
└── index.ts
Если компоненту нужны собственные сегменты — это уже не ui/, а parts/.
Сегмент parts/
Вложенные модули со своими сегментами. Каждый элемент parts/ — полноценный модуль: папка с компонентом, хуками, стилями, типами и т.д.
home/
├── parts/
│ ├── hero-section/
│ │ ├── hero-section.tsx
│ │ ├── styles/
│ │ └── parts/
│ │ └── top-banner/
│ │ └── top-banner.tsx
│ └── features-section/
│ ├── features-section.tsx
│ └── hooks/
├── home.screen.tsx
└── index.ts
Отличие от ui/: элемент parts/ — модуль со своими сегментами. Элемент ui/ — компонент, один .tsx файл.
Вложенность parts/ инкапсулирует область разработки горизонтально: каждый разработчик работает в своём parts/-модуле, не затрагивая чужие. Это снижает конфликты при параллельной разработке.
Если вложенный модуль обрастает своими parts/ — это сигнал, что он достаточно самостоятельный для подъёма на уровень выше.
Сегмент hooks/
React-хуки модуля. Инкапсулируют логику, состояние, подписки, побочные эффекты.
hooks/
├── use-auth.hook.ts
├── use-session.hook.ts
└── use-permissions.hook.ts
Сегмент stores/
Сторы состояния модуля. Конкретная реализация зависит от выбранного стейт-менеджера (Zustand, MobX, Redux и т.д.).
stores/
├── auth.store.ts
└── session.store.ts
Сегмент services/
Работа с внешними источниками данных: API-вызовы, запросы, подписки.
services/
├── auth.service.ts
└── token.service.ts
Сегмент mappers/
Функции трансформации данных из одного формата в другой: DTO в доменный тип, доменный тип в DTO, доменный тип в ViewModel.
mappers/
├── map-user.ts
├── map-product.ts
└── map-order-to-dto.ts
Сегмент types/
TypeScript-типы и интерфейсы модуля. Доменные типы, DTO, пропсы компонентов.
types/
├── user.type.ts
└── session.type.ts
Сегмент styles/
Стили модуля. Формат зависит от выбранного подхода (CSS Modules, SCSS, CSS-in-JS и т.д.).
styles/
├── auth.module.css
└── login-form.module.css
Сегмент lib/
Утилиты и хелперы, специфичные для модуля. Чистые функции без побочных эффектов.
lib/
├── validate-email.ts
└── format-phone.ts
Отличие от shared/lib/: здесь лежат утилиты, нужные только этому модулю. Общие утилиты — в shared/lib/.
Сегмент config/
Константы и конфигурация модуля: маршруты, лимиты, дефолтные значения.
config/
├── routes.ts
└── constants.ts