Dulu saya selalu menggunakan Vue.js secara refleks. Setiap proyek dimulai dengan cara yang sama: menginstal CLI, mengatur router, mengonfigurasi store, dan membungkus semuanya dalam sebuah shell single-page application. Tidak peduli apakah saya sedang membangun dashboard real-time atau formulir kontak sederhana. Vue adalah pilihan default saya, dan saya berasumsi bahwa apa pun yang lebih ringan adalah sebuah langkah mundur.
Kebiasaan ini umum terjadi. Jika Anda telah menghabiskan bertahun-tahun di dalam ekosistem React atau Vue, model SPA mulai terasa tak terelakkan. Anda berhenti bertanya apakah Anda benar-benar membutuhkan mesin sebanyak itu. Anda langsung menggunakannya. Seiring berjalannya waktu, saya menyadari sesuatu yang mengkhawatirkan. Saya menyusun Vuex store untuk layar admin yang hanya perlu mengubah status dan menyegarkan tabel. Saya menyusun logika fetch untuk landing page yang hanya perlu mengirimkan alamat email. Kompleksitasnya bukan berasal dari masalahnya. Melainkan dari pilihan alat saya.
Lalu saya mulai menggunakan HTMX. Perubahannya lebih tenang dari yang saya duga, tetapi hal itu mengubah cara saya memilih stack saya.
Apa yang Sebenarnya Dilakukan HTMX
Kebanyakan diskusi online salah memahami hal ini. Orang-orang membingkainya sebagai pertarungan antara Vue versus React versus HTMX. Perbandingan itu sama sekali meleset dari intinya. HTMX bukanlah framework SPA. Ia tidak ingin menggantikan Vue. Ia adalah sebuah library yang membuat HTML bisa melakukan lebih banyak hal daripada yang disediakan browser secara bawaan.
Alih-alih menulis komponen yang melakukan mounting, mengambil JSON, mem-parsing-nya ke dalam state lokal, dan me-render ulang sebuah daftar, Anda cukup menambahkan atribut pada sebuah tombol. Server mengembalikan fragmen HTML, bukan payload data. Browser menukar konten tersebut ke tempatnya. Anda masih bekerja dengan halaman yang di-render di sisi server, tetapi Anda mendapatkan interaktivitas yang biasanya dikaitkan dengan front-end JavaScript yang berat.
Ini bukan sebuah penurunan kualitas. Ini adalah model yang berbeda. Vue meminta Anda untuk membangun aplikasi sisi klien dan mengelola state di browser. HTMX meminta Anda untuk menyimpan state di server dan mengirimkan HTML melalui jaringan. Karena keduanya menyelesaikan jenis masalah yang berbeda, keduanya dapat berdampingan dalam proyek yang sama tanpa konflik.
Kapan Vue Masih Menjadi Pilihan yang Tepat
Antarmuka yang kompleks membutuhkan Vue. Jika Anda sedang membangun dashboard analitik real-time dengan widget drag-and-drop, penyaringan bersarang, dan grafik live yang berbagi data di berbagai tampilan, Anda membutuhkan framework reaktif. Browser harus mengelola state tersebut. Anda tidak ingin melakukan request bolak-balik ke server setiap kali pengguna menggeser grafik atau mengubah grup filter. Model komponen, sistem reaktivitas, dan ekosistem Vue dibangun tepat untuk hal ini.
Hal yang sama berlaku untuk aplikasi konsumen yang sangat interaktif. Bayangkan sebuah alat desain, papan tulis kolaboratif, atau sequencer musik. Ini bukan sekadar dokumen dengan tombol. Ini adalah aplikasi yang hidup di dalam browser. Untuk pekerjaan seperti itu, Vue tetap menjadi pilihan utama saya.
Di Mana HTMX Mengambil Alih
Kemenangan paling nyata terasa saat saya melihat bagian-bagian yang membosankan dari proyek saya. Panel admin adalah yang pertama kali berubah. Backend admin biasanya membutuhkan tabel berisi catatan, beberapa tombol aksi, filter berhalaman, dan satu atau dua formulir. Tidak ada satu pun dari hal itu yang membutuhkan virtual DOM. Yang dibutuhkan adalah pembaruan parsial yang cepat.
Dengan HTMX, tombol hapus menjadi sebuah tag dengan atribut hx-delete dan hx-target. Klik tombol tersebut, browser mengirimkan permintaan, server merespons dengan baris tabel yang telah diperbarui