Как организовать взаимодействие между несколькими SPA-приложениями?

Question

Взаимодействие между несколькими SPA можно организовать через несколько подходов. Самый простой — использование iframe, где каждое приложение работает в изолированном контексте и общается через postMessage API. Более современный способ — архитектура микрофронтендов, где приложения загружаются как независимые модули и общаются через глобальную шину событий (Event Bus) или общее состояние. Также можно использовать Web Components для создания переиспользуемых виджетов, которые встраиваются в разные SPA. Выбор метода зависит от требований к изоляции, производительности и сложности интеграции.

YeaHub · Accepted Answer

Когда несколько SPA-приложений должны работать вместе, например, в портале или сложной панели управления, ключевая задача — обеспечить их коммуникацию и координацию без полного перезапуска страницы. Основные подходы различаются по степени связности и сложности реализации.Основные подходы к интеграцииIframe + postMessage: Классический метод, обеспечивающий полную изоляцию. Каждое SPA загружается в отдельный iframe. Для обмена данными используется API window.postMessage.Микрофронтенды (Micro Frontends): Архитектурный стиль, где каждое SPA — это независимое приложение, развёрнутое отдельно. Они могут загружаться динамически и общаться через общий глобальный объект или шину событий.Web Components: Позволяют инкапсулировать функциональность в переиспользуемые кастомные HTML-элементы, которые можно встраивать в любое SPA.Module Federation (Webpack 5): Позволяет одному приложению динамически загружать модули из другого во время выполнения, создавая ощущение единого приложения.Пример: Общение через Event BusСоздадим простую глобальную шину событий, которую будут использовать все SPA на странице. Это позволяет приложениям публиковать и подписываться на события, не зная друг о друге напрямую.// shared-event-bus.js
// Этот файл загружается на страницу до загрузки SPA
class EventBus {
  constructor() {
    this.listeners = {};
  }

on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }

emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data));
    }
  }
}

// Создаём глобальный экземпляр
window.globalEventBus = new EventBus();

// В SPA App 1 (например, панель уведомлений)
window.globalEventBus.emit('userLoggedIn', { userId: 123 });

// В SPA App 2 (например, чат)
window.globalEventBus.on('userLoggedIn', (data) => {
  console.log('Инициализируем чат для пользователя:', data.userId);
  // Инициализация чата...
});Пример: Интеграция через iframeЭтот подход хорош, когда нужно запустить полностью независимое стороннее приложение с максимальной изоляцией.// host-app.html (основное приложение)

const iframe = document.getElementById('widgetApp');

// Отправляем сообщение в iframe
  iframe.contentWindow.postMessage(
    { type: 'INIT', config: { theme: 'dark' } },
    'https://widget.example.com'
  );

// Слушаем сообщения от iframe
  window.addEventListener('message', (event) => {
    // Всегда проверяем origin!
    if (event.origin !== 'https://widget.example.com') return;
    if (event.data.type === 'WIDGET_READY') {
      console.log('Виджет загружен');
    }
  });
Вывод: Для быстрой интеграции с максимальной изоляцией используйте iframe. Для создания единого пользовательского опыта из независимо разрабатываемых частей выбирайте архитектуру микрофронтендов с общей шиной событий или Module Federation. Web Components подходят для создания переиспользуемых UI-компонентов, которые должны работать в разных фреймворках.

Как организовать взаимодействие между несколькими SPA-приложениями?

Короткий ответ

Длинный ответ

Основные подходы к интеграции

Пример: Общение через Event Bus

Пример: Интеграция через iframe

Как организовать взаимодействие между несколькими SPA-приложениями?

Короткий ответ

Длинный ответ

Основные подходы к интеграции

Пример: Общение через Event Bus

Пример: Интеграция через iframe