Selama sepuluh tahun terakhir, pengembangan front-end menjadi jauh lebih rumit: dari HTML / CSS murni hingga topik seperti interaktivitas tinggi, aksesibilitas, kemampuan uji dan keamanan. Untuk memenuhi kebutuhan ini, sebagian besar tim pengembangan dibagi menjadi tim back-end dan front-end.
Selain itu, fungsionalitas aplikasi ini terus berkembang, dan pada titik tertentu menjadi tidak bijaksana untuk menggabungkan beberapa tim pada satu basis kode.
Istilah modis Micro-Frontends berarti pendekatan untuk membagi kode front-end yang berkembang menjadi bagian yang mudah dirawat. Frontend dibagi menjadi beberapa fungsi atau bagian yang dilepaskan dan digunakan oleh tim independen, yang meningkatkan kemampuan uji, penggunaan kembali, dan memungkinkan untuk memilih teknologi yang berbeda untuk setiap antarmuka mikro.
Saya akan berhenti di sini tanpa foreplay lebih lanjut, mari kita buat contoh frontend mikro menggunakan elemen Angular.
Membuat Micro Frontends
Pada artikel ini, kami akan membuat contoh sistem pemesanan perjalanan. Mari kita gunakan dua proyek Angular menggunakan CLI: pemesanan perjalanan dan pemesanan penerbangan .
Kami memerlukan beberapa dependensi untuk membangun dan menjalankan elemen Angular khusus. Instal dependensi berikut di dalam pemesanan penerbangan.
ng add @angular/elements ng add ngx-build-plus
Ketergantungan ini juga dapat diinstal melalui NPM. @ angular / elements menyediakan dukungan untuk elemen Angular. ngx-build-plus adalah perpanjangan dari Angular CLI untuk membangun proyek.
Catatan: Anda mungkin perlu meningkatkan versi modul elemen register dokumen ke 1.8.1 di /flight-booking/package.json , seperti dijelaskan dalam masalah ini.
Kami juga memasang modul http-server dalam proyek pemesanan penerbangan .
npm i -g http-server --save
Buat komponen pemesanan di penerbangan-booking / src / app / . Ubah komponen sebagai berikut:
booking-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>
booking-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() { }
Mari kita mendefinisikan komponen pemesanan sebagai elemen khusus dalam pemesanan-penerbangan / 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); } }
Untuk membangun proyek menjadi satu file JS, Anda harus memberi tahu sudut untuk menggunakan modul ngx-build-plus . Ubah pemesanan penerbangan / angular.json di tiga tempat sebagai berikut:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
Peluncuran proyek
Jalankan perintah berikut untuk merakit proyek menjadi satu file:
ng build --prod --output-hashing none --single-bundle true
–Output-hashing (tidak ada) menghindari hashing nama file.
–Single-bundle (true) akan menggabungkan semua file yang dikompilasi menjadi satu file JS.
Mulai server.
http-server ./dist/flight-booking -p 8081
Demikian pula, buat elemen pemesanan kereta khusus dan mulai server dengan port 8082.
http-server ./dist/train-booking -p 8082
Pembungkus item khusus
Mari kita sambungkan elemen pemesanan-penerbangan dan pemesanan - kereta khusus ke aplikasi pemesanan . Ubah /travel-booking/index.html sebagai berikut.
<!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 membutuhkan zone.js , dan custom-elements-es5-adapter.js menyediakan dukungan untuk elemen kustom di browser. Kami juga memasukkan main.js dari elemen khusus kami.
Ubah travel-booking / angular.json untuk mengganti port server default.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 }
...
Meluncurkan aplikasi utama
Luncurkan aplikasi menggunakan layanan ng . Aplikasi terakhir akan terlihat seperti ini:
Total
Menggunakan contoh-contoh sederhana, artikel menunjukkan bagaimana membangun arsitektur micro-frontend menggunakan elemen Angular.