Au cours des dix dernières années, le développement frontal est devenu beaucoup plus compliqué: du HTML / CSS pur à des sujets tels que l'interactivité élevée, l'accessibilité, la testabilité et la sécurité. Pour répondre à ces besoins, la plupart des équipes de développement sont divisées en équipes back-end et front-end.
En plus de cela, la fonctionnalité de l'application ne cesse de croître, et à un moment donné, il devient inutile de combiner plusieurs équipes sur une base de code.
Le terme à la mode Micro-Frontends est devenu une approche pour diviser un code frontal en croissance en parties faciles à entretenir. Le frontend est divisé en plusieurs fonctions ou parties qui sont publiées et déployées par des équipes indépendantes, ce qui augmente la testabilité, la réutilisation et permet de choisir différentes technologies pour chaque micro-interface.
Je m'arrêterai ici sans préliminaires supplémentaires, créons un exemple de micro frontend utilisant des éléments angulaires.
Création de micro frontends
Dans cet article, nous allons créer un exemple de système de réservation de voyages. Déployons deux projets Angular en utilisant la CLI: travel-booking et flight-booking .
Nous avons besoin de quelques dépendances pour construire et exécuter des éléments angulaires personnalisés. Installez les dépendances suivantes dans réservation de vol.
ng add @angular/elements ng add ngx-build-plus
Ces dépendances peuvent également être installées via NPM. @ angular / elements prend en charge les éléments angulaires. ngx-build-plus est une extension de la CLI angulaire pour les projets de construction.
Remarque: vous devrez peut-être mettre à niveau la version du module document-register-element vers 1.8.1 dans /flight-booking/package.json , comme décrit dans ce problème .
Nous installons également le module http-server dans le projet de réservation de vol .
npm i -g http-server --save
Créez un composant de réservation dans flight-booking / src / app / . Modifiez le composant comme suit:
flight-booking / src / app / booking / booking.component.html
<div style="text-align:center"> <a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a> </div>
flight-booking / src / app / booking / booking.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-flight-booking', templateUrl: './booking.component.html', styleUrls: ['./booking.component.scss'] }) export class BookingComponent implements OnInit { title = 'Flight Booking App'; constructor() { } ngOnInit() { }
Définissons le composant de réservation comme un élément personnalisé dans flight-booking / src / app / app.module.ts .
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { createCustomElement } from '@angular/elements'; import { BookingComponent } from './booking/booking.component'; @NgModule({ declarations: [ AppComponent, BookingComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [], entryComponents: [ BookingComponent ] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector }); customElements.define('app-flight-booking', myCustomElement); } }
Pour construire un projet dans un seul fichier JS, vous devez indiquer à angular d'utiliser le module ngx-build-plus . Modifiez vol-réservation / angular.json en trois endroits comme suit:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
Lancement du projet
Exécutez la commande suivante pour assembler le projet dans un seul fichier:
ng build --prod --output-hashing none --single-bundle true
–Output-hashing (aucun) évite le hachage des noms de fichiers.
–Un seul paquet (vrai) fusionnera tous les fichiers compilés en un seul fichier JS.
Démarrez le serveur.
http-server ./dist/flight-booking -p 8081
De même, créez un autre élément de réservation de train personnalisé et démarrez le serveur avec le port 8082.
http-server ./dist/train-booking -p 8082
Emballage d'article personnalisé
Connectons les éléments personnalisés de réservation de vol et de train à l' application de réservation . Modifiez /travel-booking/index.html comme suit.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>TravelBooking</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <div style="margin-bottom: 10px;" id="flight-booking-container"><app-flight-booking></app-flight-booking></div> <div id="train-booking-container"><app-train-booking></app-train-booking></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script> <script type="text/javascript" src="http://localhost:8081/main.js"></script> <script type="text/javascript" src="http://localhost:8082/main.js"></script> </body> </html>
Angular nécessite zone.js et custom-elements-es5-adapter.js prend en charge les éléments personnalisés dans le navigateur. Nous avons également inclus main.js de nos éléments personnalisés.
Modifiez travel-booking / angular.json pour remplacer le port de serveur par défaut.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 }
...
Lancement de l'application principale
Lancez l'application à l'aide de ng serve . L'application finale ressemblera à ceci:
Total
À l'aide d'exemples simples, l'article montre comment créer une architecture micro-frontend à l'aide d'éléments angulaires.