Apa itu HTMX? — HTMX

Pernah lihat aplikasi React modern yang ribet banget setup-nya? Webpack, Babel, npm, build pipeline, hydration, hooks, state management — semua itu cuma untuk…

htmx adalah library JavaScript kecil yang membuat elemen HTML bisa bertanya ke server sendiri. Kamu cukup menambah atribut berawalan hx- di tag-nya: elemen itu mengirim request (permintaan dari browser ke server), server membalas dengan potongan HTML, lalu htmx menaruh potongan itu di bagian halaman yang kamu tunjuk. Bagian lain gak disentuh, dan halamannya gak di-reload. Bayangin papan order di meja Laundry Bu Rini. Waktu cucian #12 pindah dari "Dicuci" ke "Disetrika", Bu Rini gak menghapus lalu menulis ulang seluruh papan. Dia menghapus satu kotak status, lalu menulis yang baru. Link biasa itu menulis ulang seluruh papan. htmx cuma mengganti satu kotak itu.

🧪 Tebakan cepat: Tombol "Cek status" di papan order Bu Rini mengambil status terbaru dari server dan menaruhnya di halaman tanpa reload. Berapa baris JavaScript yang harus kamu tulis sendiri untuk itu? Jawabannya ada di bagian "Apa yang terjadi saat tombolnya diklik".

Pasang htmx dengan satu tag script

<script src="https://unpkg.com/[email protected]"></script>

Tombol pertama: Cek status

Ini sepotong papan order Bu Rini. Halamannya dirender server, dan cucian #12 masih tertulis "Dicuci".

<ul id="papan-order">
  <li id="order-12">
    #12 Pak Darto, 3 kg: <span id="status-12">Dicuci</span>
    <button hx-get="/order/12/status" hx-target="#status-12">
      Cek status
    </button>
  </li>
</ul>

hx-get dan hx-target itu atribut HTML biasa. Browser cuma menyimpannya, htmx yang membacanya. Itulah inti htmx: fitur AJAX (request di belakang layar tanpa reload) lewat atribut HTML.

Apa yang terjadi saat tombolnya diklik

Langkah Yang terjadi
1. Klik htmx melihat hx-get di tombol yang diklik
2. Request browser mengirim GET /order/12/status, plus header HX-Request: true (header adalah keterangan tambahan yang ikut di request) supaya server tahu ini dari htmx
3. Balasan server membalas HTML: Disetrika, cuma 9 byte
4. Tukar htmx menjadikan balasan itu isi #status-12. Bagian lain halaman tetap

Sebelum diklik halamannya bertuliskan #12 Pak Darto, 3 kg: Dicuci, sesudahnya #12 Pak Darto, 3 kg: Disetrika. Baris JavaScript yang kamu tulis: 0. Itu jawaban tebakannya. JavaScript-nya tetap ada, tapi di dalam htmx, ditulis sekali oleh pembuatnya dan dipakai semua tombolmu.

Server membalas HTML, bukan JSON

Update yang sama bisa dikerjakan tiga cara. Ukurannya diukur di Lab halaman ini, untuk status yang sama:

Cara Yang dikirim server Ukuran JavaScript buatanmu
Link biasa <a href="/papan"> seluruh halaman 1.136 byte 0 baris, tapi seluruh halaman digambar ulang
fetch + JSON {"id":12,"status":"Disetrika"} 30 byte 5 baris
htmx Disetrika 9 byte 0 baris

Cara JSON butuh kode seperti ini di halaman:

<button id="cek-12">Cek status</button>

<script>
  document.querySelector('#cek-12').addEventListener('click', async () => {
    const res = await fetch('/api/order/12')
    const order = await res.json()
    document.querySelector('#status-12').textContent = order.status
  })
</script>

Kapan htmx cocok

⚠️ Jebakan yang sering ketemu

TL;DR: htmx memberi elemen HTML kemampuan AJAX lewat atribut hx-, dipasang dengan satu tag <script src="https://unpkg.com/[email protected]">. hx-get="/order/12/status" mengirim request GET saat tombol diklik, dan hx-target="#status-12" menunjuk elemen yang menerima balasannya. Server membalas potongan HTML (Disetrika, 9 byte), bukan JSON, dan htmx menaruhnya tanpa reload, dengan 0 baris JavaScript buatanmu. Link biasa mengirim ulang seluruh halaman (1.136 byte), fetch + JSON butuh kode render sendiri. htmx cocok untuk aplikasi yang dirender server, kurang cocok untuk aplikasi yang state-nya hidup di browser.

Yang akan kamu pelajari