Belajar cara kerja framework JavaScript modern dengan membangunnya sendiri

Memahami cara kerja framework JavaScript modern

• Membuat framework JavaScript sendiri membantu proses belajar.
• "Framework JavaScript modern" mengacu pada framework setelah React.
• Framework-framework ini terinspirasi dari React, tetapi berevolusi ke arah yang saling mirip.

Ciri-ciri framework modern

• Menggunakan reaktivitas (reactivity) untuk pembaruan DOM.
• Menggunakan kloning templat (cloning templates) untuk rendering DOM.
• Menggunakan API web modern seperti <template> dan Proxy.

Reaktivitas (Reactivity)

• React sering disebut tidak reaktif.
• Framework modern menggunakan model reaktif berbasis push dengan prioritas pada performa.
• Dengan Proxy, DOM diimplementasikan agar diperbarui setiap kali status berubah.

Kloning pohon DOM (Cloning DOM trees)

• Menggunakan tag <template> untuk mem-parsing HTML sekali lalu mengkloning keseluruhannya dengan cepat adalah teknik yang efisien.
• Metode ini digunakan di berbagai framework JavaScript.

API JavaScript modern

• <template> dan Proxy adalah API yang membantu membangun sistem reaktivitas.
• Tagged template literals digunakan untuk menyederhanakan API templat HTML.

Tahap membangun reaktivitas

• Reaktivitas, yang mendefinisikan manajemen status dan pembaruan DOM saat status berubah, menjadi dasar framework.
• Proxy digunakan untuk mendeteksi perubahan status, dan queueMicrotask dipakai untuk mengelola pembaruan secara efisien.

Tahap rendering DOM

• Fungsi html digunakan untuk membangun pohon DOM dan memperbaruinya secara efisien.
• Tagged template literals digunakan untuk menulis templat HTML, dan WeakMap digunakan untuk mengoptimalkan parsing HTML.

Menggabungkan reaktivitas dan rendering DOM

• createEffect digunakan untuk memperbarui DOM berdasarkan status.
• Diimplementasikan agar teks diperbarui secara otomatis saat status berubah.

Langkah berikutnya

• Ada beberapa cara untuk meningkatkan sistem rendering DOM.
• Tujuannya adalah meminimalkan pembaruan dengan mem-parsing templat hanya sekali dan menyiapkan binding hanya sekali.

Opini GN⁺

Hal terpenting dari tulisan ini adalah memahami konsep inti dan cara implementasi framework JavaScript modern, lalu belajar melalui pengalaman benar-benar membuat framework sendiri. Pendekatan ini dapat menjadi pengalaman belajar yang menarik dan bermanfaat bagi insinyur perangkat lunak pemula, karena memberi kesempatan untuk memahami cara kerja internal framework dan mencoba menerapkannya secara nyata.

[GN⁺]

Komentar Hacker News

• Merekomendasikan materi berikut untuk pemahaman dasar tentang topik yang menarik:

  • Komputasi inkremental: tautan Wikipedia
  • Perhitungan yang menyesuaikan diri sendiri: makalah Umut A. Acar
  • Pengantar komputasi inkremental oleh JaneStreet: tautan blog
  • Web dan komputasi inkremental: tautan blog
  • DOM yang menyesuaikan diri sendiri: tautan blog
  • DOM yang menyesuaikan diri sendiri dan data yang dapat didiff: tautan blog
  • Draf komputasi inkremental oleh Rado Kirov: Bagian 1, Bagian 2, Bagian 3
  • Menuju teori terpadu untuk UI reaktif: tulisan Raph Levien

• Penjelasan tentang kesalahpahaman seputar React dan cara kerjanya yang sebenarnya:

  • Saat status diperbarui, React tidak membangun ulang seluruh pohon virtual DOM, melainkan hanya komponen tersebut dan anak-anaknya.
  • useMemo tidak mencegah render ulang; React.memo yang melakukan peran itu.
  • React bukan "push-only" karena pembaruan dibuffer terlebih dahulu.
  • Keunggulan signals berarti framework mengetahui properti DOM mana yang perlu dirender ulang, tetapi ini tidak serta-merta berarti reaktivitas.

• Penilaian positif terhadap Svelte dan contoh penggunaannya:

  • Compiler Svelte sangat mudah diperluas dan dapat memproses template Svelte dengan cara khusus.
  • Berbagi pengalaman membangun Svekyll, klon Jekyll untuk blog statis, dengan Svelte.

• Berbagai sudut pandang tentang framework reaktif:

  • Menyediakan materi pengantar untuk framework reaktif seperti Solid.
  • Berbagi pengalaman menulis web renderer/framework untuk memahami reaktivitas di solid-js.
  • Merekomendasikan materi belajar dengan mengimplementasikan React secara langsung.

• Pertanyaan dan diskusi tentang reaktivitas React:

  • Pertanyaan tentang cara membuat React menjadi "reaktif".
  • Pendapat bahwa pengembangan framework JS baru sebaiknya dihentikan.

• Pertanyaan yang diajukan kepada orang-orang yang sangat berpengalaman dengan framework frontend:

  • Pertanyaan tentang framework/library yang mendukung effect system untuk pekerjaan rendering.