Mengapa Anda harus memilih HTMX untuk proyek sampingan berbasis web Anda selanjutnya - dan meninggalkan MPA yang rumit serta SPA yang kompleks

Saya membangun banyak proyek sampingan jadi saya selalu mencari teknologi dan paradigma yang memungkinkan saya untuk membangunnya lebih cepat dan lebih murah dengan kualitas yang serupa. Selama beberapa bulan terakhir, saya telah bereksperimen dengan membangun aplikasi web menggunakan alat low-js seperti HTMX dan Alpine.

Dalam postingan ini, saya akan berbagi mengapa saya berpikir HTMX adalah pilihan yang hebat untuk membangun aplikasi web dengan lebih cepat dan lebih murah dan mengapa sekarang ini menjadi bagian inti dari tumpukan teknologi saya - Tumpukan HAM.

MPA vs SPA
MPA vs SPA

Aplikasi Multi-Halaman (MPA)
Pada awalnya kami memiliki Aplikasi Multi-Halaman (MPA).

Setiap URL menuju ke halaman web
Halaman web ini dirender di sisi server dan dikirim kembali ke pengguna
Jika Anda perlu memperbarui sesuatu di halaman ( karena seorang pengguna mengubah sesuatu atau perlu menyegarkan ) maka seluruh halaman perlu dimuat ulang.
Ini bekerja dengan baik tetapi memberikan rasa yang sangat lambat / canggung karena Anda perlu memuat ULANG SEMUA setiap kali satu hal di halaman berubah. Sebagai contoh - pikirkan tentang situs web pemerintah negara bagian, kebanyakan dari mereka masih menggunakan MPA jadul dan terasa tua dan canggung dibandingkan dengan sebagian besar aplikasi modern.

Kelebihan dan Kekurangan MPA

Pro: Mudah untuk dibangun
Kekurangan: Terasa lambat dan canggung karena penyegaran
Aplikasi Halaman Tunggal (SPA)
Untuk mengatasi ini, Aplikasi Halaman Tunggal (SPA) dibuat.

Sebuah URL memuat beban JS besar yang berisi banyak logika aplikasi
JS ini mengambil alih rendering halaman
Ini menggunakan status internal untuk menentukan seperti apa tampilan halaman dan melakukan transfer data di belakang layar sehingga hanya perlu memperbarui bagian halaman yang perlu diubah.
Ini terasa lebih baik bagi pengguna karena perubahan terasa lebih cepat. Halaman hanya diperbarui di tempat yang diperlukan dan kita tidak memerlukan penyegaran halaman penuh untuk mengubah data. Kebanyakan aplikasi / situs web saat ini terasa seperti ini karena umumnya memberikan pengalaman pengguna yang lebih baik.

Kelebihan: Pengalaman pengguna "modern" yang kaya
Kekurangan: Kompleks pada skala - menangani transfer data (graphQL dirancang untuk ini), abstraksi, dan ukuran payload logika aplikasi
Jadi secara umum:

Aplikasi Multi-Halaman (MPA) - Mudah dibangun tetapi sulit untuk mendapatkan pengalaman pengguna "modern" yang kaya
Aplikasi Halaman Tunggal (SPA) - Kompleks untuk dibangun tetapi dapat mencapai pengalaman pengguna "modern" yang kaya
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

Inspirasi gambar dari u/Abhilash26 di r/htmx.

HTMX telah ada selama beberapa tahun tetapi benar-benar mendapatkan hype besar dalam setahun terakhir. Hype ini tidak tanpa dasar - itu sering memungkinkan Anda untuk membangun aplikasi web modern lebih cepat dan lebih murah daripada SPA.

HTMX pada dasarnya memperluas HTML sehingga dapat melakukan pemuatan ulang sebagian halaman.

Setiap elemen dapat menentukan bagaimana ia dapat mengambil data terkini dan kapan seharusnya melakukannya.
Elemen tersebut kemudian dapat menentukan apa yang harus dilakukan dengan data baru - menggantikan dirinya sendiri atau elemen lain di halaman.
Jika kita melihat kembali perbandingan MPA vs SPA, kita dapat melihat bahwa kurangnya pemuatan ulang halaman parsial adalah hal utama yang menghambat MPA. Jadi menambahkan kemampuan ini ke dalam MPA secara luas memungkinkan Anda mendapatkan sebagian besar pengalaman pengguna "modern" yang kaya dari SPA dengan tingkat kompleksitas MPA.

HTMX untuk Proyek Sampingan
Tujuan dari proyek sampingan sering kali hanya untuk membangun sesuatu. Anda kemungkinan tidak memiliki tim insinyur atau dana VC untuk melakukannya - hanya Anda dan komputer Anda.

Jadi menurunkan biaya pembangunan - dalam waktu dan uang - sangat penting untuk membuat proyek sampingan menjadi sukses.

Dari perspektif saya, HTMX memberikan keseimbangan yang baik antara memungkinkan Anda membangun aplikasi modern dengan kompleksitas yang sangat rendah (dan dengan demikian biaya waktu dan uang ). Oleh karena itu, ini telah menjadi bagian inti dari tumpukan teknologi saya - HAM Stack.

Selanjutnya
Md Saidur Rahman