Single Page Application (SPA) — это веб-приложение, работающее в одном HTML-документе, где весь контент обновляется динамически. При создании SPA важно учитывать архитектурные принципы, чтобы проект оставался масштабируемым, тестируемым и удобным для поддержки.
1. Организация проекта
Основные принципы организации проекта
1. **Модульность**: Разделение кода на независимые модули. 2. **Переиспользуемость**: Код должен быть легко переносимым и переиспользуемым. 3. **Ясная структура**: Папки и файлы организованы таким образом, чтобы их было легко найти.2. Файловая структура
Общая структура проекта
Пример структуры проекта для React с использованием TypeScript: ```plaintext src/ ├── app/ # Корневые настройки приложения │ ├── index.tsx # Точка входа │ ├── App.tsx # Корневой компонент │ └── providers/ # Провайдеры (роутинг, состояние, тема) ├── entities/ # Основные бизнес-сущности │ └── User/ # Пример сущности "User" ├── features/ # Функциональные блоки (use-cases) │ └── Auth/ # Пример feature "Auth" ├── shared/ # Переиспользуемые компоненты и утилиты │ ├── components/ # Компоненты │ ├── utils/ # Утилиты │ └── styles/ # Глобальные стили ├── pages/ # Страницы приложения │ └── Home/ # Пример страницы "Home" └── widgets/ # Независимые блоки интерфейса (навигация, хедеры) ```Пример структуры feature-slices
```plaintext features/ └── Auth/ ├── components/ │ ├── LoginForm.tsx │ └── RegisterForm.tsx ├── model/ │ ├── actions.ts │ ├── reducers.ts │ └── selectors.ts └── services/ ├── api.ts └── validation.ts ```Преимущества
- Удобная навигация по проекту. - Разделение логики и интерфейса. - Лёгкость добавления новых функциональных блоков.3. Feature-slices
Что такое Feature-slices?
**Feature-slices** — это подход, при котором функциональные блоки приложения разрабатываются как независимые модули. Каждый slice содержит компоненты, состояние, бизнес-логику и стили, относящиеся к одной функциональности.Принципы Feature-slices
1. **Инкапсуляция**: Каждый slice имеет ограниченные зависимости от других. 2. **Сегментация**: Код разделён по функциональности, а не по техническим аспектам. 3. **Тестируемость**: Feature легко тестировать в изоляции.Пример структуры Feature-slices
```plaintext features/ └── Profile/ ├── components/ │ └── ProfileCard.tsx ├── model/ │ ├── types.ts │ ├── actions.ts │ ├── reducers.ts │ └── selectors.ts └── services/ ├── api.ts └── formatters.ts ```4. Domain-Driven Design (DDD)
Что такое DDD?
**Domain-Driven Design** — это подход к проектированию, при котором структура кода основывается на предметной области (домене) и её бизнес-правилах.Основные концепции DDD
1. **Entities (Сущности)**: - Бизнес-объекты с уникальными идентификаторами. - Например, "Пользователь" или "Продукт".-
Value Objects (Объекты-значения):
- Описывают характеристики сущностей.
- Например, "Цена" или "Адрес".
-
Aggregates (Агрегаты):
- Группы связанных сущностей, которые управляются как единое целое.
- Например, "Корзина покупок".
-
Services (Сервисы):
- Реализуют бизнес-логику, которая не относится напрямую к сущностям.
Пример структуры с использованием DDD
```plaintext src/ ├── domains/ │ ├── User/ │ │ ├── entities/ │ │ │ ├── User.ts │ │ │ └── Address.ts │ │ ├── services/ │ │ │ └── UserService.ts │ │ └── value-objects/ │ │ └── UserName.ts │ ├── Product/ │ │ ├── entities/ │ │ │ └── Product.ts │ │ └── services/ │ │ └── ProductService.ts ```Преимущества DDD
- Чёткое отражение бизнес-логики. - Лёгкость масштабирования. - Упрощение поддержки кода.Итоговые вопросы для подготовки
- Как организовать проект с использованием Feature-slices?
- Какие основные принципы лежат в основе DDD?
- Как файловая структура влияет на масштабируемость приложения?
- Какие преимущества даёт подход Feature-slices?
- Чем DDD отличается от других подходов к проектированию?
Совет: Попробуйте спроектировать небольшое SPA-приложение, используя Feature-slices и принципы DDD, чтобы закрепить материал.