Tujuan dari rangkaian blog ini adalah untuk mendalami library Lit dan mendapatkan pemahaman komprehensif tentang fitur uniknya dan bagaimana Lit membedakan dirinya dari library dan framework lain di pasar.

Serial ini dibagi menjadi tiga bagian, mencakup topik-topik seperti
1. Bagaimana cara kerja lit-html?
2. Bagaimana Lit Element melakukan pembaruan batch pada DOM?
3. Perbandingan dan tolok ukur Lit dengan framework dan library lain, beserta potensi kasus penggunaannya.

Di blog khusus ini, kami akan fokus menjelajahi lit-html dan cara kerjanya. Namun sebelum mendalami lit-html, mari kita lihat ikhtisar pustaka Lit itu sendiri terlebih dahulu.

Apa itu Menyala?

Lit adalah pustaka komponen web yang ringan dengan footprint kecil sekitar 5 KB.

Ini dirancang khusus untuk pengembangan komponen UI yang efisien dan cepat menggunakan spesifikasi komponen web, dan selanjutnya meningkatkan kinerja dengan memperkenalkan pembaruan batch ke DOM.

Padahal, menurut benchmark publik yang dilakukan olehhttps://krausest.github.io/js-framework-benchmark/index.html, Elemen Lit telah menunjukkan kinerja yang lebih cepat dibandingkan dengan React.

Untuk mempelajari lebih lanjut tentang Elemen Lit, Anda dapat mengunjungi situs web resmi mereka dihttps://lit.dev/. Namun, fokus dari rangkaian ini adalah untuk memahami cara kerja Elemen Lit dan penerapannya.

Elemen Lit dibangun di atas lit-html, yang merupakan pustaka template yang digunakan untuk membuat template, dan logika update DOM batch. Lit Element memperluas lit-html dengan menyediakan fungsionalitas tambahan untuk pembaruan batch.

Pembuatan templat lit-html:

lit-html adalah pustaka template JavaScript yang memungkinkan pembuatan template menggunakan literal dan fungsi tag yang diberi tag JavaScript, memanfaatkan fitur JavaScript asli dan komponen web.

Tidak seperti JSX atau pustaka templat lainnya, lit-html tidak memerlukan langkah build untuk mengonversi templat atau sintaks khusus kerangka kerja menjadi templat atau sintaks yang kompatibel dengan browser, karena menggunakan fitur JavaScript asli secara langsung.

Mari buat template menggunakan library lit-html:

Dalam contoh ini, kami mengimpor dua fungsi dari pustaka lit-html:
1. html, yang merupakan fungsi tag.
2. render, yang digunakan untuk merender template ke DOM.

Selanjutnya, kita mendefinisikan sebuah fungsi bernama myTemplateyang mengambil sebuah argument name.

Template ditentukan menggunakan htmlfungsi tag, diapit oleh tanda centang belakang (``), dan berisi cuplikan HTML <div>Hello, ${name}</div>.

Ini ${name}adalah placeholder yang dapat diganti secara dinamis dengan nilai saat runtime berdasarkan argumen yang diteruskan ke fungsi myTemplate.

Fungsi htmltag mengembalikan sebuah TemplateResultobjek, yang merepresentasikan template yang dapat dirender ke DOM.

Di bagian selanjutnya, kita akan menjelajahi fungsi tag JavaScript dan bagaimana fungsi tag html diimplementasikan di pustaka lit-html.

Di baris kode terakhir, kita memanggil rendermetode, yang merender template.
Metode ini rendermenerima dua argumen:
a) TemplateResultobjek yang merepresentasikan template yang akan dirender.
b) Referensi ke elemen DOM tempat template akan dirender.

Fungsi tag dalam JavaScript:

Catatan: Jika sudah terbiasa dengan fungsi tag, Anda dapat melewati bagian ini.

Fungsi tag dalam JavaScript adalah jenis fungsi khusus yang dapat digunakan untuk memproses literal template, yaitu string yang diapit oleh tanda centang belakang (``).

Fungsi tag dipanggil segera sebelum literal templat dievaluasi, dan ia menerima literal templat dan nilai interpolasinya sebagai argumen terpisah.

Misalnya, pertimbangkan kode berikut:

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

A. Larik bagian statis dari literal templat: literalString.
Dalam contoh kita, nilai parameternya literalStringadalah['Hello, ', '', raw: Array(2)]

B. Satu atau lebih argumen yang sesuai dengan jumlah ekspresi dalam literal yang diberi tag: values. Dalam contoh kita, kita menggunakan operator spread ( ...) untuk menyatakannya sebagai array. Nilainya adalah ['Whatfix'], yang berisi nilai ekspresi yang digunakan dalam literal templat.

Penyelaman mendalam ke dalam metode html:

Berikut adalah implementasi dari htmlfungsi tag dari lit-htmlrepositori —https://github.com/lit/lit. (Saya membuat beberapa perbaikan pada kode dengan menghapus bagian yang tidak perlu agar lebih mudah dipahami).

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

Itu kemudian membentuk sebuah objek, yang dikenal sebagai TemplateResult, dengan tiga parameter dan mengembalikannya.

Tiga parameter TemplateResulttermasuk _$litType$, string, dan nilai[].

A. Parameter _$litType$ berisi tipe.
B. Parameter string menampung larik bagian statis dari literal.
C. Parameter values[] berisi nilai bagian dinamis dari literal.

Dalam contoh kita sebelumnya(Templat — A), myTemplate("whatfix”)metode akan mengembalikan:

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

Penyelaman mendalam ke dalam metode render:

Metode render di lit-html bertanggung jawab untuk merender komponen di UI.
Ini menerima tiga argumen:

A. nilai — A TemplateResultyang dihasilkan oleh fungsi tag html, seperti yang dibahas di bagian sebelumnya.

B. container — Referensi ke elemen DOM tempat template akan dirender.

C. opsi — Untuk tujuan penyederhanaan, argumen ini dapat diabaikan untuk lebih memahami prosesnya.

Kita dapat memahami secara visual cara kerja metode render dalam contoh kita dengan memanfaatkan diagram alir.

Selanjutnya, mari kita proses komponen contoh kita, Template A, menggunakan diagram alir yang disebutkan di atas. Karena kita telah membuat TemplateResultobjek menggunakan fungsi tag html, seperti yang telah dibahas di bagian sebelumnya, sekarang kita dapat melanjutkan proses rendering.

Objek TemplateResultuntuk komponen contoh kita, Templat A, akan menggunakan struktur berikut:

Langkah selanjutnya melibatkan pembuatan <template>elemen dari TemplateResultobjek.
Dalam komponen contoh kita, Templat A, yang menyertakan bagian dinamis yang diwakili oleh {name}, kita membuat angka sembilan digit acak dan menambahkannya sebagai simpul komentar menggantikan {name}.
Akibatnya, <template>elemen akan muncul sebagai berikut: