HTMX : la contre-attaque du HTML pour des sites web rapides sans usine à gaz JavaScript

Le constat : on a peut-être trop compliqué le web

Soyons honnêtes deux minutes. Pour afficher une simple liste qui se met à jour sans recharger la page, combien de développeurs se retrouvent aujourd'hui à installer un framework JavaScript complet, un bundler, un gestionnaire d'état, des hooks, des composants, et 400 Mo de node_modules ? Beaucoup trop, clairement.

Le web moderne a pris l'habitude de tout transformer en Single Page Application (SPA), même quand ce n'est absolument pas nécessaire. Résultat : des temps de chargement qui explosent, des bundles JavaScript énormes, et des équipes qui passent plus de temps à configurer Webpack qu'à développer des fonctionnalités utiles. C'est dans ce contexte qu'HTMX débarque avec une proposition presque provocante : "Et si on utilisait le HTML pour faire ce que le HTML sait déjà faire, mais en mieux ?"

HTMX, c'est quoi concrètement ?

HTMX est une petite librairie JavaScript (moins de 14 Ko compressée, autant dire rien du tout) qui permet d'ajouter des comportements dynamiques directement dans votre HTML, via des attributs. Pas de JSX, pas de virtual DOM, pas de build complexe. Juste du HTML enrichi.

Le principe est simple : au lieu de faire des requêtes AJAX en JavaScript pour récupérer du JSON et ensuite manipuler le DOM à la main, HTMX fait des requêtes HTTP qui renvoient directement du HTML. Ce HTML vient ensuite remplacer ou compléter une partie de votre page. C'est tout. Et c'est justement ça qui est génial.

Un exemple qui parle de lui-même

Imaginons un bouton "J'aime" sur un article de blog. En JavaScript classique (ou avec un framework), il faudrait écrire un gestionnaire d'événement, faire un fetch, parser la réponse, mettre à jour l'état, re-render le composant... Avec HTMX, ça ressemble à ça :

<button hx-post="/articles/42/like" hx-swap="outerHTML">
  ???? J'aime (12)
</button>

Quand l'utilisateur clique, HTMX envoie automatiquement une requête POST vers /articles/42/like. Le serveur répond avec un fragment HTML, par exemple :

<button hx-post="/articles/42/unlike" hx-swap="outerHTML">
  ❤️ J'aime (13)
</button>

Et HTMX remplace automatiquement l'ancien bouton par le nouveau. Pas de JSON, pas de manipulation du DOM à la main, pas de state management. Le serveur reste la source de vérité, comme au bon vieux temps, mais avec une expérience utilisateur fluide digne d'une SPA.

Les attributs magiques à connaître

HTMX fonctionne autour d'une poignée d'attributs HTML qui couvrent 90% des besoins d'interactivité :

• hx-get / hx-post / hx-put / hx-delete : définissent quelle requête HTTP envoyer et vers quelle URL
• hx-trigger : précise l'événement qui déclenche la requête (clic, survol, saisie clavier, scroll...)
• hx-target : indique quel élément du DOM doit être mis à jour avec la réponse
• hx-swap : définit comment la réponse remplace le contenu (remplacement total, ajout avant/après, etc.)
• hx-indicator : affiche un petit loader pendant que la requête est en cours

Un exemple classique : la recherche en temps réel façon "autocomplete", sans écrire une ligne de JavaScript personnalisé :

<input type="text" name="q"
  hx-get="/search"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#resultats"
  placeholder="Rechercher..." />

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

À chaque frappe (avec un petit délai de 300ms pour éviter de spammer le serveur), une requête part automatiquement, et les résultats renvoyés par le serveur viennent remplir la div #resultats. C'est fluide, c'est simple, et ça tient en trois lignes.

Pourquoi c'est pertinent en 2024 (et pas juste nostalgique)

Moins de JavaScript, moins de dette technique

Un des gros problèmes des frameworks front-end modernes, c'est leur cycle de vie. Entre les montées de version de React, les breaking changes, les migrations de Vue 2 vers Vue 3... la dette technique s'accumule vite. HTMX, lui, mise sur la stabilité du HTML et du HTTP, des standards vieux de 30 ans qui ne bougent pas. Un code HTMX écrit aujourd'hui a de grandes chances de fonctionner encore parfaitement dans 10 ans.

Performance et accessibilité

Moins de JavaScript côté client signifie des pages qui se chargent plus vite, surtout sur mobile ou avec une connexion moyenne. Et comme on reste proche du HTML natif, l'accessibilité (lecteurs d'écran, navigation clavier) est souvent meilleure par défaut qu'avec des composants JS custom mal pensés.

Simplicité pour les équipes back-end

C'est probablement l'argument le plus fort pour les agences comme la nôtre : avec HTMX, un développeur back-end qui maîtrise Laravel, Symfony, Django ou Node peut construire des interfaces riches sans devenir expert en React du jour au lendemain. Pas besoin d'API REST séparée avec authentification JWT juste pour afficher une liste paginée. Le serveur rend du HTML, point final.

HTMX a-t-il des limites ?

Soyons objectifs, HTMX n'est pas la solution miracle pour tous les projets. Pour des applications très interactives avec beaucoup d'état client complexe (un éditeur collaboratif type Figma, un tableau de bord avec des graphiques qui s'entrecroisent en temps réel), un framework comme React ou Vue reste souvent plus adapté, car la gestion fine du state côté client y est plus mature.

De plus, HTMX fonctionne très bien avec des architectures server-rendered classiques, mais il demande un vrai changement de philosophie pour les équipes habituées au tout-SPA avec API JSON. Il faut accepter que le serveur fasse le gros du travail de rendu, ce qui implique parfois de revoir son architecture backend.

Comment démarrer avec HTMX aujourd'hui ?

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

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

Et voilà, vous pouvez commencer à ajouter des attributs hx-* dans votre HTML existant, qu'il soit généré par PHP, par un template Twig, par Django ou n'importe quel moteur de rendu côté serveur. Pas de build step obligatoire, pas de configuration complexe. C'est littéralement copier-coller et ça marche.

Pour aller plus loin, l'écosystème propose aussi des extensions sympas comme hyperscript, un petit langage de script complémentaire pour gérer des interactions purement côté client (animations, toggles) sans sortir l'artillerie lourde de JavaScript.

Notre avis chez YouOnline

Chez YouOnline, on aime les outils qui remettent du bon sens dans le développement web. HTMX ne va pas remplacer React sur tous nos projets, mais c'est devenu un allié précieux pour les sites vitrines dynamiques, les back-offices, les interfaces d'administration ou les applications métiers où la simplicité et la rapidité de développement priment sur la complexité d'une SPA complète. C'est l'outil parfait pour livrer vite, bien, et sans y laisser des semaines de configuration.

Le message à retenir : tous les projets n'ont pas besoin d'un framework JavaScript de 2 Mo pour fonctionner. Parfois, la meilleure solution technique est aussi la plus simple. Et ça, c'est peut-être la vraie révolution d'HTMX : nous rappeler qu'on a le droit de choisir la simplicité.