Dahulu, saya sering memilih Vue.js secara refleks. Setiap projek bermula dengan cara yang sama: pasang CLI, tetapkan router, konfigurasi store, dan bungkus keseluruhannya dalam kerangka aplikasi satu halaman (SPA). Tidak kira sama ada saya sedang membina papan pemuka masa nyata atau borang hubungan yang ringkas. Vue adalah pilihan utama saya, dan saya menganggap apa-apa yang lebih ringan sebagai satu langkah ke belakang.
Tabiat ini adalah perkara biasa. Jika anda telah menghabiskan masa bertahun-tahun dalam ekosistem React atau Vue, model SPA mula terasa tidak dapat dielakkan. Anda berhenti bertanya sama ada anda benar-benar memerlukan mekanisma sebanyak itu. Anda terus menggunakannya. Lama-kelamaan, saya menyedari sesuatu yang membimbangkan. Saya menyediakan Vuex stores untuk skrin admin yang hanya perlu menukar status dan menyegarkan jadual. Saya menyusun logik fetch untuk laman pendaratan yang hanya perlu menghantar alamat e-mel. Kerumitan itu bukan datang daripada masalah yang dihadapi, tetapi daripada pilihan alatan saya.
Kemudian, saya mula menggunakan HTMX. Peralihan itu lebih tenang daripada yang saya jangkakan, tetapi ia mengubah cara saya memilih stack saya.
Apa Sebenarnya yang Dilakukan oleh HTMX
Kebanyakan perbincangan dalam talian tersilap dalam hal ini. Orang ramai membingkaikannya sebagai pertempuran antara Vue lawan React lawan HTMX. Perbandingan itu langsung tidak kena pada tempatnya. HTMX bukanlah rangka kerja SPA. Ia tidak bertujuan untuk menggantikan Vue. Ia adalah sebuah perpustakaan (library) yang membolehkan HTML melakukan lebih daripada apa yang diberikan oleh pelayar secara sedia ada.
Daripada menulis komponen yang dimuatkan (mount), mengambil JSON, memprosesnya ke dalam keadaan tempatan (local state), dan memaparkan semula senarai, anda hanya menambah atribut pada butang. Pelayan memulangkan fragmen HTML, bukannya muatan data (payload). Pelayar menukar kandungan tersebut ke tempatnya. Anda masih bekerja dengan halaman yang dijana pelayan (server-rendered), tetapi anda mendapat interaktiviti yang biasanya dikaitkan dengan bahagian hadapan (front end) JavaScript yang berat.
Ini bukanlah satu penurunan taraf. Ia adalah model yang berbeza. Vue meminta anda membina aplikasi bahagian pelanggan (client-side) dan menguruskan keadaan (state) di dalam pelayar. HTMX meminta anda menyimpan keadaan pada pelayan dan menghantar HTML melalui rangkaian. Oleh kerana kedua-duanya menyelesaikan jenis masalah yang berbeza, kedua-duanya boleh wujud bersama dalam projek yang sama tanpa konflik.
Bila Vue Masih Merupakan Pilihan yang Tepat
Antara muka yang kompleks memerlukan Vue. Jika anda sedang membina papan pemuka analitik masa nyata dengan widget seret-dan-lepas (drag-and-drop), penapisan bersarang (nested filtering), dan carta langsung yang berkongsi data merentasi pelbagai paparan, anda memerlukan rangka kerja reaktif. Pelayar harus memiliki keadaan (state) tersebut. Anda tidak mahu melakukan perjalanan balik (round-trip) ke pelayan setiap kali pengguna menyeret carta atau menukar kumpulan penapis. Model komponen, sistem reaktiviti, dan ekosistem Vue dibina khusus untuk tujuan ini.
Perkara yang sama berlaku untuk aplikasi pengguna yang sangat interaktif. Fikirkan tentang alat reka bentuk, papan putih kolaboratif, atau penyusun muzik (music sequencer). Ini bukanlah dokumen dengan butang. Ia adalah aplikasi yang hidup di dalam pelayar. Untuk kerja sebegitu, Vue tetap menjadi pilihan utama saya.
Di Mana HTMX Mengambil Alih
Kemenangan yang paling jelas muncul apabila saya melihat bahagian-bahagian yang membosankan dalam projek saya. Panel admin adalah yang pertama berubah. Backend admin biasanya memerlukan jadual rekod, beberapa butang tindakan, penapis berpaginasi (paginated filters), dan satu atau dua borang. Tiada satu pun daripada itu memerlukan virtual DOM. Apa yang diperlukan hanyalah kemas kini separa yang pantas.
Dengan HTMX, butang padam menjadi satu tag dengan atribut hx-delete dan hx-target. Klik butang tersebut, pelayar menghantar permintaan, pelayan bertindak balas dengan baris jadual yang telah disegarkan