In den letzten zehn Jahren ist die Front-End-Entwicklung viel komplizierter geworden: von reinem HTML / CSS zu Themen wie hoher Interaktivität, Zugänglichkeit, Testbarkeit und Sicherheit. Um diesen Anforderungen gerecht zu werden, werden die meisten Entwicklungsteams in Back-End- und Front-End-Teams unterteilt.
Darüber hinaus wächst die Funktionalität der Anwendung stetig und es wird irgendwann unzweckmäßig, mehrere Teams auf einer Codebasis zusammenzufassen.
Unter dem modischen Begriff Micro-Frontends versteht man die Aufteilung eines wachsenden Frontend-Codes in einfach zu wartende Teile. Das Frontend ist in mehrere Funktionen oder Teile unterteilt, die von unabhängigen Teams freigegeben und bereitgestellt werden. Dies erhöht die Testbarkeit und Wiederverwendung und ermöglicht die Auswahl verschiedener Technologien für jede Mikroschnittstelle.
Ich werde hier ohne weiteres Vorspiel anhalten und ein Beispiel für ein Micro-Frontend mit Angular-Elementen erstellen.
Micro-Frontends erstellen
In diesem Artikel erstellen wir ein Beispiel für ein Reisebuchungssystem. Lassen Sie uns zwei Angular-Projekte mithilfe der CLI bereitstellen: Reisebuchung und Flugbuchung .
Wir benötigen einige Abhängigkeiten, um benutzerdefinierte Winkelelemente zu erstellen und auszuführen. Installieren Sie die folgenden Abhängigkeiten in der Flugbuchung.
ng add @angular/elements ng add ngx-build-plus
Diese Abhängigkeiten können auch über NPM installiert werden. @ angular / elements bietet Unterstützung für Angular-Elemente. ngx-build-plus ist eine Erweiterung der Angular CLI für Bauprojekte.
Hinweis: Möglicherweise müssen Sie die Version des Moduls document-register-element in /flight-booking/package.json auf 1.8.1 aktualisieren , wie in dieser Ausgabe beschrieben .
Wir installieren auch das http-Server Modul im Flugbuchungsprojekt .
npm i -g http-server --save
Erstellen Sie eine Buchungskomponente in flight-booking / src / app / . Ändern Sie die Komponente wie folgt:
flugbuchung / src / app / buchung / buchungskomponente.html
<div style="text-align:center"> <a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a> </div>
flugbuchung / src / app / buchung / buchungskomponente.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() { }
Definieren wir die Buchungskomponente als benutzerdefiniertes Element in 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); } }
Um ein Projekt in eine einzelne JS-Datei zu erstellen, müssen Sie Angle anweisen, das Modul ngx-build-plus zu verwenden . Ändern Sie flight-booking / angular.json an drei Stellen wie folgt:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
Projektstart
Führen Sie den folgenden Befehl aus, um das Projekt in einer einzelnen Datei zusammenzusetzen:
ng build --prod --output-hashing none --single-bundle true
–Output-Hashing (keine) vermeidet Hashing-Dateinamen.
–Single-Bundle (true) führt alle kompilierten Dateien zu einer JS-Datei zusammen.
Starten Sie den Server.
http-server ./dist/flight-booking -p 8081
Erstellen Sie auf ähnliche Weise ein anderes benutzerdefiniertes Zugbuchungselement und starten Sie den Server mit Port 8082.
http-server ./dist/train-booking -p 8082
Benutzerdefinierte Artikelverpackung
Lassen Sie uns die benutzerdefinierten Flugbuchungs- und Zugbuchungselemente mit der Buchungsanwendung verbinden . Ändern Sie /travel-booking/index.html wie folgt.
<!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 erfordert zone.js und custom-elements-es5-adapter.js unterstützt benutzerdefinierte Elemente im Browser. Wir haben auch main.js aus unseren benutzerdefinierten Elementen hinzugefügt .
Ändern Sie travel-booking / angular.json , um den Standard-Server-Port zu überschreiben.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 }
...
Hauptanwendung starten
Starten Sie die Anwendung mit ng serve . Die endgültige Anwendung sieht ungefähr so aus:
Total
Der Artikel zeigt anhand einfacher Beispiele, wie Sie mit Angular-Elementen eine Micro-Frontend-Architektur aufbauen.