Mengenal Teknologi Web-Components
Pernahkah kamu membanyangkan membuat element HTML kita sendiri? Wah kalau bisa itu sungguh luar biasa bukan? Ternyata benaran kita bisa melakukannya, wah penasaran bagaimana? Kenalkan dia adalah Web-Components.
Tulisan ini saya buat karena terinspirasi dan termotivasi oleh Insinyur Online, melalui Live Stream Bedah Praktek Episode #003: Scaling Frontend Development. Dari sana saya termotivasi untuk mengulik lebih jauh topik Web-Components ini dan menjadikan proses explorasi saya sebagai tulisan di sini. Terima kasih banyak untuk Insinyur Online. Yuk kenal Insinyur Online lebih jauh melalui http://insinyur.online/
Web-Components adalah teknologi yang memungkinkan Kita membuat elemen kustom yang dapat digunakan berulang. Mungkin bagi yang sudah pernah mencicipi Library/Framework Javascript seperti ReactJS, VueJS, Angular, Svelte, dll pasti tidak asing dengan konsep component, Kita bisa membuat element yang reusable (dapat dipakai berulang), luar biasa kan? mari kita explore lebih jauh lagi. Dengan memahami Web-Component kita akan lebih mudah memahami Library/Framework tersebut dan dengan mudah berpindah antar Library/Framework, karena Library/Framework tersebut terdapat penerapan Web-Component didalamnya.
Sebagai developer terutama Front-End, jika kita bisa membuat komponent yang dapat di pakai berulang baik itu di halamn yang berbeda merupakan hal yang sangat bagus, code kita pun akan terlihat lebih clean, mudah di baca, dan memudahkan kita dalam development.
Web-Components bertujuan untuk memecahkan masalah seperti di atas. Web-Components sendiri merupakan teknologi yang terdiri dari tiga teknologi utama, yang dapat digunakan bersama untuk membuat elemen kustom yang terenkapsulasi yang dapat digunakan kembali dimana saja tanpa merusak sistem yang berjalan.
Ketiga teknologi itu antara lain:
- Custom Element: Sebuah API yang memungkinkan kita menentukan elemen kustom dan perilakunya, yang kemudian dapat digunakan sesuai keinginan di tampilan pengguna.
- Shadow DOM: Sebuah API untuk membuat Shadow DOM Tree “Pohon DOM bayangan” yang dienkapsulasi ke elemen yang dirender secara terpisah dari DOM dokumen utama dan mengontrol fungsionalitas tersendiri. Dengan cara ini, kita dapat merahasiakan fitur pada elemen, sehingga dapat ditulis tanpa takut bertabrakan dengan bagian lain dari dokumen / dari luar custom element tersebut.
- HTML Template: Dengan element
<template>dan<slot>memungkinkan kita untuk menulis template markup yang tidak ditampilkan di halaman yang dirender. Dengan ini kita dapat menggunakan kembali beberapa template yang ada.
Ketiga teknologi ini yang membangun Web-Components menjadi sangat powerfull.
Bagaimana menggunakan Web-Components?
Untuk membangun Web-Components kita memerlukan ketiga teknologi yang kita bahas sebelumnya, Pertama kita akan mencoba membuat Custom Element, Shadow DOM, dan HTML Template untuk membangun Web-Components.
Custom Element
Ada 2 jenis Custom Element, yang antara lain:
- Autonomous custom elements: Custom elements yang berdiri sendiri (standalone), element ini tidak mewarisi standart HTML element yang ada. Dengan kata lain kita benar benar membuat element kita sendiri, sebagai contoh standart penamaan element untuk Autonomous custom elements adalah wajib terdiri dari 2 kata dan dihubungkan dengan (-) jika tidak maka tidak akan berhasil, contohnya:
<app-card>,<edwin-tantawi>. - Customized built-in elements: Customized build-in element merupakan kebalikan dari Autonomous custom elements, dimana custom element yang akan di buat mewarisi standart HTML element yang ada, dengan kata lain kita dapat melakukan customisasi pada element HTML yang sudah ada seperti
<p>,<div>. Penggunaanya juga sedikit berbeda dari Autonomous custom elements, penamaan elementnya sendiri akan sama seperti element yang mewarisinya tetapi jika ingin menggunakan Customized built-in elements, kita perlu memperikan attributeispada element tersebut dengan value nama dari custom element yang di buat, contohnya:<p is="app-text">, attributeisdi sana berfungsi untuk menandai bahwa element tersebut menggunakan custom element tertentu. Dengen demikian kita tetap bisa menggunakan Standart HTML element bersamaan dengan Customized built-in elements.
Penasaran bagaimana penggunaanya? yuk kita lanjut.
Autonomous custom elements.
Pertama kita perlu mendefenisikan custom element kita di file javascript dengan menggunakan class dengan nama bebas yang penting merepresentasikan custom element kita nantinya, dalam kasus ini kita akan namakan AppCard dan extends ke interface HTMLElement agar mewarisi sifat HTMLElement, dan merepresentasikan HTML element.
Kita bisa berikan constructor dan memanggil super agar custom element kita mewarisi HTMLElement.
yey kita berhasil membuat custom element kita sendiri, tetapi kita masih perlu medefenisikannya agar dapat di gunakan, caranya cukup mudah dengan menggunakan customElements.define() dengan 2 parameter wajib, dan 1 parameter opsional.
Parameter pertama adalah name yang akan digunakan nantinya untuk memanggil custom element kita, perlu diingat name wajib terdiri dari 2 kata dan dihubungkan dengan (-) jika tidak maka tidak akan berhasil.
Parameter kedua adalah constructor atau class custom element kita, di sini class custom element kita adalah AppCard.
Parameter ketiga adalah options yang bersifat opsional.
Selanjutnya kita dapat menggunakannya, dengan cara mengimport file javascript yang berisi custom element kita di HTML, lalu kita dapat memanggil custom element kita sesuai dengan name yang kita berikan saat mendefenisikan custom element.
maka akan terlihat sebagai berikut pada browser:
Mantap, kita berhasil membuat custom element kita sendiri. Jika kita cek pada browser maka tidak akan ada apa-apa yang mundul, ini karena custom elment kita belum berisi apapun.
Cara paling mudah adalah langsung memasukan konten pada children custom element kita. Selain itu kita dapat memasukan konten hingga memanipulasi custom element kita pada class custom element tersebut.
kita akan coba memberikan konten pada custom element kita. Kita bisa memasukan konten text maupun element HTML lain ke dalam custom element kita dengan menggunakan keyword this yang merujuk pada custom element kita lalu .innerHTML untuk memasukan konten ke dalam custom element kita.
maka akan terlihat seperti berikut pada browser:
Keren, kita berhasil membuatnya, selanjutnya kita akan masuk lebih dalam lagi, kita akan membahas Components Lifecycle / siklus hidup komponent.
Components Lifecycle
Components Lifecycle atau Siklus Hidup komponen, yups setiap komponen akan memiliki sikulus hidupnya tersendiri, kita bisa mengatur bagaimana perilaku komponen pada sikulus hidup nya dengan memanfaatkan lifecycle callbacks/hooks. Ada beberapa siklus hidup yang terjadi pada sebuah komponen. Ketika sebuah JavaScript class mewarisi sifat dari HTMLElement maka class tersebut akan memiliki siklus hidup layaknya sebuah elemen HTML.
Pertama ada constructor, ini bukan bagian dari lifecycle callback tapi kita juga perlu tau, constructor akan di panggil ketika kita membuat web component tersebut, di sini kita bisa meletakan logic yang akan dijalankan ketika komponen di buat. Mari kita lanjutkan ke Lifecycle callback yang bisa kita gunakan:
- connectedCallback: Dijalankan setiap kali komponen berhasil ditambahkan ke DOM. Ketika komponen / element kita tampil di DOM, cocok untuk melakukan konfigurasi.
- disconnectedCallback: Dijalankan setiap kali komponen keluar dari DOM. Ketika komponen / element hilang/keluar dari DOM (remove), cocok untuk melakukan cleanup.
- attributeChangedCallback: Dijalankan setiap kali value atribut yang di lakukan observe dengan fungsi get observedAttributes berubah, cocok untuk memuat ulang data yang akan ditampilkan
- adoptedCallback: Dijalankan setiap kali elemen dipindahkan ke dokumen baru. Lifecycle ini jarang digunakan. Pada kasus penggunaakn
iframemaka lifecycle ini akan di jalankan.
Mari kita coba beberapa lifecycle yang sering di gunakan.
Jika kita coba jalankan di browser, maka yang akan terjadi seperti berikut:
Keren, berikutnya tergantung kita untuk mengatur perilaku komponen yang kita buat berdasarkan lifecycle nya. Pada beberapa framework/library javascript juga memiliki beberapa lifecycle tersebut mungkin akan sedikit berbeda implementasi setiap framework/library.
Customized built-in elements
Tidak jauh berbeda dengan Autonomous custom elements, hanya saja pada Customized built-in elements kita akan melakukan nya pada standart HTML Element yang sudah ada seperti <p>, <div>, dan lainnya. Jika sebelumnya pada Autonomous custom elements, kita membuat nya benar benar Element yang baru.
Cara menggunakannya juga tidak berbeda jauh dari sebelumnya, semua lifecycle callback sebelumnya juga dapat digunakan, yang menjadi pembeda adalah class yang kita extends bukan ke interface HTMLElement , melainkan ke interface standart element HTML yang tersedia seperti HTMLParagraphElement, HTMLUListElement, dan masih banyak lagi, alih alih membuat element dari awal, kita bisa extend element yang sudah ada.
Pada contoh kali ini kita akan coba menambah fungsionalitas element <p> , dimana setiap akhir text pada paragraph akan kita tambahkan
. . . (read more)Yang berbeda dari sebelumnya hanya interface yang di extends, di sini kita gunakan HTMLParagraphElement yang merupahan interface untuk element <p> / paragraph .
pada kasus ini ketika lifecycle connectedCallback kita akan menambahkan “…(read more)” dengan cara menambahkannya dengan innerHTML .
Letak perbedannya berikutnya adalah pada saat mendefenisikan custom element kita, kita perlu menambahkan parameter ketiga yang opsional sebuah object lalu tambahkan key-value:
{ extends: 'p' } yang merepresentasikan HTML element yang akan di extends. Perlu diingat juga parameter pertama name disini bukan berperan sebagai nama TAG melainkan akan digunakan pada attribute is.
Yups.. dengan menggunakan is untuk memberitaukan bahkan itu adalah custom element maka kita tetap dapat menggunakan default element tersebut dengan cara tanpa menuliskan attribute is .
Makin tertarik? kita bisa explore lebih jauh di: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
Shadow DOM
Sebuah API untuk membuat Shadow DOM Tree “Pohon DOM bayangan” yang dienkapsulasi ke elemen yang dirender secara terpisah dari DOM dokumen utama dan mengontrol fungsionalitas tersendiri. Dengan cara ini, kita dapat merahasiakan fitur pada elemen, sehingga dapat ditulis tanpa takut bertabrakan dengan bagian lain dari dokumen / dari luar custom element tersebut.
Karena komponent yang kita buat dapat digunakan kembali dimana saja, Sebaiknya komponen tidak bisa mendapat gangguan luar agar tampilan atau fungsinya tetap dalam keadaan aslinya. Maka kita perlu menerapkan konsep enkapsulasi pada komponen.
Dengan ShadowDOM kita bisa membuat DOM tree lain secara terisolasi di dalam DOM tree. Terdapat beberapa komponen yang menyusun ShadowDOM yang bisa kita lihat pada illustrasi di atas, antara lain:
- Shadow Host: Node yang berada pada regular DOM dan sebagai wadah ShadowDOM.
- Shadow Tree: DOM Tree yang terdapat pada ShadowDOM.
- Shadow Root: Node Root / akar Node dari ShadowDOM.
- Shadow Boundary: Pembatas antara regular DOM dengan ShadowDOM.
Kita dapat memerlakukan ShadowDOM seperti regular DOM biasanya, hanya saja andara regular DOM dan ShadowDOM tidak dapat memanipulasi satu sama lain, karena terenkapsulasi baik dari dalam maupun luar.
Langsung saja kita coba dari code kita sebelumnya. Pertama-tama kita akan melihat masalah yang timbul jika tidak menerapkan ShadowDOM.
yups masalah yang muncul dari sisi styling, awalnya kita membuat style untuk button dengan warna lightcoral, namun pada custom element kita, kita menerapkan warna lightblue, maka terjadi override style, semua button menjadi biru, ini bukan yang kita inginkan. Mari kita implementasikan ShadowDOM.
membuat shadowDOM cukup mudah dengan cara:
const shadowDOM = this.attachShadow({ mode: 'open' });sekarang kamu berhasil membuat shadow-root , pada kasus ini kita attach shadow pada constructor this . pada parameter attachShadow kita bisa memberikan mode, ada dua mode yang bisa di berikan yaoitu open dan close, jika close maka kita sama sekali tidak bisa mengakses ShadowDOM dari luar, sedangkan pada mode open, kita bisa mengaksesnya dari luar ShadowDOM.
Selanjutnya kita rumbah dari yang sebelumnya kita menambahkan style dan element lain pada komponent kita melalui this, sekarang kita bisa menggunakan variabel shadowDOM .
keren sekarang komponen kamu sudah terenkapsulasi dengan ShadowDOM.
HTML Template
Terdapat dua element yang dapat kita gunakan dalam membuat HTML template yaitu <template> dan <slot> yang memungkinkan kita untuk menulis template markup yang tidak ditampilkan di halaman yang dirender. Dengan ini kita dapat menggunakan kembali beberapa template yang ada.
Jika kita coba menggunakan element template, maka tidak akan ditampilkan di browser.
seluruh element yang ada pada template tidak muncul pada browser, untuk menggunakan nya kita perlu merendernya melalui javascript.
Selanjutnya kita akan render template yang kita buat dengan memanfaatkan custom komponen kita sebelumnya.
pertama kita akan ambil element template yang kira buat sebelumnya melalui id yang kita berikan.
selanjutnya kita perlu hanya mengambil konten di dalam template saja dengan cara mengakses .content .
sebelum kita menggunakannya kita perlu cloneNode content kita, agar content pada template tidak hilang dan dapat digunakan kembali.
selanjutnya kita bisa attach template content yang telah di clone.
Sekarang kita sudah bisa melihat template kita melalui custom element pada browser.
Selanjutnya kita akan memanfaatkan slot untuk membuat template kita lebih dinamis, pada template yang kita buat sebelumnya kita melihat adalah element slot disana, slot berperan seperti placeholder, kita bisa memberikannya nilai berbeda beda, kita juga memerlukan atribut name pada slot .
dengan begitu nilai awal pada slot akan di gantikan dengan nilai yang baru.
Mantap, kita berhasil menggunakan 3 Teknologi dalam membangun Web-Components, antara lain Custom Element, ShadowDOM dan HTML Template.
Masih banyak lagi pembahasan Web-Components ini yang tidak bisa saya tuliskan semua dalam tulisan ini, semoga dengan tulisan ini di Medium dapat memberikan gambaran teknologi Web-Components .
Jika tertarik membahas materi ini lebih lanjut, jangan sungkan berikan komentar agar saya usahakan membuatkannya.
Akhir Kata
Terima kasih atas antusias nya, jika ada salah / salah kata mohon di maafkan, semoga dengan tulisan ini dapat berguna bagi banyak orang.
jangan sungkan untuk berbincang dengan saya melalui beberapa media-sosial yang bisa di lihat di sini https://edwintantawi.vercel.app/contact
