- Orang-orang membicarakan htmx seolah-olah ia menyelamatkan web dari SPA
- Pembuat htmx, Carson Gross, dengan jenaka menjelaskan dinamika ini sebagai "dialektika Hegel":
- tesis: MPA tradisional
- antitesis: SPA
- sintesis: aplikasi yang terdiri dari pulau-pulau interaktif berbasis hipermedia
- Tapi saya tidak melihat itu, dan dulu saya justru "membuat SPA dengan htmx"
- Ini adalah PoC aplikasi daftar ToDo sederhana
- Setelah halaman dimuat, tidak ada lagi komunikasi dengan server
- Semuanya diproses secara lokal di klien
- Jika htmx berfokus pada pengelolaan pertukaran hipermedia melalui jaringan, bagaimana ini bisa bekerja?
- Satu trik sederhana: kode "server-side" berjalan di Service Worker
Service Worker
- Bertindak sebagai proxy antara halaman web dan internet
- Dapat mencegat dan memanipulasi permintaan jaringan
- Bisa mengubah permintaan, menyimpan cache respons untuk penggunaan offline, dan membuat respons baru tanpa mengirim permintaan ke luar browser
- Fitur terakhir inilah inti dari aplikasi single-page ini
- Saat htmx melakukan permintaan jaringan, Service Worker mencegatnya
- Lalu Service Worker menjalankan logika bisnis dan menghasilkan HTML baru
- htmx mengganti DOM dengan HTML baru tersebut
Kelebihan dibanding SPA konvensional
- Service Worker harus menggunakan IndexedDB sebagai penyimpanan
- Ini mempertahankan state antar pemuatan halaman
- Bahkan jika halaman ditutup lalu dibuka lagi, aplikasi tetap mengingat datanya
- Ini adalah keuntungan tambahan yang didapat "gratis" dengan memilih arsitektur ini
- Juga mudah dibuat agar tetap berfungsi secara offline
Kekurangan
- Dukungan developer tools buruk
console.log kadang-kadang tidak muncul- Pelaporan apakah Service Worker terpasang tidak dapat diandalkan
- Tidak ada dukungan ES module di Firefox
- Semua kode harus dimasukkan ke dalam satu file
- Pengalaman pengembangan secara umum "tidak menyenangkan"
Meski begitu, SPA dengan htmx tetap bekerja dengan baik
Detail implementasi
- HTML dasarnya adalah kerangka kosong dari aplikasi single-page
- Tag
<body> menyiapkan inti aplikasi menggunakan htmx
hx-boost="true": memberi tahu htmx untuk mengganti respons klik tautan dan submit form dengan Ajax tanpa navigasi halaman penuhhx-push-url="false": mencegah htmx mengubah URL saat tautan diklik dan form dikirimhx-get="./ui": memberi tahu agar saat halaman dimuat, konten diambil dari /ui lalu digantihx-target="body": memberi tahu agar hasilnya diganti ke elemen <body>hx-trigger="load": memberi tahu agar semua ini dijalankan saat halaman dimuat
/ui endpoint
- Mengembalikan markup sebenarnya dari aplikasi
- Setelah itu, htmx mengontrol tautan dan form untuk membuatnya interaktif
- Service Worker menangani routing permintaan dengan library bergaya Express
setFilter dan listTodos adalah fungsi sederhana yang membungkus IDB Keyval- Komponen
App terdiri dari form filter, daftar tugas, dan form penambahan
/todos/add endpoint
- Setelah menyimpan tugas, endpoint ini mengembalikan respons yang merender ulang UI
- htmx mengganti DOM dengan respons tersebut
Komponen Todo
- Terdiri dari checkbox, tombol hapus, dan teks tugas
- Checkbox memicu permintaan
/todos/${id}/update
- Tombol hapus memicu permintaan delete ke
/todos/${id}
- Teks tugas memiliki dua state: "normal" dan "editing"
- htmx mendengarkan event double-click
- Mengirim permintaan ke
/ui/todos/${id}?editable=true
- Service Worker mengembalikan HTML
Todo yang berisi <input>
- htmx mengganti item tugas saat ini dengan HTML dari respons
Ringkasan
- Secara teknis, ini bekerja
- Apakah ini ide yang bagus? Apakah ini puncak dari aplikasi berbasis hipermedia? Haruskah React dibuang dan membuat seperti ini?
- Pada aplikasi yang sepenuhnya lokal, lapisan tidak langsung dari htmx terasa lebih membebani daripada membebaskan
- Sebagian besar aplikasi tidak sepenuhnya lokal
- Saya pikir pola "pulau-pulau interaktif" lebih baik daripada membagi kode "server-side" antara Service Worker dan server sungguhan
- Ini adalah upaya eksperimental untuk menunjukkan bahwa aplikasi single-page yang sepenuhnya lokal dapat dibangun dengan hipermedia
Belum ada komentar.