Hari ini, dengan senang hati kami mengumumkan rilis stabil pertama dari dua library pengembangan web generasi berikutnya: lit-html dan LitElement.
lit-html adalah library kecil, cepat, dan ekspresif untuk pembuatan template HTML. LitElement adalah class dasar sederhana untuk membuat Komponen Web dengan template lit-html.
Jika telah mengikuti project ini, Anda mungkin sudah tahu apa itu lit-html dan LitElement (dan Anda dapat melewati ke bagian akhir jika mau). Jika Anda baru menggunakan lit-html dan LitElement, baca terus untuk mengetahui ringkasannya.
lit-html: library kecil dan cepat untuk pembuatan template HTML
lit-html adalah library JavaScript yang kecil (hanya lebih dari 3 ribu yang dipaketkan, diminifikasi, dan di-gzip) dan cepat untuk template HTML. lit-html berfungsi dengan baik dengan pendekatan pemrograman fungsional, yang memungkinkan Anda mengekspresikan UI aplikasi secara deklaratif, sebagai fungsi dari statusnya.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Merender template lit-html sangatlah mudah:
render(myTemplate('Ada'), document.body);
Merender ulang template hanya akan memperbarui data yang telah diubah:
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 perbedaan apa pun; sebagai gantinya, lit-html 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, sehingga Anda tidak perlu mempelajari sintaksis kustom dan Anda memiliki semua ekspresi bahasa yang tersedia. lit-html mendukung berbagai jenis nilai secara native: string, node DOM, array, dan lainnya. Template itu sendiri adalah nilai yang dapat dihitung, diteruskan ke dan dari fungsi, dan bertingkat.
- Dapat diperluas: lit-html juga dapat disesuaikan dan diperluas—kit pembuatan template Anda sendiri. Perintah menyesuaikan cara nilai ditangani, yang memungkinkan nilai asinkron, pengulangan dengan kunci yang efisien, batas error, dan lainnya. lit-html menyertakan beberapa perintah siap pakai dan memudahkan Anda menentukan perintah Anda sendiri.
Sejumlah library dan project telah menyertakan 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 mem-build komponen untuk digunakan di aplikasi atau dibagikan kepada tim, baca terus untuk mempelajari lebih lanjut.
LitElement: class dasar Komponen Web yang 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. Selain itu, keduanya diperbarui cepat, tanpa melakukan diff.
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 vanilla yang bagus.)
Tindakan ini akan 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 mengetahui bahwa komponen tersebut kini didukung secara native di Chrome, Safari, dan Firefox. Dukungan Edge akan segera hadir, dan polyfill hanya diperlukan untuk versi browser lama.
Jika Anda baru menggunakan Web Components, Anda harus mencobanya. Komponen Web memungkinkan Anda memperluas HTML dengan cara yang berinteraksi dengan library, alat, dan framework lainnya. Hal ini membuatnya ideal untuk membagikan elemen UI dalam organisasi besar, memublikasikan komponen untuk digunakan di mana saja di web, atau membuat sistem desain UI seperti Desain Material.
Anda dapat menggunakan elemen kustom di mana pun Anda menggunakan HTML: dalam dokumen utama, di CMS, di Markdown, atau dalam tampilan yang dibuat dengan framework seperti React dan Vue. Anda juga dapat menggabungkan komponen LitElement dengan Komponen Web lainnya, baik yang telah ditulis menggunakan teknologi web vanilla 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 dalam project lain, lihat dokumen lit-html:
Seperti biasa, beri tahu kami pendapat Anda. Anda dapat menghubungi kami di Slack atau Twitter. Project kami bersifat open source (tentu saja!) dan Anda dapat melaporkan bug, mengajukan permintaan fitur, atau menyarankan peningkatan di GitHub: