Проект построен на микрофронтендной архитектуре.
Основные принципы:
- Независимые приложения: Каждая функциональность (например, каталог товаров, корзина, профиль пользователя) реализована как отдельное, самостоятельное приложение.
- Коммуникация через Event Bus или API: Микрофронтенды обмениваются данными и событиями через шину событий или вызовы внутренних API.
- Композиция на стороне клиента: Главное приложение (Container App) собирает и отображает микрофронтенды в едином интерфейсе.
- Изоляция: Каждый микрофронтенд имеет свои зависимости, стейт и роутинг, что минимизирует влияние изменений в одном приложении на другие.
Технологии:
- Фреймворк: React с использованием библиотеки
react-router-dom для роутинга.
- Управление состоянием: Redux Toolkit для глобального состояния и локальный стейт для каждого микрофронтенда.
- Стилизация: Использование CSS-модулей и styled-components.
- Сборка: Webpack с плагином
Module Federation для интеграции микрофронтендов.
- Коммуникация: Собственная реализация Event Bus на основе браузерного API
CustomEvent.
Пример структуры проекта:
plaintext