🗺️ SPA и архитектура

SPA-приложения + архитектурные принципы + паттерны.

С чего начать

1. SPA -- что такое и чем отличается от MPA
2. Что такое SPA
3. Компонентный подход
4. Архитектура фронтенд-приложения
5. Single Responsibility Principle

SPA-концепты

Компоненты

• Компонент -- что это такое
• Компонентный подход
• Декларативный vs Императивный UI
• Жизненный цикл компонента
• Props -- передача данных
• Props Drilling -- проблема
• Контролируемые и неконтролируемые компоненты
• Условный рендеринг
• Списки и ключи (keys)
• Error Boundaries
• Дизайн-системы -- компонентные библиотеки

Состояние (State management)

• State -- внутреннее состояние
• Локальное vs глобальное состояние
• Context API -- обзор
• State Machines -- XState
• Работа с API в SPA
• Загрузка данных и loading states
• Кеширование данных на клиенте

Роутинг

• Роутинг в SPA
• Клиентский роутинг -- как работает
• History API и hash-routing
• Динамические маршруты
• Вложенные маршруты
• Route Guards -- защита маршрутов
• Lazy Loading маршрутов

Рендеринг (CSR/SSR/SSG/ISR)

• SPA -- что такое и чем отличается от MPA
• Что такое SPA
• SSR -- Server Side Rendering
• SSG -- Static Site Generation
• ISR -- Incremental Static Regeneration
• React Server Components
• Suspense и Concurrent Features
• Virtual DOM
• Next.js -- обзор
• Micro-Frontends

Стили (CSS-in-JS, Modules)

• CSS Modules в SPA
• CSS-in-JS -- Styled Components, Emotion

Сборщики

• Webpack
• Webpack loaders
• Webpack plugins
• Vite
• esbuild и Turbopack
• Babel -- транспиляция
• HMR -- Hot Module Replacement
• Code Splitting -- разделение кода
• Bundle vs Unbundle -- разница

Инструменты фронта

• React DevTools
• Storybook -- разработка компонентов
• Модули -- ES Modules в браузере

SOLID

• Single Responsibility Principle
• Open-Closed Principle
• Liskov Substitution Principle
• Interface Segregation Principle
• Dependency Inversion Principle
• SOLID — позиция Тимура -- альтернативный взгляд
• Закон Конвея

GRASP

• Information Expert
• Coupling и Cohesion
• Polymorphism Indirection Protected

DDD

• DDD — обзор
• Анемичная модель и DTO
• Transaction Script
• Бизнес-логика где живёт
• Почему ORM это зло

DI / IoC

• Inversion of Control
• Dependency Injection для тестируемости
• Песочницы и safeRequire
• Фреймворк как загрузчик

Архитектурные паттерны

Слои

• Архитектура фронтенд-приложения
• Component architecture
• Container и Presentational
• Feature-Sliced Design
• Atomic Design
• Dependency Injection для тестируемости

MV-семейство (MVC, MVP, MVVM)

• MVC
• MVC на Node.js
• MVP -- Model View Presenter
• MVVM -- Model View ViewModel

State-flow (Flux, Redux)

• Flux Pattern
• Flux и Redux pattern
• Redux -- концепции и архитектура

Metarhia

• _MOC Metarhia -- полный индекс (33 файла)

Связанные

• _MOC JavaScript · _MOC Node.js · _MOC Сеть