Архитектура микрофронтендов

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

Принципы построения

  • Изоляция модулей – каждый микрофронтенд представляет собой автономный компонент приложения с собственным стеком технологий, зависимостями и жизненным циклом.
  • Независимые деплои – изменение одного микрофронтенда не требует пересборки всего приложения.
  • Общий каркас – часто используется shell-приложение, которое отвечает за маршрутизацию, глобальные состояния и интеграцию отдельных микрофронтендов.

Интеграция микрофронтендов

Существует несколько подходов:

  1. iframe – классический метод полной изоляции, но ограниченный в коммуникации между приложениями.
  2. Web Components – позволяет инкапсулировать HTML, CSS и JS в компонент, который можно вставлять в любое приложение.
  3. Module Federation – современный подход на основе Webpack 5, позволяющий загружать модули с удалённых серверов динамически.

Пример интеграции через Module Federation:

// webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    mfe1: 'mfe1@http://localhost:3001/remoteEntry.js',
  },
});

В Angular это реализуется через динамический импорт модулей:

loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:3001/remoteEntry.js',
  exposedModule: './AppModule'
}).then(m => m.AppModule)

Коммуникация между микрофронтендами

  • События – глобальный EventBus или кастомные события через DOM.
  • Общие сервисы – shared services, которые находятся в shell-приложении.
  • API-шлюзы – отдельный слой для взаимодействия с бекендом, что позволяет микрофронтендам быть полностью независимыми.

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

  • Улучшенная масштабируемость команды: разные микрофронтенды могут разрабатываться разными командами.
  • Независимость стеков технологий: каждая команда может использовать свой фреймворк или версию Angular.
  • Быстрый деплой и обновления: можно обновлять отдельные микрофронтенды без остановки всего приложения.

Ограничения и риски

  • Усложнение маршрутизации и состояния – требуется единый shell для управления навигацией.
  • Дублирование зависимостей – без оптимизации может увеличиваться размер бандла.
  • Сложности в тестировании интеграций – необходимо тщательно тестировать взаимодействие между микрофронтендами.

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

Оглавление