Single-SPA фреймворк

Single-SPA — это фреймворк для построения микрофронтендов, позволяющий объединять несколько независимых приложений на одной странице.

Основные концепции

  • Микро-приложение — отдельный фронтенд, который можно загружать и монтировать динамически.
  • Оркестратор — ядро Single-SPA, контролирующее жизненный цикл микро-приложений.
  • Жизненный цикл микро-приложений включает bootstrap, mount, unmount и опционально update.

Установка и настройка

Для интеграции Single-SPA используется пакет single-spa:

npm install single-spa

Создание корневого приложения:

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'angular-app',
  app: () => import('./angular-app/main.js'),
  activeWhen: ['/angular']
});

start();

В примере angular-app загружается только при переходе на путь /angular.

Интеграция с Angular

Single-SPA предоставляет специальный пакет single-spa-angular для Angular-приложений. Он позволяет:

  • Обернуть Angular-модуль в Single-SPA микрофронтенд.
  • Автоматически управлять жизненным циклом приложения.
  • Совместно использовать роутинг и состояния с другими фреймворками.

Пример обёртки Angular-приложения:

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: () => platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule),
  template: '<app-root />',
  NgZone: NgZone,
});

export const { bootstrap, mount, unmount } = lifecycles;

Преимущества Single-SPA

  • Изоляция технологий: разные микро-приложения могут быть на Angular, React, Vue и Vanilla JS.
  • Пошаговая миграция: возможность постепенно переносить старый монолитный фронтенд в микрофронтенды.
  • Гибкая маршрутизация: каждый микрофронтенд может управлять своим роутингом без конфликтов.

Особенности работы

  • Single-SPA использует события браузера и DOM для управления монтажом/размонтажом приложений.
  • Роутинг может быть централизованным или распределённым между микрофронтендами.
  • Возможна совместная работа с глобальными состояниями через Redux, RxJS или другие библиотеки.

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

Оглавление