Nos últimos dez anos, o desenvolvimento de front-end se tornou muito mais complicado: de HTML / CSS puro a tópicos como alta interatividade, acessibilidade, testabilidade e segurança. Para atender a essas necessidades, a maioria das equipes de desenvolvimento é dividida em equipes de back-end e front-end.
Além disso, a funcionalidade do aplicativo está crescendo constantemente e, em algum momento, torna-se inconveniente combinar várias equipes em uma base de código.
O termo moderno Micro-Frontends passou a significar uma abordagem para dividir um código de front-end em partes fáceis de manter. O frontend é dividido em várias funções ou partes que são liberadas e implantadas por equipes independentes, o que aumenta a capacidade de teste, a reutilização e possibilita a escolha de diferentes tecnologias para cada micro interface.
Vou parar por aqui sem mais preliminares, vamos criar um exemplo de um micro frontend usando elementos Angular.
Criando Micro Frontends
Neste artigo, criaremos um exemplo de sistema de reserva de viagens. Vamos implantar dois projetos Angular usando a CLI: reserva de viagem e reserva de voo .
Precisamos de algumas dependências para criar e executar elementos Angular personalizados. Instale as seguintes dependências dentro da reserva de voo.
ng add @angular/elements ng add ngx-build-plus
Essas dependências também podem ser instaladas via NPM. @ angular / elements fornece suporte para elementos angulares. O ngx-build-plus é uma extensão da CLI angular para projetos de construção.
Nota: pode ser necessário atualizar a versão do módulo document-register-element para 1.8.1 em /flight-booking/package.json , conforme descrito nesta edição .
Também instalamos o módulo http-server no projeto de reserva de voo .
npm i -g http-server --save
Crie um componente de reserva em flight-booking / src / app / . Mude o componente da seguinte maneira:
booking.com / 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>
booking-flight / 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() { }
Vamos definir o componente de reserva como um elemento personalizado em 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 criar um projeto em um único arquivo JS, você deve indicar ao angular para usar o módulo ngx-build-plus . Modifique flight-booking / angular.json em três lugares, da seguinte maneira:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
Lançamento do projeto
Execute o seguinte comando para montar o projeto em um único arquivo:
ng build --prod --output-hashing none --single-bundle true
–Hash de saída (nenhum) evita nomes de arquivos de hash.
–Single-bundle (true) mesclará todos os arquivos compilados em um arquivo JS.
Inicie o servidor.
http-server ./dist/flight-booking -p 8081
Da mesma forma, crie outro elemento de reserva de trem personalizado e inicie o servidor com a porta 8082.
http-server ./dist/train-booking -p 8082
Wrapper de item personalizado
Vamos conectar os elementos personalizados de reserva de voo e reserva de trem ao aplicativo de reserva . Modifique /travel-booking/index.html da seguinte maneira.
<!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 requer zone.js e custom-elements-es5-adapter.js fornece suporte para elementos personalizados no navegador. Também incluímos o main.js de nossos elementos personalizados.
Modifique travel-booking / angular.json para substituir a porta do servidor padrão.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 }
...
Iniciando o aplicativo principal
Inicie o aplicativo usando ng serve . A aplicação final será mais ou menos assim:
Total
Usando exemplos simples, o artigo demonstra como criar uma arquitetura de micro-front-end usando elementos Angular.