- Dalam pengembangan web modern, dikotomi palsu antara HTML dan framework JavaScript besar mendorong developer ke kompleksitas yang tidak perlu
- HTMX menangani request AJAX, pembaruan parsial, dan transisi animasi hanya dengan atribut HTML, sehingga HTML yang dikembalikan server bisa langsung diterapkan ke tampilan
- Strukturnya memungkinkan adopsi bertahap tanpa perubahan besar pada codebase yang ada, mengurangi kompleksitas frontend sekaligus meningkatkan produktivitas dan kemudahan perawatan
- Dibanding SPA berbasis React, peningkatan besar pada jumlah kode, dependensi, waktu build, dan kecepatan loading telah terbukti di produksi nyata
- Dibanding memilih framework secara berlebihan, pendekatan sederhana berbasis hypermedia lebih menguntungkan untuk produktivitas dan maintainability jangka panjang
Mengangkat masalah: pilihan palsu dalam pengembangan web
- Dalam diskusi pengembangan web, yang terus diulang hanyalah pilihan ekstrem antara memakai HTML saja atau framework besar seperti React
- HTML murni kuat dalam fitur dasar seperti link, form, dan
dialog, tetapi punya keterbatasan dalam pembaruan parsial dan respons instan
- Saat memilih React·Vue·Angular, yang ikut datang adalah ratusan dependensi, build lambat, dan perdebatan rumit soal state management
- Bahkan untuk app CRUD sederhana, dashboard, dan aplikasi yang berpusat pada form, kenyataannya tooling yang berlebihan tetap dipakai
Konsep inti HTMX
- HTMX adalah alat yang menambahkan atribut khusus pada elemen HTML untuk melakukan komunikasi asinkron dengan server
- Misalnya, atribut
hx-get dan hx-post mengirim request lalu menyisipkan respons ke area DOM tertentu
- Diperluas sehingga setiap elemen HTML bisa menjadi pengirim request HTTP
- Server mengembalikan fragmen HTML apa adanya, bukan JSON, lalu HTML yang diterima akan diganti atau disisipkan secara otomatis ke lokasi yang ditentukan
- Perilaku didefinisikan hanya lewat deklarasi atribut HTML tanpa perlu menulis JavaScript secara langsung
- Ukuran library sekitar 14kb(gzip) sehingga sangat ringan
- Bisa langsung diterapkan ke dokumen HTML yang sudah ada tanpa build tool atau konfigurasi framework terpisah
- Strukturnya cocok dengan pendekatan pengembangan web tradisional yang berpusat pada server-side rendering
Fitur utama
- Menangani request AJAX: menjalankan request GET dan POST hanya dengan atribut HTML
- Pembaruan DOM: HTML yang dikembalikan server otomatis diterapkan ke elemen yang ditentukan
- Penanganan event: menghubungkan event pengguna seperti klik dan input dengan pemanggilan ke server
- Manajemen history: terintegrasi dengan aksi back dan forward di browser
Contoh penerapan nyata dan angkanya
- Contexte memigrasikan SaaS berbasis React ke Django + HTMX
- Total baris kode turun 67% (21,500 → 7,200)
- Dependensi JavaScript turun 96% (255 → 9)
- Waktu build berkurang 88% (40 detik → 5 detik)
- Kecepatan loading halaman meningkat 50~60%
- Dua pertiga codebase dihapus, dan aplikasinya justru menjadi lebih baik
- Tanpa pemisahan frontend dan backend, semua developer bisa bekerja full-stack
Ringkasan terhadap sanggahan yang umum
- "Bukankah perlu state management client yang kompleks?"
- Pada praktiknya, kebanyakan hanya sebatas form, list, dan elemen yang muncul saat diklik, dan itu cukup ditangani HTMX
- Untuk tool kolaborasi real-time seperti Google Docs memang pengecualian, tetapi kebanyakan orang melebih-lebihkan kompleksitas app CRUD
- "Bagaimana dengan keuntungan ekosistem React?"
- Ekosistem yang besar juga berarti node_modules berukuran gigabyte, pilihan tanpa akhir, dan debat state management
- Ekosistem HTMX selesai hanya dengan satu bahasa server-side yang dipilih
- "Bukankah SPA terasa lebih cepat?"
- Di awal, harus melewati download, parsing, eksekusi, dan hydration JavaScript berukuran besar
- HTMX cepat sejak loading awal, dan setelah itu juga menjaga respons cepat dengan hanya mengganti bagian yang berubah
- "Bagaimana jika fitur React tertentu memang dibutuhkan?"
- Dalam beberapa kasus, React memang bisa lebih cocok
- Namun dalam praktiknya, sering kali orang secara kebiasaan memilih alat yang sebenarnya hanya dibutuhkan untuk sebagian kecil dari keseluruhan masalah
- Mengapa memilih HTMX?
- Tim gagal bukan karena salah framework, tetapi karena memilih framework secara berlebihan
- HTMX bertaruh pada kesederhanaan, dan dalam jangka panjang kesederhanaan memberi keuntungan pada maintainability dan produktivitas
Kapan HTMX tidak cocok
- Tool editing kolaboratif real-time (Google Docs, Figma)
- Aplikasi yang membutuhkan komputasi client berskala besar (editor video, tool CAD)
- Arsitektur offline-first (meski tentu beberapa pendekatan bisa digabungkan)
- Kasus yang benar-benar membutuhkan state UI yang kompleks
- Tetapi, apakah Anda benar-benar sedang membangun hal seperti itu?
- Bukankah yang Anda buat sebenarnya hanya dashboard lain, panel admin, situs e-commerce, blog, atau app SaaS yang terdiri dari form, tabel, dan daftar?
- Untuk hal-hal seperti itu, HTMX benar-benar sangat bagus, sampai membuat Anda ingin berkata: "Kenapa dulu dibuat serumit ini?" dan "Ya ampun, selama ini terlalu banyak waktu terbuang"
Jadi, cobalah sekali
- Anda sudah pernah memakai React, pernah memakai Vue, dan mungkin pernah mencoba Angular lalu menyesal, bukan?
- Bahkan meta-framework yang sedang tren minggu ini di Hacker News pun mungkin sudah sempat Anda sentuh
- Coba saja HTMX sekali
- Luangkan sekitar satu hari di akhir pekan
- Pilih satu side project
- Atau pilih internal tool yang tidak terlalu diperhatikan siapa pun
- Atau keluarkan lagi sesuatu yang sudah lama Anda tunda untuk dibuat ulang
- Tambahkan satu tag
<script> dan tulis satu atribut hx-get, lalu lihat sendiri bagaimana ia bekerja
- Dalam skenario terburuk, Anda hanya kehilangan satu hari di akhir pekan, jadi risikonya tidak besar
- Tetapi kemungkinan besar Anda tidak akan membencinya
- Malah bisa jadi Anda akan bertanya-tanya kenapa pengembangan web sampai dibuat serumit ini
Belum ada komentar.