HTMX en 2024 : et si on arrêtait de tout faire en React ?

Le constat : on a peut-être trop compliqué les choses

Soyons honnêtes deux minutes. Combien de fois avez-vous créé une simple todo-list avec React, Vite, un state manager, trois hooks personnalisés et un fichier de config Webpack de 200 lignes ? Pendant ce temps, votre grand-mère fait toujours tourner son site en PHP-MySQL depuis 2008 sans jamais avoir eu besoin de npm install.

C'est exactement le constat qui a donné naissance à HTMX, une bibliothèque qui permet de faire des requêtes AJAX, des transitions CSS, des WebSockets et du Server-Sent Events... directement depuis vos attributs HTML. Oui, vous avez bien lu : depuis le HTML.

Le principe en une phrase

HTMX part d'une idée toute simple : et si le HTML pouvait faire bien plus que ce que le W3C avait prévu en 1999 ? Au lieu d'écrire du JavaScript pour intercepter un clic, faire un fetch, parser du JSON et mettre à jour le DOM, on écrit directement dans la balise ce qu'on veut qu'il se passe.

Un exemple concret

Imaginons un bouton qui charge des commentaires sans recharger la page. En React, il vous faudrait un composant, un useState, un useEffect, et probablement un morceau de votre âme. En HTMX, voici à quoi ça ressemble :

<button hx-get="/commentaires" hx-target="#zone-commentaires" hx-swap="innerHTML">
  Charger les commentaires
</button>

<div id="zone-commentaires"></div>

C'est tout. Vraiment tout. Le clic déclenche une requête GET vers /commentaires, le serveur renvoie un bout de HTML (pas du JSON !), et HTMX vient injecter ce HTML directement dans la div ciblée. Pas de framework, pas de virtual DOM, pas de build compliqué.

Pourquoi ça fait autant parler en 2024 ?

Le mouvement autour d'HTMX s'inscrit dans une tendance plus large qu'on appelle le "HTML-over-the-wire". L'idée est simple : plutôt que d'envoyer du JSON au client et de lui demander de reconstruire l'interface, le serveur envoie directement le HTML final. C'est le retour en force du bon vieux rendu côté serveur, mais avec des super-pouvoirs modernes.

• Moins de JavaScript à maintenir : votre logique métier reste côté serveur, là où elle est censée être.
• Un poids plume : 14 Ko minifié, contre plusieurs centaines de Ko pour un bundle React classique.
• Un apprentissage rapide : si vous connaissez le HTML, vous connaissez 80% d'HTMX.
• Une meilleure accessibilité par défaut : le HTML généré côté serveur est souvent plus propre et sémantique.

Les attributs qui changent la vie

HTMX fonctionne avec une poignée d'attributs très intuitifs. Voici les stars du show :

• hx-get, hx-post, hx-put, hx-delete : définissent la méthode HTTP et l'URL à appeler.
• hx-trigger : précise l'événement déclencheur (clic, focus, survol, saisie clavier...).
• hx-target : indique quel élément du DOM doit être mis à jour.
• hx-swap : définit comment le contenu s'insère (remplacement, ajout avant/après, etc.).

Un exemple qui va parler à tous ceux qui ont galéré avec la recherche en temps réel :

<input type="text" name="recherche"
  hx-post="/recherche"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#resultats">

<div id="resultats"></div>

Cette barre de recherche envoie une requête au serveur 300 millisecondes après que l'utilisateur a arrêté de taper, et met à jour les résultats automatiquement. En React, ça vous aurait pris un debounce custom, un état de chargement, une gestion d'erreurs... Ici, trois lignes suffisent.

HTMX, la solution miracle ?

Alors non, on ne va pas vous mentir : HTMX ne remplace pas React ou Vue dans tous les cas. Si vous développez une application ultra interactive façon éditeur Figma ou un tableau de bord avec des dizaines d'interactions client complexes et de l'état partagé partout, un framework JS classique reste souvent plus adapté.

Mais pour tout ce qui est sites vitrines dynamiques, back-offices, formulaires interactifs, dashboards simples ou applications CRUD (Create, Read, Update, Delete), HTMX est redoutablement efficace. Et le meilleur ? Il fonctionne avec n'importe quel langage backend : PHP, Node.js, Python (Django, Flask), Ruby on Rails, Go... Il suffit que votre serveur sache renvoyer du HTML.

Un combo qui cartonne : HTMX + Alpine.js

Pour les petites interactions purement côté client (afficher/masquer un menu, gérer un onglet actif), beaucoup de développeurs associent HTMX à Alpine.js, une autre bibliothèque minimaliste. Ensemble, ils forment un duo redoutable qu'on surnomme parfois le "stack HTMX" : léger, rapide à développer, et sans configuration de build complexe.

Comment se lancer ?

La beauté de la chose, c'est qu'il n'y a quasiment rien à installer. Une simple balise script suffit :

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

Et voilà, vous pouvez commencer à ajouter des attributs hx-* partout dans votre HTML existant. Pas de npm create, pas de configuration Webpack, pas de fichier de 40 dépendances dans votre package.json.

Notre avis chez YouOnline

Chez YouOnline, on aime les outils qui vont droit au but. HTMX incarne parfaitement cette philosophie : produire des sites web rapides, maintenables et agréables à développer, sans complexifier inutilement l'architecture. Pour de nombreux projets clients, notamment les sites institutionnels avec des besoins d'interactivité modérés (formulaires, filtres, recherches, pagination dynamique), c'est devenu un choix technique que l'on considère sérieusement au même titre que les frameworks JavaScript plus lourds.

La morale de l'histoire ? Le développement web moderne ne rime pas forcément avec complexité. Parfois, revenir aux fondamentaux du web (le HTML, le HTTP, le serveur) avec quelques ajustements bien pensés suffit à créer des expériences utilisateur fluides et modernes. HTMX nous le rappelle avec brio, et c'est peut-être ça, la vraie innovation de 2024 : simplifier plutôt que complexifier.