Tunaiku road to Micro Front-ends : Custom Web Elements with Angular

Photo by Stanislav Kondratiev on Unsplash

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.

1. NodeJs v8+
2. NPM v5+

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