Hari ini, dengan senang hati kami umumkan rilis stabil pertama dari dua library pengembangan web generasi berikutnya: lit-html dan LitElement.
lit-html adalah library kecil, cepat, dan ekspresif untuk template HTML. LitElement adalah class dasar sederhana untuk membuat Komponen Web dengan template lit-html.
Jika sudah mengikuti project ini, Anda mungkin sudah mengetahui apa itu lit-html dan LitElement (dan Anda dapat melompat ke bagian akhir jika mau). Jika Anda baru mengenal lit-html dan LitElement, baca terus untuk mendapatkan ringkasan.
lit-html: pustaka kecil dan cepat untuk penerapan template HTML
lit-html adalah library JavaScript berukuran kecil (lebih dari 3k yang dipaketkan, diminifikasi, dan di-gzip) dan cepat untuk pembuatan template HTML. lit-html berfungsi baik dengan pendekatan pemrograman fungsional, sehingga Anda dapat mengekspresikan UI aplikasi secara deklaratif, sebagai fungsi dari statusnya.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Merender template lit-html sangat mudah:
render(myTemplate('Ada'), document.body);
Merender ulang template hanya akan memperbarui data yang berubah:
render(myTemplate('Grace'), document.body);
lit-html efisien, ekspresif, dan dapat diperluas:
- Efisien. lit-html sangat cepat. Saat data berubah, lit-html tidak perlu melakukan diffing apa pun; sebagai gantinya, lit-html akan mengingat tempat Anda menyisipkan ekspresi dalam template dan hanya memperbarui bagian dinamis ini.
- Ekspresif. lit-html memberi Anda kemampuan penuh JavaScript, UI deklaratif, dan pola pemrograman fungsional. Ekspresi dalam template lit-html hanyalah JavaScript, jadi Anda tidak perlu mempelajari sintaksis khusus dan Anda memiliki semua keekspresifan bahasa yang dapat Anda gunakan. lit-html mendukung berbagai jenis nilai secara native: string, node DOM, array, dan banyak lagi. Template itu sendiri merupakan nilai yang dapat dihitung, diteruskan ke dan dari fungsi, serta disusun bertingkat.
- Dapat diperluas: lit-html juga dapat disesuaikan dan diperluas—kit konstruksi template Anda sendiri. Perintah menyesuaikan cara penanganan nilai, memungkinkan nilai asinkron, pengulangan kunci yang efisien, batas error, dan lainnya. lit-html menyertakan beberapa perintah yang siap digunakan dan memudahkan untuk menentukan perintah Anda sendiri.
Sejumlah perpustakaan dan proyek telah menggabungkan lit-html. Anda dapat menemukan daftar beberapa library ini di repo awesome-lit-html di GitHub.
Jika hanya memerlukan template, Anda dapat memulai sekarang dengan dokumen lit-html. Jika Anda ingin membuat komponen untuk digunakan di aplikasi atau ingin dibagikan dengan tim, baca terus untuk mempelajari lebih lanjut.
LitElement: class dasar Komponen Web ringan
LitElement adalah class dasar ringan yang mempermudah pembuatan dan berbagi Komponen Web.
LitElement menggunakan lit-html untuk merender komponen dan menambahkan API untuk mendeklarasikan properti dan atribut reaktif. Elemen diperbarui secara otomatis saat propertinya berubah. Dan mengupdate cepat, tanpa diffing.
Berikut adalah komponen LitElement sederhana di TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Kami juga memiliki JavaScript API biasa.)
Langkah ini membuat elemen yang dapat Anda gunakan di mana pun Anda menggunakan elemen HTML reguler:
<name-tag name="Ida"></name-tag>
Jika sudah menggunakan Komponen Web, Anda akan senang mendengar bahwa kini Komponen Web tersebut telah didukung secara native di Chrome, Safari, dan Firefox. Dukungan Edge akan segera hadir, dan polyfill hanya diperlukan untuk versi browser lama.
Jika Anda baru mengenal Komponen Web, Anda harus mencobanya! Komponen Web memungkinkan Anda memperluas HTML dengan cara yang dapat saling beroperasi dengan library, alat, dan framework lain. Karena itulah mereka ideal untuk berbagi elemen UI dalam organisasi besar, memublikasikan komponen untuk digunakan di mana saja di web, atau membangun sistem desain UI seperti Desain Material.
Anda dapat menggunakan elemen kustom di mana pun menggunakan HTML: di dokumen utama, di CMS, di Markdown, atau di tampilan yang dibuat dengan framework seperti React dan Vue. Anda juga dapat mencampur dan mencocokkan komponen LitElement dengan Komponen Web lain, baik yang ditulis menggunakan teknologi web biasa atau dibuat dengan bantuan alat seperti Salesforce Lightning Web Components, Stencil Ionic, SkateJS, atau library Polymer.
Mulai
Ingin mencoba lit-html dan LitElement? Titik awal yang baik adalah tutorial LitElement:
Jika Anda tertarik untuk menggunakan lit-html saja, atau mengintegrasikan template lit-html ke project lain, lihat dokumen lit-html:
Seperti biasa, beri tahu kami pendapat Anda. Anda dapat menghubungi kami di Slack atau Twitter. Project kami adalah open source (tentu saja!) dan Anda dapat melaporkan bug, mengajukan permintaan fitur, atau menyarankan peningkatan di GitHub: