Construire des micro-frontends avec un seul spa : un guide

TL;DR : L'utilisation d'un spa unique pour créer des micro-interfaces facilite la division d'une grande application en petits éléments indépendants afin que différentes équipes puissent travailler sur des parties sans affecter les autres. Ce blog montre comment créer des micro-interfaces Angular et React, les connecter à une configuration racine et les déployer.

Les micro-frontends sont devenus un style architectural populaire pour faire évoluer les applications frontend, en particulier lorsque plusieurs équipes travaillent sur différentes parties d'une interface utilisateur. En décomposant les interfaces monolithiques en modules plus petits et indépendants, les équipes peuvent déployer, mettre à jour et faire évoluer des parties d'une application séparément. Cet article expliquera comment créer et connecter des micro-interfaces de différents frameworks à l'aide d'un seul spa.

Introduction au mono-spa

Single-spa est un framework basé sur JavaScript conçu pour l'architecture micro-frontend. Il vous permet de créer des micro-interfaces à l'aide de frameworks tels que Angular, React et Vue et de les servir comme une seule application. Il tient un registre des applications connectées et utilise des itinéraires pour rediriger les utilisateurs vers différentes applications.

L'utilisation d'un framework SPA unique présente de nombreux avantages, tels que le choix de différentes langues pour différentes parties de l'application, le développement et le déploiement indépendants de micro-interfaces et l'évolutivité. Alors commençons par créer un spa unique.

Création d'un spa unique

Conditions préalables

Pour implémenter un single-spa, il est important d'avoir Node.js et npm installés. Pour les installer, accédez au site Web Node.js et téléchargez la dernière version de votre système d'exploitation. Exécutez le programme d'installation pour terminer l'installation.

Ensuite, vérifiez l'installation de node.js et npm en exécutant les commandes suivantes dans l'invite de commande.

npm - version
node - version

Étape 1 : Mise en place du projet

Dans cet exemple, deux micro-interfaces simples seront créées à l'aide d'Angular et React. Une configuration racine servira les deux micro-frontends.

Créer une application

Nous pouvons créer une simple application micro frontend angulaire en exécutant la commande suivante.

ng new angular-spa-frontend

Une fois le projet créé, exécutez la commande suivante pour installer la bibliothèque single-spa.

ng add single-spa-angular

Une fois la bibliothèque correctement installée, un fichier nommé main.single-spa.ts sera créé dans le projet Angular, qui contient toutes les configurations liées au single-spa.

Référez-vous au code de configuration.

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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

Il est nécessaire de fournir une valeur APP_BASE_HREF pour fonctionner comme un spa unique.

De plus, lors de l'ajout de la bibliothèque mono-spa, package.json contiendra deux scripts supplémentaires.

npm - version
node - version

Le fichier angular.json sera modifié en utilisant les configurations suivantes.

ng new angular-spa-frontend

« main » : « src/main.ts » sera remplacé par « main » : « src/main.single-spa.ts ». Une nouvelle configuration de build sera ajoutée en tant que module JavaScript.

Une fois les configurations terminées et vérifiées, nous pouvons servir l'application Angular à l'aide de la commande suivante.

ng add single-spa-angular

Maintenant que nous avons créé avec succès l'application micro frontend, voyons comment implémenter la root-config.

Configuration racine

Exécutez la commande suivante pour créer la configuration racine.

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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

En entrant cette commande, une série de configurations sera présentée pour créer la configuration racine.

Après avoir sélectionné les configurations précédentes, la configuration racine sera créée pour servir plusieurs frontends.

Pour connecter le micro frontend créé au root-config, nous devons modifier les fichiers root-config.ts et index.ejs.

"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"
 }

Comme mentionné dans le bloc de code précédent, le micro frontend créé doit être importé dans le fichier root-config.ts.

"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/"
     },

}

Les scripts suivants doivent être ajoutés au fichier index.ejs.

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

Création du micro frontend ( @org/angular-spa-frontend ), ainsi que l'URL ( http://localhost:4200/main.js ) dans laquelle le micro l'interface a été hébergée, doit être ajoutée dans la carte d'importation.

Ensuite, exécutez la commande suivante pour exécuter l'application.

npx create-single-spa

En supposant que ces étapes soient effectuées correctement, nous devrions pouvoir voir le spa unique final dans la vue, semblable à l'image suivante.

Étape 2 : Déploiement en production

Lors du déploiement de ces micro-frontends en production, il est recommandé que chaque application micro-frontend soit déployée en tant qu'application indépendante et autonome. La configuration racine chargera probablement chaque application de manière dynamique, en fonction des routes d'application définies dans registerApplication.

Étape 3 : Ajouter plus de micro-interfaces

Pour ajouter plus de micro-frontends, répétez les étapes mentionnées précédemment. Voyons comment intégrer une micro interface React dans la même configuration racine.

Créez une nouvelle micro-interface React à l'aide de la commande suivante.

npm - version
node - version

Ensuite, naviguez dans le projet créé et installez single-spa-react.

ng new angular-spa-frontend

Modifiez le fichier d'entrée pour exporter les méthodes de cycle de vie afin de rendre l'application compatible avec single-spa.

ng add single-spa-angular

Une fois les configurations terminées, nous pouvons servir le micro frontend React à l'aide de la commande suivante.

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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

Pour intégrer le micro frontend créé avec le root-config existant, implémentez les modifications suivantes dans les fichiers dans root-config.

"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"
 }

Vous devez également mettre à jour le fichier index.ejs avec le chemin du bundle principal de l'application React.

"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/"
     },

}

Référence GitHub

Découvrez l'exemple de code complet de cette application à spa unique dans cette démo GitHub.

Conclusion

L'utilisation d'un seul spa pour créer des micro-interfaces facilite la division d'une grande application en petits morceaux indépendants. De cette façon, différentes équipes peuvent travailler sur leurs parties sans affecter les autres et utiliser les frameworks qu'elles préfèrent, comme Angular ou React. En suivant les étapes de ce guide, vous pouvez configurer un projet de spa unique, connecter plusieurs micro-interfaces et offrir aux utilisateurs une expérience fluide. Single-spa facilite le développement de votre application au fil du temps et l'ajout de nouvelles fonctionnalités si nécessaire.

Blogs connexes

• Maîtrisez le JavaScript asynchrone avec RxJS
• API Axios et Fetch ? Choisir le bon client HTTP
• Types d'utilitaires TypeScript : un guide complet
• Stockage JWT sécurisé : meilleures pratiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!