Fermer

octobre 27, 2023

Angular 16+ Micro Frontends avec éléments angulaires


Les micro-interfaces offrent aux développeurs une approche moderne et plus agile de la maintenance des applications, d’autant plus qu’Angular fonctionne si bien pour les solutions d’entreprise. Découvrez comment utiliser les éléments angulaires dans cet article.

Angular est l’un des meilleurs frameworks pour créer une bête d’application dans l’environnement d’entreprise. Bien qu’il soit sans doute l’un des frameworks les plus complexes à apprendre, Angular, qui est soutenu par Google, peut créer une application d’entreprise solide et stable en pensant aux grandes équipes. Cependant, nous ne voulons pas charger un package JavaScript géant d’un seul coup, sinon nous subirions des pertes de performances, de développement et de qualité.

Entrez dans les micro-interfaces

Comme son nom l’indique, notre code frontend peut désormais exploiter la puissance des microservices, ou au moins émuler le modèle de conception. Nous avons assisté ces dernières années à une transition des classes vers des composants fonctionnels, et d’une API REST complexe ou de GraphQL vers une approche RPC. L’appel de procédure à distance revient à la mode et se réinvente avec de nouveaux packages comme tRPC, et encore une fois utile dans la programmation backend moderne. Nous devons maintenant trouver un moyen de diviser également notre interface afin de maintenir nos applications avec des approches modernes.

Approches micro-frontales angulaires

  1. Fédération de modules – Webpack 5 offre la possibilité de créer votre application pour former une seule application au moment de l’exécution. Cependant, à moins que vous n’ayez besoin d’options avancées spécifiques, cela peut ajouter beaucoup de complexité inutile à votre vie. En tant que personne ayant maintenu une application angulaire plus grande avec Webpack, je sais que cela peut être pénible et excessif.
  2. Composants Web – Vous pouvez créer vos composants personnalisés en utilisant Éléments angulaires. C’est relativement simple à faire et vous permettra de l’utiliser n’importe où dans n’importe quelle application HTML. C’est ce que nous allons apprendre ici.

Éléments angulaires

Exemple de configuration de projet

  1. Pour cet exemple, assurez-vous d’installer le Extension du serveur VS Code Live. Cela rend le test du composant Web extrêmement simple. Cliquez simplement sur installer. Vous pouvez cependant utiliser n’importe quel serveur HTTP de votre choix.
  2. Créez un nouveau projet. Vous n’avez pas besoin de routage et pouvez utiliser simplement du CSS. Si vous souhaitez une application plus complexe ultérieurement, vous pouvez ajouter ce que vous voulez.
ng new micro-frontend
  1. Installer des éléments angulaires :
npm i @angular/elements
  1. Modifiez votre app.component.html pour être quelque chose de simple, comme bonjour tout le monde :
<p>Hello from micro frontend component!</p>
  1. Modifiez votre app.module.ts importer Injector depuis @angular/corefaire le amorcer tableau vide et ajoutez l’élément personnalisé app-micro-frontend. Nommez-le comme bon vous semble, bien que la convention angulaire commence par app. Ton app.module.ts devrait ressembler à ceci :
import { Injector, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule {

  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    const element = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define('app-micro-frontend', element);
  }
}
  1. Remplacer app-root avec votre nouvel élément app-micro-frontend dans ton index.html fichier afin de refléter votre nouvel élément. Ça devrait ressembler à ça:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MicroFrontend</title>
  <base href="https://www.telerik.com/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-micro-frontend></app-micro-frontend>
</body>
</html>

Facultatif

  • Vous souhaiterez peut-être d’abord tester votre projet avec ng servequi devrait fonctionner avec l’élément nouvellement créé.
  • Si vous lisez ceci du futur quand Signaux sans zone sont prêts (j’espère Angulaire 17+), alors vous souhaiterez obtenir de meilleures performances en matière de réactivité en vous désinscrivant de Zone.js. Modifiez votre main.ts fichier pour ajouter le noop argument comme ceci :
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })
  .catch(err => console.error(err));
  1. Ajoutez une commande bundle à votre package.json fichier sous scripts. Malheureusement, Angular n’a pas la possibilité de s’assurer qu’il n’y a qu’un seul fichier JS lors de la construction.
  • ng build -c production construira la version de production de votre application. -prod était déprécié et ne fonctionne plus.
  • --output-hashing=none est également nécessaire pour que les fichiers JS séparés n’aient pas de long hachage ajouté à leur nom.
  • cat ./dist/ANGULAR_PROJECT_NAME/*.js > ./dist/ANGULAR_PROJECT_NAME/app-micro-frontend.js – Cela vous permettra de concaténer tous les fichiers JS de production en un seul gros fichier JS appelé app-micro-frontend.js. Cependant,
    cat peut ne pas être disponible sur votre ordinateur par défaut. Windows a le type commande et PowerShell a get-contentetc. Pour que cela continue de fonctionner sur tous les appareils, j’ai décidé d’utiliser frapper avec
    cat. Je ne veux pas créer un tout nouveau script alors qu’une commande devrait suffire ici.
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "bundle": "ng build -c production --output-hashing=none && bash -c \"cat ./dist/micro-frontend/*.js > ./dist/micro-frontend/app-micro.js\""
  },

  1. Courir npm run bundle pour regrouper votre application.

  2. Allez au ./dist/micro-frontend dossier et modifiez le index.html déposer. Remplacez les trois fichiers de balises d’importation de script : runtime.js, pollyfills.jset main.js avec app-micro.js:

<!doctype html>
<html lang="en" data-critters-container>
<head>
  <meta charset="utf-8">
  <title>MicroFrontend</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-micro-frontend></app-micro-frontend>
  <script src="app-micro-frontend.js" type="module"></script>
</body>
</html>
  1. Modifiez le chemin de base pour qu’il fonctionne correctement avec votre live-server extension. Vous n’aurez peut-être pas besoin de le faire si vous utilisez un autre serveur pour les tests.
<base href="/dist/micro-frontend/">
  1. Cliquez avec le bouton droit sur ./dist/micro-frontend/index.html fichier et cliquez sur « Ouvrir avec Live Server ». Vous devriez maintenant voir le composant Web final :
Hello from micro frontend component!

Voir mon Référentiel d’éléments angulaires pour un exemple fonctionnel.

Conclusion

Séparer vos fichiers Angular en micro-interfaces peut être un excellent moyen de vous simplifier la vie. Ce n’est peut-être pas pour tout le monde, car le partage de packages, les techniques standard de chargement différé et les techniques Git pourraient constituer une approche plus simple. Il existe également certains défis lorsqu’il s’agit de partager l’état entre ces applications : vous devez suivre window événements, etc

Néanmoins, l’utilisation d’éléments angulaires peut rendre cela extrêmement simple et permettre à un membre de l’équipe d’écrire un composant dans React, tandis qu’un autre utilise Vue. Il est important de le savoir et certainement utile pour de nombreuses grandes équipes de projet.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

octobre 27, 2023