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