Kalau membahas masa peralihan dari era manipulasi DOM seperti jQuery menuju component-based development, nama yang biasanya langsung muncul adalah React, Angular, atau Vue.
Namun, pada masa yang sama sebenarnya ada satu proyek yang mengambil jalur cukup berbeda. Bukan sekadar ingin tampil anti-mainstream, tetapi karena pendekatannya memang sangat dekat dengan standar native browser.
Namanya adalah Polymer Project.
Apa Itu Polymer Project?
Polymer merupakan library dan proyek yang dikembangkan dengan dukungan Google untuk mendorong penggunaan Web Components.
Ketika banyak framework JavaScript membangun abstraction layer dan sistem rendering mereka sendiri, Polymer justru berfokus pada standar yang berasal dari platform web itu sendiri, seperti:
- Custom Elements
- Shadow DOM
- HTML Templates
- Web Components
Karena pendekatan tersebut, Polymer bisa dibilang menjadi salah satu proyek penting yang membantu mempopulerkan konsep Web Components di kalangan developer web.
Polymer Berhenti di Versi 3
Polymer Library sendiri saat ini sudah tidak dikembangkan sebagai library utama seperti dulu. Versi terakhirnya berada di generasi Polymer 3.
Repository Polymer masih dapat dilihat di: github.com/Polymer/polymer
Namun, cerita Polymer tidak benar-benar berakhir di sana.
Dari Polymer ke Lit
Ide dan pengalaman dari ekosistem Polymer kemudian berkembang menjadi pendekatan Web Components yang lebih ringan dan modern melalui Lit.
Lit sebelumnya dikenal melalui proyek seperti LitElement dan lit-html, sebelum akhirnya dikonsolidasikan menjadi library Lit seperti sekarang.
Jika Polymer banyak membantu memperkenalkan Web Components pada masa ketika dukungan browser masih belum matang, Lit hadir pada era ketika browser modern sudah menyediakan banyak fondasi Web Components secara native.
Kenapa Lit Menarik untuk Web Components Modern?
1. Ukurannya Relatif Ringan
Browser modern sudah memiliki dukungan yang jauh lebih baik untuk Custom Elements, Shadow DOM, dan standar Web Components lainnya.
Karena itu, Lit tidak perlu membawa abstraction layer sebesar pendekatan Web Components generasi awal.
Library ini berfokus pada kebutuhan yang memang masih berguna bagi developer, seperti reactive properties, templating, lifecycle, dan rendering yang efisien.
2. Tidak Terikat pada Satu Framework
Salah satu daya tarik utama Lit adalah komponen yang dibuat tetap berbasis standar Web Components.
Artinya, sebuah custom element dapat digunakan dari HTML biasa dan dapat diintegrasikan dengan berbagai framework JavaScript modern selama framework tersebut mendukung interoperabilitas dengan Web Components.
<my-user-card></my-user-card>Elemen tersebut pada dasarnya tetap merupakan elemen HTML custom yang dikenali browser.
Pendekatan ini membuat Lit menarik untuk:
- Design system lintas framework.
- Component library internal perusahaan.
- Micro frontend.
- Widget yang dipasang di berbagai jenis aplikasi.
- Project yang ingin mengurangi ketergantungan pada satu framework tertentu.
3. Developer Experience yang Lebih Modern
Dibandingkan Polymer generasi lama, penulisan komponen dengan Lit terasa jauh lebih sederhana dan dekat dengan JavaScript serta TypeScript modern.
Contoh komponen sederhana menggunakan Lit:
import { LitElement, html, css } from 'lit';
class HelloWorld extends LitElement {
static styles = css`
p {
font-weight: bold;
}
`;
render() {
return html`
<p>Hello dari Lit!</p>
`;
}
}
customElements.define('hello-world', HelloWorld);Setelah didefinisikan, komponen tersebut bisa dipanggil seperti elemen HTML biasa:
<hello-world></hello-world>Polymer vs Lit Secara Sederhana
Polymer
↓
Mendorong adopsi Web Components
↓
Banyak abstraction & polyfill dibutuhkan
↓
Browser semakin matang
↓
Lit
↓
Web Components yang lebih ringan & modernJadi, Lit bukan sekadar "Polymer versi baru", tetapi bisa dipandang sebagai kelanjutan evolusi pendekatan Web Components dengan memanfaatkan kemampuan browser modern yang sekarang jauh lebih matang.
Kapan Sebaiknya Menggunakan Lit?
Lit menarik ketika kalian ingin membuat komponen UI yang:
- Ringan.
- Reusable.
- Tidak terlalu bergantung pada framework tertentu.
- Dapat digunakan lintas project.
- Berbasis standar browser.
- Cocok untuk design system atau widget mandiri.
Jika seluruh aplikasi sudah sangat bergantung pada React, Vue, atau Angular, menggunakan UI system native dari framework tersebut mungkin tetap lebih praktis.
Namun jika tujuan utamanya adalah membuat komponen web yang portable dan memiliki umur panjang, Lit menjadi salah satu opsi yang sangat menarik.
Sedikit Nostalgia Polymer Project
Saya sendiri pernah bereksperimen dengan Polymer Project pada masa ketika Web Components masih terasa seperti teknologi masa depan.
Beberapa repository dan jejak eksperimen Polymer yang masih tersimpan:
Ada yang dulu pernah merasakan masa eksplorasi menggunakan Polymer, atau justru baru mengenal Polymer Project dan Lit sekarang? 😎
Posting Komentar