Module Federation Demo

Демонстрационный проект, показывающий различные способы передачи данных между host и remote приложениями в архитектуре Module Federation.

🏗️ Архитектура

Проект состоит из одного host приложения и трех remote приложений:

• host (порт 8080) - главное приложение
• remote-props (порт 8081) - передача данных через пропсы
• remote-events (порт 8082) - передача данных через события
• remote-mobx (порт 8083) - передача данных через MobX store

🚀 Быстрый старт

Установка зависимостей

npm install

Запуск всех приложений

npm start

Все приложения запустятся одновременно с цветной индикацией в консоли.

🔄 Способы передачи данных

1. Пропсы (Props)

• Применение: remote-props
• Описание: Классический способ передачи данных через React пропсы
• Преимущества: Простота, типобезопасность
• Недостатки: Только однонаправленная передача

2. События (Events)

• Применение: remote-events
• Описание: Использование CustomEvent для передачи данных
• Преимущества: Двунаправленная связь, слабая связанность
• Недостатки: Нет типобезопасности, сложнее отладка

3. MobX Store

• Применение: remote-mobx
• Описание: Глобальное состояние через MobX
• Преимущества: Реактивность, централизованное управление состоянием
• Недостатки: Дополнительная зависимость, сложность при масштабировании

🛠️ Технологии

• React 18 - UI библиотека
• Webpack 5 - сборщик модулей
• Module Federation - архитектура микрофронтендов
• MobX - управление состоянием
• Babel - транспиляция JavaScript

📁 Структура проекта

module-federation/
├── host/                 # Главное приложение
├── remote-props/         # Remote с передачей через пропсы
├── remote-events/        # Remote с передачей через события
├── remote-mobx/          # Remote с передачей через MobX
└── package.json          # Корневой package.json

🌐 Порты приложений

• Host: http://localhost:8080
• Remote Props: http://localhost:8081
• Remote Events: http://localhost:8082
• Remote MobX: http://localhost:8083

📝 Примечания

• Все приложения используют Module Federation для динамической загрузки компонентов
• Host приложение содержит кнопки для демонстрации каждого способа передачи данных
• Каждый remote компонент отображает полученные данные в реальном времени