En los últimos diez años, el desarrollo front-end se ha vuelto mucho más complicado: desde HTML / CSS puro hasta temas como alta interactividad, accesibilidad, comprobabilidad y seguridad. Para satisfacer estas necesidades, la mayoría de los equipos de desarrollo se dividen en equipos de back-end y front-end.
Además de esto, la funcionalidad de la aplicación está creciendo de manera constante y, en algún momento, resulta incómodo combinar varios equipos en una sola base de código.
El término de moda Micro-Frontends ha llegado a significar un enfoque para dividir un creciente código de front-end en partes fáciles de mantener. La interfaz está dividida en varias funciones o partes que son lanzadas e implementadas por equipos independientes, lo que aumenta la capacidad de prueba, la reutilización y permite elegir diferentes tecnologías para cada microinterfaz.
Me detendré aquí sin más juegos previos, creemos un ejemplo de una micro interfaz con elementos angulares.
Creando micro frontends
En este artículo, crearemos un ejemplo de un sistema de reserva de viajes. Implementemos dos proyectos angulares utilizando la CLI: reserva de viajes y reserva de vuelos .
Necesitamos algunas dependencias para construir y ejecutar elementos angulares personalizados. Instale las siguientes dependencias dentro de la reserva de vuelo.
ng add @angular/elements ng add ngx-build-plus
Estas dependencias también se pueden instalar a través de NPM. @ angular / elements proporciona soporte para elementos angulares. ngx-build-plus es una extensión de la CLI angular para proyectos de construcción.
Nota: es posible que necesite actualizar la versión del módulo document-register-element a 1.8.1 en /flight-booking/package.json , como se describe en este número .
También instalamos el módulo http-server en el proyecto de reserva de vuelo .
npm i -g http-server --save
Cree un componente de reserva en flight-booking / src / app / . Cambie el componente de la siguiente manera:
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>
vuelo-reserva / 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() { }
Definamos el componente de reserva como un elemento personalizado en 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); } }
Para construir un proyecto en un solo archivo JS, debe indicarle a angular que use el módulo ngx-build-plus . Modifique flight-booking / angular.json en tres lugares de la siguiente manera:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
Lanzamiento del proyecto
Ejecute el siguiente comando para ensamblar el proyecto en un solo archivo:
ng build --prod --output-hashing none --single-bundle true
–Hutput-hashing (ninguno) evita los nombres de archivos hash.
–Single-bundle (true) fusionará todos los archivos compilados en un solo archivo JS.
Inicia el servidor.
http-server ./dist/flight-booking -p 8081
Del mismo modo, cree otro elemento personalizado de reserva de trenes e inicie el servidor con el puerto 8082.
http-server ./dist/train-booking -p 8082
Envoltorio de artículos personalizados
Conectemos los elementos personalizados de reserva de vuelo y reserva de tren a la aplicación de reserva . Modifique /travel-booking/index.html de la siguiente manera.
<!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 requiere zone.js , y custom-elements-es5-adapter.js proporciona soporte para elementos personalizados en el navegador. También incluimos main.js de nuestros elementos personalizados.
Modifique travel-booking / angular.json para anular el puerto predeterminado del servidor.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 }
...
Iniciando la aplicación principal
Inicie la aplicación usando ng serve . La aplicación final se verá así:
Total
Usando ejemplos simples, el artículo muestra cómo construir una arquitectura de micro frontend utilizando elementos angulares.