</> Htmx – The Fetch()ening

• htmx 4.0 adalah versi rebuild besar yang sepenuhnya mengganti arsitektur lama berbasis XMLHttpRequest menjadi arsitektur asinkron berpusat pada fetch()
• Cara pewarisan atribut berubah dari implisit menjadi deklarasi eksplisit :inherited, sehingga meningkatkan kejelasan kode dan kemudahan pemeliharaan
• Cache riwayat disederhanakan dari penyimpanan snapshot lokal menjadi mekanisme pemulihan berbasis permintaan jaringan, sehingga keandalannya meningkat
• Berbagai fitur baru seperti streaming response, SSE, DOM morphing, tag <partial>, dan antrean View Transition diintegrasikan ke dalam core
• Dalam jangka panjang, penyederhanaan codebase dan peningkatan skalabilitas dituju, sambil tetap mendukung pengguna 2.0 yang sudah ada

---

Ikhtisar htmx 4.0

• htmx 4.0 menulis ulang keseluruhan arsitektur lama, dengan mencerminkan pengalaman pengembangan fixi.js dan pelajaran dari 5 tahun pemeliharaan
• Perubahan utamanya diringkas menjadi 3 perubahan inti: migrasi ke fetch(), pewarisan atribut eksplisit, dan penyederhanaan cache riwayat

The fetch()ening

• XMLHttpRequest diganti dengan fetch() untuk memodernisasi infrastruktur Ajax
  • Untuk sebagian besar kasus penggunaan, dampaknya tidak besar, tetapi model event berubah mengikuti sifat asinkron fetch()
• Peralihan ini menjadi landasan untuk penyederhanaan kode dan perluasan fitur di masa depan

Pewarisan atribut eksplisit

• Alih-alih pewarisan implisit sebelumnya, kini digunakan modifier :inherited untuk deklarasi eksplisit
  • Contoh:

    <div hx-target:inherited="#output">
        <button hx-post="/up">Like</button>
        <button hx-post="/down">Dislike</button>
    </div>
    

  • Jika hx-target tidak dinyatakan eksplisit, elemen turunannya tidak akan mewarisinya
• Bagi sebagian besar pengguna, ini adalah perubahan upgrade terbesar

Penyederhanaan cache riwayat

• Cache snapshot DOM lokal di htmx 2.0 tidak stabil karena modifikasi pihak ketiga, state tersembunyi, dan sebagainya
• Di 4.0, mekanismenya diubah menjadi pemulihan melalui permintaan jaringan
  • Perluasan cache disediakan sebagai opsi opt-in
• Ini menyederhanakan codebase sekaligus meningkatkan keandalan perilaku default

Elemen yang tetap dipertahankan

• API inti seperti hx-get, hx-post, hx-target, hx-boost, hx-swap, dan hx-trigger tetap sama
• Selain penambahan :inherited, sebagian besar proyek dapat berjalan dengan kode yang ada
• Pemeliharaan jangka panjang dan stabilitas diperkuat

Kebijakan upgrade

• Pengguna 2.0 perlu melakukan proyek upgrade, tetapi 2.0 akan tetap didukung secara permanen
• 4.0 akan dirilis berdampingan dengan 2.x, dan perpindahan latest diperkirakan pada awal 2027
• Akan disediakan extension untuk memulihkan perilaku 2.0

Ringkasan fitur baru

Integrasi streaming response dan SSE

• Memanfaatkan dukungan Readable Streams pada fetch() untuk memungkinkan penggantian DOM parsial
• SSE (Server Sent Events) diintegrasikan kembali sebagai fitur inti, mendukung pembaruan konten secara bertahap

Morphing Swap

• Berdasarkan algoritme Idiomorph, penilaian saat menggabungkan DOM untuk mempertahankan atau menghapus node menjadi lebih baik
• Swap morphInner dan morphOuter disertakan dalam core

Dukungan tag <partial>

• Menyederhanakan sintaks yang sebelumnya rumit pada Out-of-band swap
• <partial> adalah elemen template yang dapat menggunakan atribut standar seperti hx-target dan hx-swap
• Out-of-band swap kembali menjadi penggantian sederhana berbasis id

Peningkatan View Transition

• Antrean transisi (queue) diperkenalkan untuk mencegah benturan visual
• Transisi CSS tetap menggunakan cara lama, sementara runtime asinkron disederhanakan
• Belum diputuskan apakah akan diaktifkan secara default

Stabilisasi urutan event

• Dengan arsitektur asinkron berbasis fetch(), urutan event lebih mudah dijamin
• Diperkenalkan aturan penamaan event baru:
  htmx:<phase>:<system>[:<optional-sub-action>]
  • Contoh: htmx:before:request

Peningkatan skalabilitas

• Berbasis async, disediakan extension untuk preload dan optimistic update
• Siklus request/response/swap dibuka untuk pengembang extension, dan implementasi fetch() dapat diganti
• Perilaku yang diinginkan dapat diwujudkan tanpa hack

Peningkatan hx-on

• Mengadopsi sintaks terstandarisasi hx-on:<event name>
• Dengan dukungan API asinkron, scripting DOM sederhana menjadi mungkin

  <button hx-post="/like"
          hx-on:htmx:after:swap="await timeout('3s'); ctx.newContent[0].remove()">
      Get A Response Then Remove It 3 Seconds Later
  </button>
  

• Tetap berfungsi di lingkungan dengan eval() dinonaktifkan, meski beberapa fungsi terbatas

Arah keseluruhan

• htmx 4.0 bertujuan mengurangi bug dan meningkatkan fitur sambil mempertahankan pengalaman penggunaan yang mirip dengan 2.0
• Melalui penyederhanaan kode, struktur yang eksplisit, dan skalabilitas berbasis asinkron, htmx menjadi lebih stabil dan modern

Jadwal pengembangan

• Versi alfa (htmx@4.0.0-alpha1) sudah dirilis saat ini
• Rilis resmi 4.0.0 dijadwalkan pada awal hingga pertengahan 2026
• Awal 2027 dijadwalkan sebagai waktu perpindahan ke latest
• Perkembangan pengembangan dapat dilihat di branch GitHub four dan four.htmx.org

---