Pourquoi vous devriez choisir HTMX pour votre prochain projet parallèle basé sur le web - et abandonner le MPA encombrant et le SPA complexe.

Je construis beaucoup de projets annexes, donc je suis toujours à la recherche de technologies et de paradigmes qui me permettent de les réaliser plus rapidement et à moindre coût tout en maintenant une qualité similaire. Au cours des derniers mois, j'ai expérimenté la création d'applications web avec des outils low-js comme HTMX et Alpine.

Dans ce post, je vais partager pourquoi je pense que HTMX est un excellent choix pour construire des applications web plus rapidement et à moindre coût, et pourquoi il fait désormais partie intégrante de ma pile technologique - La pile HAM.

MPA vs SPA
MPA vs SPA

Applications Multi-Page (MPA)
Au début, nous avions des applications multi-pages (MPA).

Chaque URL mène à une page web
Cette page web est rendue côté serveur et renvoyée à l'utilisateur
Si vous devez mettre à jour quelque chose sur la page ( parce qu'un utilisateur a changé quelque chose ou qu'elle doit se rafraîchir) alors la page entière doit se recharger.
Cela fonctionne bien, mais cela donne une sensation très lente et encombrante parce que vous devez tout recharger chaque fois qu'une chose sur la page change. Pour un exemple de cela - pensez à un site Web du gouvernement de l'État, la plupart de ceux-ci sont encore des MPA à l'ancienne et ils semblent vieux et encombrants par rapport à la plupart des applications modernes.

Avantages et inconvénients de MPA

Avantages : Simple à construire
Inconvénients : Se sent lent et peu réactif en raison des rafraîchissements.
Applications à page unique (SPA)
Pour résoudre cela, des applications monopages (SPA) ont été créées.

Une URL charge une grande charge utile JS contenant une multitude de logiques d'application
Ce JS prend en charge le rendu de la page
Il utilise un état interne pour déterminer à quoi la page doit ressembler et effectue des transferts de données en arrière-plan, de sorte qu'il n'a besoin de mettre à jour que les parties de la page qui doivent changer.
Cela semble mieux pour l'utilisateur car les changements semblent plus rapides. La page ne se met à jour que là où c'est nécessaire et nous n'avons pas besoin d'un rafraîchissement complet de la page pour changer les données. La plupart des applications / sites Web aujourd'hui ressentent cela car cela offre généralement une meilleure expérience utilisateur.

Avantages : Expériences utilisateur "modernes" riches
Inconvénients : Complexe à grande échelle - gérer les transferts de données (graphQL a été conçu pour cela), abstractions et tailles de charge utile de la logique de l'application.
Donc en général :

Applications Multi-Page (MPA) - Faciles à construire mais difficiles à rendre riches en expériences utilisateur "modernes"
Applications monopages (SPA) - Complexes à construire mais pouvant offrir des expériences utilisateur "modernes" riches
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

Inspiration d'image de u/Abhilash26 sur r/htmx.

HTMX existe depuis plusieurs années mais a vraiment gagné en popularité ces dernières années. L'engouement n'est pas infondé - il vous permet souvent de créer des applications web modernes plus rapidement et à moindre coût qu'un SPA.

HTMX étend essentiellement HTML afin qu'il puisse effectuer des rechargements partiels de page.

Tout élément peut spécifier comment il peut récupérer des données à jour et quand il doit le faire.
L'élément peut alors spécifier quoi faire avec les nouvelles données - se remplacer lui-même ou remplacer d'autres éléments sur la page.
Si nous revenons à la comparaison MPA contre SPA, nous pouvons voir que le manque de rechargements de pages partiels est vraiment la principale chose qui freine les MPA. Donc, ajouter cette capacité dans un MPA permet largement d'obtenir la plupart des riches expériences utilisateur "modernes" d'un SPA avec le niveau de complexité d'un MPA.

HTMX pour des projets annexes
L'objectif d'un projet secondaire est souvent simplement de créer quelque chose. Vous n'avez probablement pas une équipe d'ingénieurs ou un trésor de fonds de capital-risque pour le faire - c'est juste vous et votre ordinateur.

Donc, réduire le coût de construction - en temps et en argent - est crucial pour rendre un projet secondaire réussi.

De mon point de vue, HTMX offre un excellent équilibre entre vous permettant de créer des applications modernes avec une complexité très faible ( et donc un coût en temps et en argent ). Ainsi, cela est devenu une partie essentielle de ma pile technologique - la pile HAM.

Suivant
Md Saidur Rahman