Как микрофронтенды взаимодействуют друг с другом в рамках одного приложения?

Способы взаимодействия микрофронтендов

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

Основные подходы

• Event Bus (шина событий): глобальный объект, через который микрофронтенды отправляют и получают события. Например, один микрофронтенд публикует событие 'userLoggedIn', а другой подписывается на него и обновляет UI.
• Общее состояние (Shared State): использование единого хранилища, такого как Redux или MobX, доступного всем микрофронтендам. Изменения в одном модуле автоматически отражаются в других.
• URL и маршрутизация: передача данных через query-параметры или хэш URL. Например, при переходе между микрофронтендами информация о текущем пользователе передается в адресной строке.
• Родительский контейнер (Shell): главное приложение выступает посредником, передавая пропсы или вызывая методы дочерних модулей.

Пример с Event Bus

// Микрофронтенд A публикует событие
window.eventBus.publish('cartUpdated', { items: 3 });

// Микрофронтенд B подписывается
window.eventBus.subscribe('cartUpdated', (data) => {
  console.log('Корзина обновлена:', data.items);
});

Вывод

Выбор способа зависит от сложности приложения: для простых сценариев подходит Event Bus, для сложных — общее состояние. Главное — сохранять слабую связанность, чтобы микрофронтенды оставались независимыми.