Какова была общая архитектура системы вашего проекта?

Проект построен на микрофронтендной архитектуре.

Основные принципы:

• Независимые приложения: Каждая функциональность (например, каталог товаров, корзина, профиль пользователя) реализована как отдельное, самостоятельное приложение.
• Коммуникация через Event Bus или API: Микрофронтенды обмениваются данными и событиями через шину событий или вызовы внутренних API.
• Композиция на стороне клиента: Главное приложение (Container App) собирает и отображает микрофронтенды в едином интерфейсе.
• Изоляция: Каждый микрофронтенд имеет свои зависимости, стейт и роутинг, что минимизирует влияние изменений в одном приложении на другие.

Технологии:

• Фреймворк: React с использованием библиотеки react-router-dom для роутинга.
• Управление состоянием: Redux Toolkit для глобального состояния и локальный стейт для каждого микрофронтенда.
• Стилизация: Использование CSS-модулей и styled-components.
• Сборка: Webpack с плагином Module Federation для интеграции микрофронтендов.
• Коммуникация: Собственная реализация Event Bus на основе браузерного API CustomEvent.

Пример структуры проекта:

// Файловая структура
my-project/
├── container-app/ // Главное приложение
│   ├── src/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── modules/ // Интеграция микрофронтендов
│   │       └── ProductCatalog.js
│   ├── package.json
│   └── webpack.config.js
├── product-catalog-app/ // Микрофронтенд "Каталог товаров"
│   ├── src/
│   │   ├── components/
│   │   │   └── ProductList.js
│   │   ├── pages/
│   │   │   └── CatalogPage.js
│   │   └── index.js
│   ├── package.json
│   └── webpack.config.js
├── cart-app/ // Микрофронтенд "Корзина"
│   ├── src/
│   │   ├── components/
│   │   │   └── CartItems.js
│   │   ├── pages/
│   │   │   └── CartPage.js
│   │   └── index.js
│   ├── package.json
│   └── webpack.config.js
└── ... другие микрофронтенды

Преимущества этого подхода:

• Независимая разработка: Различные команды могут работать над разными микрофронтендами параллельно.
• Масштабируемость: Легко добавлять новые функции как отдельные микрофронтенды.
• Технологическая гетерогенность: Теоретически, разные микрофронтенды могут использовать разные технологии (хотя в нашем случае мы придерживались React для единообразия).
• Постепенное внедрение: Новые версии микрофронтендов могут развертываться независимо.
• Улучшенная ремонтопригодность: Проблемы в одном микрофронтенде меньше влияют на остальные.

Недостатки:

• Сложность инфраструктуры: Требуется более сложная настройка сборки и развертывания.
• Коммуникация между приложениями: Организация эффективного взаимодействия может быть вызовом.

В целом, микрофронтендная архитектура позволила нам разработать большой и сложный проект с несколькими командами, сохраняя при этом гибкость и масштабируемость.