TL;DR: Использование Single-Spa для создания микроинтерфейсов упрощает разделение большого приложения на небольшие независимые части, чтобы разные команды могли работать над частями, не затрагивая других. В этом блоге показано, как создавать микроинтерфейсы Angular и React, подключать их к корневой конфигурации и развертывать.

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

Знакомство с одноместным спа

Single-spa — это платформа на основе JavaScript, разработанная для архитектуры микроинтерфейса. Он позволяет создавать микроинтерфейсы с использованием таких фреймворков, как Angular, React и Vue, и обслуживать их как одно приложение. Он ведет реестр подключенных приложений и использует маршруты для перенаправления пользователей в разные приложения.

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

Создание одного спа-центра

Предварительные условия

Для реализации одного спа-центра важно, чтобы были установлены Node.js и npm. Чтобы их установить, перейдите на сайт Node.js и загрузите последнюю версию для вашей операционной системы. Запустите установщик, чтобы завершить установку.

Затем проверьте установку node.js и npm, выполнив следующие команды в командной строке.

npm - version
node - version

Шаг 1: Настройка проекта

В этом примере будут созданы два простых микроинтерфейса с использованием Angular и React. Корневая конфигурация будет обслуживать два микроинтерфейса.

Создать приложение

Мы можем создать простое микро-интерфейсное приложение Angular, выполнив следующую команду.

ng new angular-spa-frontend

После создания проекта выполните следующую команду, чтобы установить библиотеку Single-Spa.

ng add single-spa-angular

После правильной установки библиотеки в проекте Angular будет создан файл с именем main.single-spa.ts, содержащий все конфигурации, относящиеся к Single-Spa.

См. код конфигурации.

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

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Для работы в качестве одного спа-центра необходимо указать значение APP_BASE_HREF.

Кроме того, после добавления библиотеки Single-Spa package.json будет содержать два дополнительных скрипта.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

Файл angular.json будет изменен с использованием следующих конфигураций.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts” будет заменено на “main”: “src/main.single-spa.ts”. Новая конфигурация сборки будет добавлена ​​в виде модуля JavaScript.

После завершения и проверки конфигураций мы сможем обслуживать приложение Angular с помощью следующей команды.

npm run serve:single-spa:angular-spa-frontend

Теперь, когда мы успешно создали приложение микроинтерфейса, давайте посмотрим, как реализовать root-config.

Корневой конфиг

Выполните следующую команду, чтобы создать корневую конфигурацию.

npx create-single-spa

После ввода этой команды будет представлен ряд конфигураций для создания корневой конфигурации.

После выбора предыдущих конфигураций будет создана корневая конфигурация для обслуживания нескольких интерфейсов.

Чтобы подключить созданный микро-интерфейс к root-конфигурации, нам необходимо изменить файлы root-config.ts и index.ejs.

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

Как упоминалось в предыдущем блоке кода, созданный микро-интерфейс должен быть импортирован в файл root-config.ts.

name: "@org/angular-spa-frontend",

Следующие скрипты следует добавить в файл index.ejs.

Создан микро-интерфейс ( @org/angular-spa-frontend) вместе с URL-адресом ( http://localhost:4200/main.js), в котором микро Интерфейс размещен, его необходимо добавить в карту импорта.

Затем выполните следующую команду, чтобы запустить приложение.

npm run start

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

Шаг 2. Развертывание в рабочей среде

При развертывании этих микроинтерфейсов в рабочей среде рекомендуется развертывать каждое приложение микроинтерфейса как независимое, автономное приложение. Корневая конфигурация предположительно будет загружать каждое приложение динамически, в зависимости от маршрутов приложения, установленных в registerApplication.

Шаг 3. Добавление дополнительных микроинтерфейсов

Чтобы добавить больше микроинтерфейсов, повторите ранее упомянутые шаги. Давайте посмотрим, как интегрировать микроинтерфейс React в ту же корневую конфигурацию.

Создайте новый микроинтерфейс React, используя следующую команду.

npx create-single-spa --module-type react

Затем перейдите внутрь созданного проекта и установите single-spa-react.

npm install single-spa-react

Измените файл ввода, чтобы экспортировать методы жизненного цикла, чтобы сделать приложение совместимым с Single-Spa.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

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

После завершения настройки мы сможем обслуживать микроинтерфейс React, используя следующую команду.

npm start

Чтобы интегрировать созданный микроинтерфейс с существующей root-config , внесите следующие изменения в файлы в root-config.

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

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

Вам также необходимо обновить файл index.ejs, указав основной путь к пакету приложения React.

Ссылка на GitHub

Посмотрите полный пример кода этого приложения с одним спа-центром в этой демонстрации на GitHub.

Заключение

Использование Single-Spa для создания микроинтерфейсов упрощает разделение большого приложения на небольшие независимые части. Таким образом, разные команды могут работать над своими частями, не затрагивая других, и использовать предпочитаемые ими фреймворки, такие как Angular или React. Следуя инструкциям в этом руководстве, вы можете настроить проект с одним спа-центром, подключить несколько микроинтерфейсов и обеспечить удобство работы пользователей. Single-spa упрощает расширение вашего приложения и добавление новых функций по мере необходимости.

Похожие блоги

• Освойте асинхронный JavaScript с помощью RxJS
• API Axios и Fetch? Выбор правильного HTTP-клиента
• Типы утилит TypeScript: полное руководство
• Безопасное хранилище JWT: лучшие практики