Tunaiku road to Micro Front-ends : Custom Web Elements with Angular
Overview
Di Tunaiku, dalam salah satu list roadmap kita untuk tahun ini adalah mengimplementasikan arsitektur micro front-ends. Penggunaan custom web elements adalah salah satu cara nya. Sudah banyak di luar sana teknologi yang sudah mengusung konsep custom web elements contohnya Polymer, Angular Elements, Mithril, dll.
Tapi di tulisan ini saya tidak akan membahas lengkap bagaimana arsitektur keseluruhan tentang micro front-ends, karena untuk kali ini saya akan memfokuskan lebih ke bagian paling ‘core’ nya, yaitu custom web elements.
Getting Started
Custom web elements bisa diaplikasikan sebagai tag html, dengan isi tag Membuatcustom sesuai kebutuhan dan property yang bisa diinput.
Contoh, native tag html dengan property berupa class :
<h1>Hallo, saya tag native Html!</h1>
Contoh, custom tag html dengan property dinamis :
<custom-tag name="john" age="2"></custom-tag>
Jadi, disini saya akan menggunakan Angular versi 7 yang akan berperan sebagai custom web components nya. Berikut adalah list packages yang akan kita gunakan dalam examples kali ini.
Examples
First thing first, install angular cli globally ke system operasi anda.
npm i -g @angular/cli
Cek versi angular yang sudah terinstall.
ng --version
Jika di console kalian sudah terlihat bahwa angular sudah sukses terinstall, create project baru.
ng new my-angular-element
Pindah ke direktori project yang telah dibuat, serve secara lokal untuk memastikan aplikasi anda berjalan lancar.
ng serve
Arahkan browser anda pada ‘localhost:4200’ , dan muncul tampilan default pada aplikasi Angular.
Jika, aplikasi Angular anda sudah berjalan semestinya, saatnya kembali ke main topic, Membuat Custom Web Component.
Add additional package ‘@angular/elements dengan command
ng add @angular/elements
Dengan otomatis direktori anda mengalami perubahan berupa penambahan files.
arahkan ke file app.module.ts, dan tambahkan satu blok kode
//app.module.ts...
import { NgModule, Injector } from "@angular/core
import { createCustomElement } from "@angular/elements"@NgModule({
...
entryComponents: [AppComponent]
})...
export class AppModule {constructor(private injector: Injector) {}ngDoBootstrap() {
const el = createCustomElement(AppComponent, {
injector: this.injector
}
);
customElements.define("my-agular-element", el);
}}
dalam code diatas kita meng-import Injector, dan createCustomElement dari package @angular/elements, fungsinya untuk mem-bootstrap parent component yang akan kita jadikan sebagai custom web components, dan di define sebagai “my-angular-element”.
Sekarang kita mulai code custom web elements kita, kita akan membuat hello card yang menerima input dari property, arahkan ke app.component.html
//app.component.html<div style="text-align: center; border: 1px solid #000"><h1>Hello : {{ name }}</h1></div>
Lalu, di app component, masukkan Input() sebagai custom property untuk menerima parameter dari luar.
import { Component, Input, ViewEncapsulation } from "@angular/core"@Component({
selector: "my-angular-element",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
encapsulation: ViewEncapsulation.ShadowDom
})export class AppComponent { @Input()
public name: string = "John";}
Untuk keperluan web components kita sudah selesai, sekarang kita butuh polyfills, untuk mensupport di berbagai web browser.
npm install @webcomponents/custom-elements
Jika sudah selesai ter-install, arahkan ke pollyfills.ts yang berada di dalam direktori src/ dan tambahkan 2 baris.
import "@webcomponents/custom-elements/src/native-shim";import "@webcomponents/custom-elements/custom-elements.min";
sesudah itu untuk proses build kita butuh pollyfills yang sudah kita import tadi kedalam bundle web components kita, caranya dengan menambah konfig tambahan pada angular dengan cara:
ng add ngx-build-plus
fungsi penambahan command tersebut salah satunya dapat menambah flag baru yaitu
--single-bundle --keep-polyfills
Sesudah itu, kita tambahkan command scripts pada package.json untuk build custom web elements kita.
"scripts": {
..."build:element": "ng build --prod --single-bundle --keep-polyfills ---output-hashing=none",
}
Lalu jalankan command
npm run build:element
Selesai build, akan terbuat folder dist/my-angular-element/ yang berisi banyak file, tapi disini kita hanya butuh 3 file saja, yaitu :
- main.js
- polyfills.js
- scripts.js
Karena 3 file konfigurasi terlalu banyak untuk 1 web elements, maka kita akan menyatukan (concating) 3 file tersebut menjadi 1 kesatuan file. Untuk melakukan itu kita akan install dua packages dari nodejs untuk melakukan concatingnya.
npm i -D fs-extra concat
Setelah terinstall, di direktori root, buat file baru build-element.js file ini berisi konfigurasi untuk melakukan concat 3 file tersebut.
const fs = require("fs-extra");const concat = require("concat");async function build() {const files = ["./dist/ng-element-new/polyfills.js","./dist/ng-element-new/scripts.js","./dist/ng-element-new/main.js"];await fs.ensureDir("elements");await concat(files, "elements/my-elements.js");}build();
Lalu, update script build:elements kita dengan menambahkan script concat yang sudah kita buat tadi.
"scripts": {
..."build:element": "ng build --prod --single-bundle --keep-polyfills ---output-hashing=none && node build-element.js",
}
Jalankan lagi script build:elements nya.
Jika di notice, kita dapat folder output baru berupa elements/my-angular-elements.js
File itu yang akan kita inject ke dalam plain HTML sebagai custom web-components.
Demo
Buatlah direktori `demo` didalam root direktori aplikasi anda berisi file:
- index.html
- my-angular-elements.js ( file output custom web elements )
// demo/index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><base href="" /></head><body><my-angular-element username="Doe"></my-angular-element><script type="text/javascript" src="my-angular-elements.js"></script></body></html>
Install local http server dari npm bernama ‘serve’ untuk mengetes static html kita.
npm i -g serve
Setelah sukses terinstall, masuk ke directory demo, jalankan perintah
serve
Jika berhasil, maka custom web elements anda sudah sukses tersematkan di static html anda !
Conclusion
Walaupun masih belum stabil, langkah Angular dalam mensupport custom web elements bahkan micro frontends memang bukanlah main main. Selain bisa menjadi ‘multi purpose framework’, dan di support oleh raksasa teknologi ‘Google’, Angular mungkin bisa menjadi andalan untuk framework front-end di masa depan. Terlepas dari rival satu kandungnya yaitu Polymer sebagai pioner custom web elements untuk saat ini.
Reference
Github: https://github.com/DananJoy/my-angular-elements
Angular Elements Make The Best React Components | Bran Mcalister & Ryan Chenke : https://www.youtube.com/watch?v=tHclHHs7nmo