sync
This commit is contained in:
@@ -1,3 +1,10 @@
|
||||
---
|
||||
title: Архитектура
|
||||
scope: basics
|
||||
keywords: [SLM Design, слой, модуль, сегмент, архитектура, FSD, scoped layered module]
|
||||
when: "Организация кода: слои, модули, зависимости между модулями"
|
||||
---
|
||||
|
||||
<!-- /index -->
|
||||
# SLM Design
|
||||
Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили.
|
||||
|
||||
@@ -4,48 +4,93 @@
|
||||
|
||||
## Как работать
|
||||
|
||||
1. Найди задачу в таблицах ниже → открой триггер.
|
||||
2. Триггер укажет какие разделы прочитать и какие шаги выполнить.
|
||||
3. Перед каждой подзадачей возвращайся к этой таблице — проверяй, нет ли готового триггера.
|
||||
4. Если задачи нет в таблицах — ищи в `applied/` (по области) или `basics/` (общие правила).
|
||||
1. **Изучи обязательные правила** (таблица ниже) — они действуют при любой задаче.
|
||||
2. Найди задачу в таблицах триггеров → открой триггер.
|
||||
3. Триггер укажет какие прикладные разделы прочитать и какие шаги выполнить.
|
||||
4. Перед каждой подзадачей возвращайся к триггерам — проверяй, нет ли готового.
|
||||
5. Если триггера нет — ищи прикладной раздел по области задачи.
|
||||
|
||||
## Создание
|
||||
---
|
||||
|
||||
| Задача | Триггер | Когда / Когда НЕ |
|
||||
|--------|---------|-------------------|
|
||||
| Создать компонент | triggers/develop/create-component.md | Переиспользуемый UI без бизнес-логики. НЕ для: фичи, виджета, сущности |
|
||||
| Создать фичу | triggers/develop/create-feature.md | Самодостаточный блок с бизнес-логикой и UI. НЕ для: утилитарного UI (→ компонент) |
|
||||
| Создать виджет | triggers/develop/create-widget.md | Композиция фичей и сущностей. НЕ для: одиночного UI (→ компонент) |
|
||||
| Создать сущность | triggers/develop/create-entity.md | Бизнес-объект с UI и моделью данных. НЕ для: UI без модели (→ компонент) |
|
||||
| Создать хук | triggers/develop/create-hook.md | Кастомный React-хук. НЕ для: хука внутри стора |
|
||||
| Создать стор | triggers/develop/create-store.md | Глобальное или модульное состояние. НЕ для: локального useState |
|
||||
| Создать страницу | triggers/develop/create-page.md | Новый route в Next.js. Всегда экран + page.tsx |
|
||||
| Создать layout | triggers/develop/create-layout.md | layout.tsx для группы страниц |
|
||||
| Создать проект | triggers/develop/create-project.md | Новый проект из шаблона |
|
||||
| Сгенерировать модуль | triggers/develop/generate-module.md | Любой модуль из `.templates/`. Ручное создание файлов запрещено |
|
||||
## Обязательные правила
|
||||
|
||||
## Стилизация и ресурсы
|
||||
Прочитай эти разделы **до начала работы**. Соблюдай при написании любого кода.
|
||||
|
||||
| Задача | Триггер | Когда / Когда НЕ |
|
||||
|--------|---------|-------------------|
|
||||
| Стилизовать компонент | triggers/develop/style-component.md | Выбор подхода + написание CSS. НЕ для: Mantine-пропсов (они не требуют CSS) |
|
||||
| Раздел | Файл | Что внутри |
|
||||
|--------|------|------------|
|
||||
| Структура проекта | applied/project-structure.md | Организация папок и файлов |
|
||||
| Архитектура | basics/architecture.md | SLM Design: слои, модули, сегменты |
|
||||
| Стиль кода | basics/code-style.md | Форматирование, импорты, отступы |
|
||||
| Именование | basics/naming.md | Имена файлов, переменных, событий |
|
||||
| Типизация | basics/typing.md | type vs interface, generic, any/unknown |
|
||||
| Документирование | basics/documentation.md | JSDoc для функций, компонентов, типов |
|
||||
| Технологии | basics/tech-stack.md | Допустимые библиотеки и зависимости |
|
||||
|
||||
---
|
||||
|
||||
## Прикладные разделы
|
||||
|
||||
Справочник по областям. Читай тот раздел, который относится к текущей задаче.
|
||||
|
||||
| Область | Файл | Когда читать |
|
||||
|---------|------|--------------|
|
||||
| Компоненты | applied/components.md | Создание или редактирование React-компонентов |
|
||||
| Стили | applied/styles.md | CSS Modules, PostCSS, переменные, медиа-запросы |
|
||||
| Файлы роутинга | applied/page-level.md | page.tsx, layout.tsx, error.tsx, not-found.tsx |
|
||||
| Шаблоны и генерация | applied/templates-generation.md | Генерация кода из шаблонов |
|
||||
| Настройка VS Code | applied/vscode.md | Расширения, settings.json, сниппеты |
|
||||
| SVG-спрайты | applied/svg-sprites.md | Работа с SVG-иконками и спрайтами |
|
||||
| Хуки | applied/hooks.md | Создание и использование кастомных хуков *(в разработке)* |
|
||||
| Сторы | applied/stores.md | Глобальное состояние, Zustand *(в разработке)* |
|
||||
| API | applied/api.md | Запросы, клиенты, обработка ответов *(в разработке)* |
|
||||
| Локализация | applied/localization.md | i18next, переводы *(в разработке)* |
|
||||
| Изображения | applied/images-sprites.md | Подключение и оптимизация изображений *(в разработке)* |
|
||||
| Шрифты | applied/fonts.md | Подключение и настройка шрифтов *(в разработке)* |
|
||||
| Видео | applied/video.md | Встраивание видео *(в разработке)* |
|
||||
|
||||
---
|
||||
|
||||
## Триггеры
|
||||
|
||||
Пошаговые инструкции. Найди задачу → открой триггер → выполняй по шагам.
|
||||
|
||||
### Создание
|
||||
|
||||
| Задача | Триггер | Описание |
|
||||
|--------|---------|----------|
|
||||
| Создать компонент | triggers/develop/create-component.md | Переиспользуемый UI-элемент без бизнес-логики |
|
||||
| Создать фичу | triggers/develop/create-feature.md | Самодостаточный блок с бизнес-логикой и UI |
|
||||
| Создать виджет | triggers/develop/create-widget.md | Композиция нескольких фичей и сущностей |
|
||||
| Создать сущность | triggers/develop/create-entity.md | Бизнес-объект с моделью данных и UI-представлением |
|
||||
| Создать хук | triggers/develop/create-hook.md | Кастомный React-хук с переиспользуемой логикой |
|
||||
| Создать стор | triggers/develop/create-store.md | Глобальное или модульное состояние через Zustand |
|
||||
| Создать страницу | triggers/develop/create-page.md | Новый route в Next.js — экран + page.tsx |
|
||||
| Создать layout | triggers/develop/create-layout.md | Общая обёртка layout.tsx для группы страниц |
|
||||
| Создать проект | triggers/develop/create-project.md | Инициализация нового проекта из шаблона |
|
||||
| Сгенерировать модуль | triggers/develop/generate-module.md | Создание модуля из шаблонов `.templates/` |
|
||||
|
||||
### Стилизация и ресурсы
|
||||
|
||||
| Задача | Триггер | Описание |
|
||||
|--------|---------|----------|
|
||||
| Стилизовать компонент | triggers/develop/style-component.md | Выбор подхода и написание CSS для компонента |
|
||||
| Добавить иконку | triggers/develop/add-icon.md | SVG-иконка через спрайт-систему |
|
||||
| Добавить изображение | triggers/develop/add-image.md | Растровое изображение (png, jpg, webp) |
|
||||
| Добавить видео | triggers/develop/add-video.md | Встраивание видео |
|
||||
| Подключить шрифт | triggers/develop/add-font.md | Новый шрифт в проект |
|
||||
| Добавить видео | triggers/develop/add-video.md | Встраивание видео на страницу |
|
||||
| Подключить шрифт | triggers/develop/add-font.md | Подключение нового шрифта в проект |
|
||||
|
||||
## Данные и состояние
|
||||
### Данные и состояние
|
||||
|
||||
| Задача | Триггер | Когда / Когда НЕ |
|
||||
|--------|---------|-------------------|
|
||||
| Добавить API-запрос | triggers/develop/add-api-request.md | Клиентский запрос (SWR). НЕ для: серверных данных (→ add-server-data) |
|
||||
| Подключить стор | triggers/develop/connect-store.md | Подключение стора к компоненту. НЕ для: создания стора (→ create-store) |
|
||||
| Серверные данные (RSC) | triggers/develop/add-server-data.md | Данные в серверных компонентах. НЕ для: клиентских запросов (→ add-api-request) |
|
||||
| Задача | Триггер | Описание |
|
||||
|--------|---------|----------|
|
||||
| Добавить API-запрос | triggers/develop/add-api-request.md | Клиентский запрос данных через SWR |
|
||||
| Подключить стор | triggers/develop/connect-store.md | Подключение существующего стора к компоненту |
|
||||
| Серверные данные (RSC) | triggers/develop/add-server-data.md | Получение данных в серверных компонентах |
|
||||
|
||||
## Инфраструктура
|
||||
### Инфраструктура
|
||||
|
||||
| Задача | Триггер | Когда / Когда НЕ |
|
||||
|--------|---------|-------------------|
|
||||
| Задача | Триггер | Описание |
|
||||
|--------|---------|----------|
|
||||
| Добавить перевод | triggers/develop/add-localization.md | Ключи перевода и подключение i18next |
|
||||
| Добавить зависимость | triggers/develop/add-dependency.md | Новая npm-библиотека. Проверь допустимость |
|
||||
| Настроить VS Code | triggers/develop/setup-vscode.md | Расширения, настройки, сниппеты |
|
||||
| Добавить зависимость | triggers/develop/add-dependency.md | Подключение новой npm-библиотеки |
|
||||
| Настроить VS Code | triggers/develop/setup-vscode.md | Расширения, настройки редактора, сниппеты |
|
||||
|
||||
Reference in New Issue
Block a user