Mengenal Web Components
Ranger Kuning 21 Agustus 2017
Apa itu Web Components?
Web components adalah kumpulan fitur pada web browser yang memungkinkan kita untuk membuat widget (atau yang lebih dikenal dengan istilah component) dalam pengembangan web. Layaknya konsep plugin pada wordpress atau CMS serupa, component ini siap dipakai ulang pada halaman HTML manapun tanpa memerlukan library atau framework tambahan.
Cukup menggunakan teknologi (baca: API) browser saja!! #UseThePlatform
Tujuan utamanya adalah memberikan kemudahan untuk penulisan kode dengan struktur berbasis komponen (component-based software engineering). Setiap komponen mewakili satu atau lebih fungsionalitas sistem dan "harus" bersifat reusable.
Mungkin beberapa kalian ada yang familiar dengan frontend framework seperti vue, react atau angular 2 yang sama-sama men-support penulisan kode berbasis komponen juga, namun web components merupakan fitur native di web browser.
Contoh sederhananya, misal kita punya banyak aplikasi web yang dibangun dengan framework yang berbeda-beda. Dengan satu codebase HTML yang sama kita bisa membuat sebuah footer menjadi component, sehingga footer tersebut dapat dipasang di semua aplikasi web kita menggunakan HTML Imports.
<link rel="import" href="my-footer.html">
Kemudian memanggilnya dengan Custom Element yang sudah kita definisikan.
<my-footer></my-footer>
Tidak hanya footer, component bisa saja berupa datepicker, login modal, ads banner, custom button bahkan proses autentifikasi single sign on. Pokoknya bisa mencakup banyak hal, baik komponen visual maupun non-visual. Setiap component tidak harus memiliki UI karena sebuah template umumnya terdiri dari blok HTML, CSS dan JS. Bisa saja isinya hanya berupa blok javascript.
Contoh markup elemen HTML Template :
<template> <style> /* BLOCK CSS */ </style> <div> <!-- BLOCK HTML --> </div> </template> <script> // BLOCK JS </script>
Bagaimana implementasinya?
Saya akan mencoba menjelaskannya sesingkat mungkin, pertama - tama Web components itu terdiri dari 4 fitur, yaitu:
- HTML Imports, untuk menggunakan ulang dokumen HTML di dokumen HTML yang lain.
- Custom Element, untuk membuat tag HTML kita sendiri.
- HTML Template, untuk menyimpan subkonten yang dirender saat runtime. Terdiri dari Blok HTML, CSS dan JS.
- Shadow DOM, untuk mengenkapsulasi DOM (termasuk style / css) sebuah component.
Untuk detail spesifikasi lebih jauh kalian bisa kunjungi alamat webcomponents.org
Untuk memahami bagaimana implementasi fitur - fitur tersebut sekarang mari kita lihat contoh kode sederhana untuk membuat sebuah component.
Contoh index.html :
<!DOCTYPE html> <html> <head> <meta name="description" content="Web Components Sample" /> <meta charset="utf-8"> <title>Web Components Sample</title> <!-- 1. HTML Import --> <link id="my-footer-link" rel="import" href="my-footer.html"> </head> <body> <!-- 2. Custom Element -> nama harus kebab-case --> <my-footer></my-footer> </body> </html>
Contoh my-footer.html :
<!-- 3. HTML Template --> <template id="my-footer"> <style> .container { text-align: center; } </style> <div class="container"> <img src="https://goo.gl/DsFqxn"> </div> </template> <script> // Buat class MyFooter -> nama harus camelCase class MyFooter extends HTMLElement { constructor() { // Wajib panggil super di constructor super() // Ambil template element const template = document.querySelector('#my-footer-link') .import.querySelector('#my-footer') // 4. Shadow DOM // Tambah node template ke dalam shadow root this.attachShadow({mode: 'open'}) .appendChild( document.importNode(template.content, true) ) } } // Custom Element harus di register terlebih dahulu window.customElements.define('my-footer', MyFooter) </script>
Bila diperhatikan blok javascript pada file my-footer.html sengaja saya tulis dengan format ES6. Sehingga hanya beberapa browser yang mendukung, seperti Chrome versi 47 ke atas. Untuk menjalankan kode di atas pada browser lain, gunakan polyfills dengan menambahkan
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.7/webcomponents-lite.js"></script>pada file index.html
HTML Import
Yang perlu diperhatikan pada kode diatas adalah pengunaan attribute id="my-footer-link" pada baris <link id="my-footer-link" rel="import" href="my-footer.html"> untuk mengidentifikasi DOM. Karena pengambilan template membutuhkan fungsi import pada node tersebut. Lihat document.querySelector('#my-footer-link').import.
Custom Elements
Spesifikasi terbaru saat ini adalah Custom Elements v1. Dimana definisi custom elemen berupa class yang mengekstensi elemen lain class MyFooter extends HTMLElement dan di register dengan format window.customElements.define([nama elemen], [nama class]). Dengan aturan penamaan [nama elemen] harus kebab-case dan [nama class] harus CamelCase.
HTML Template
Blok HTML dan CSS yang berada di dalam tag <template></template> merupakan HTML Template yang kemudian akan dienkapsulasi di dalam Shadow DOM.
Shadow DOM
Bagian selanjutnya yang paling butuh penjelasan mungkin adalah bagian tentang Shadow DOM. Kuncinya ada pada kode this.attachShadow({mode: 'open'}). this pada baris tersebut adalah node dari elemen <my-footer></my-footer>. Dengan perintah attachShadow maka shadow root akan di-inject di dalam node my-footer. Kemudian baris ini .appendChild(document.importNode(template.content, true)) akan menambahkan semua DOM (blok HTML dan CSS) yang ada pada tag <template></template> berada di bawah Shadow DOM milik my-footer.
Kelebihan menggunakan Shadow DOM adalah enkapsulasi. Artinya semua behaviour (termasuk <style></style> yang berisi CSS) milik node yang berada di dalam Shadow Root tidak akan berpengaruh ke luar node lain. Menggunakan contoh kode di atas, maka dapat disimpulkan dari baris kode ini :
<style> .container { text-align: center; } </style>
Bahwa jika ada node lain yang menggunakan class container, maka node tersebut tidak akan mewarisi style text-align: center. Tentu saja SELAIN node yang berada di dalam Shadow Root. Begitupun dengan selector pada javascript, kita tidak dapat melakukan perintah document.querySelector('.container') melainkan harus dengan perintah this.shadowRoot.querySelector('.container') yang ditulis di dalam blok JS. Sehingga kita tidak bisa seenaknya memanipulasi DOM dari luar komponen Shadow. Jadi sama halnya seperti vuejs dan reactjs yang menggunakan Virtual DOM sangat tidak disarankan untuk menggunakan library yang memanipulasi Light DOM seperti jQuery untuk mengembangkan aplikasi berbasis Web Components.
Istilah Light DOM digunakan sebagai kebalikan dari Shadow DOM. Light DOM adalah node yang tidak berada di dalam Shadow DOM. Sedangkan Virtual DOM merupakan teknik untuk menyimpan nodelist pada variabel dalam javascript (jadi tidak dapat dilihat melalui menu inspect element).
Yap, dengan keempat spesifikasi tersebut maka campaign google tentang Componentize the Web dapat tercapai. Mari kita rapatkan barisan dalam gerakan modularisasi komponen web!
Bagian terbaik dari web component adalah komponen tidak hanya mengenkapsulasi UI saja, tetapi juga behaviour dari komponen itu sendiri.
Browser Support
Untuk saat ini spesifikasi web components masih terus dikembangkan oleh W3C. Berbagai web browser pun mulai bersiap untuk mengadaptasi spesifikasi baru tersebut. Ya, belum semua browser support sepenuhnya kecuali chrome dan opera, bahkan microsoft edge masih belum memutuskan untuk mendukung atau tidak (facepalm). Lalu bagaimana?
Jawabannya polyfills! atau biasa dikenal juga dengan istilah browser fallback. Singkat kata, polyfills adalah library untuk menjembatani kebutuhan browser menggunakan API yang belum didukung oleh platform mereka.
Contoh: IE tidak mendukung perintah javascript
document.querySelector()tapi dengan meng-include polyfill yang sesuai maka perintah tersebut dapat dijalankan tanpa error.
Jadi tenang saja, dengan polyfills fitur-fitur web components dapat dipastikan berjalan baik hampir di semua browser modern. Dan tentu saja kalau target browser pengguna kita hanya chrome tidak perlu pakai polyfill.
Library
Ada beberapa library yang mengekstensi kekuatan dan kelebihan web components. Library berikut menyediakan fitur - fitur yang sangat membantu kita untuk mengembangkan aplikasi berbasis web components dengan lebih mudah dan cepat seperti data-binding, routing, dsb. Diantaranya adalah :
- Polymer, project besutan Google
- X-Tags project yang didukung Microsoft dan ditemukan oleh mantan pegawai Mozilla
- Lainnya, seperti Bosonic, SkateJS dan Slim.js
Polymer
Di era js everywhere seperti sekarang, memilih tools bukanlah hal yang mudah. Mempelajari semua framework bukan jawaban. Saya sendiri sedang tertarik untuk memilih Polymer sebagai tools pengembangan web saat ini, entah kenapa saya merasa Polymer ini yang paling mudah untuk dipelajari dibandingkan dengan frontend framework yang lain.
Selain itu, saya juga mungkin sudah terhipnotis dengan tagline Polymer yang berbunyi #UseThePlatform.
Gunakanlah platform yang tersedia, web browser sekarang sudah sangat handal, dari Web Socket, Web Components sampai Progressive Web Apps. Semuanya API dari browser dan saya harap walaupun sepertinya belum punya banyak penggemar, Polymer yang memang didukung oleh Google punya masa depan.
Contoh aplikasi web dengan Polymer? kita bisa lihat pada tampilan youtube atau halaman download chrome (Ctrl+J) yang baru. Untuk contoh PWA (Progressive Web Apps) bisa lihat chrome status, meatscope, polymon dan polymer news
Berdasarkan informasi yang saya dapat dari salah satu video Polymer Summit 2016 di youtube, sudah ada 500+ aplikasi buatan google (baik yang open source atau tidak) yang dikembangkan menggunakan Polymer loh.