Introduction
React et Vue dominent aujourd'hui le monde du développement web. Angular, quant à lui, reste très utilisé notamment dans des projets legacy. Ces librairies permettent de créer des applications riches et interactives, mais au prix d'une complexité importante (gestion de l'état, nombre de packages, configurations lourdes). Pour des projets plus simples, leur utilisation peut sembler disproportionnée.
Ainsi, HTMX offre une alternative intéressante en évitant l'utilisation d'outils supplémentaires. Cette librairie, qui s'appuie sur des concepts comme AJAX, permet de dynamiser son application tout en concervant une base de code simple. Même s'il n'est pas récent (sortie fin 2020), HTMX peut apporter une approche moderne à son application.
HTMX : Principaux concepts et avantages
HTMX est une bibliothèque JavaScript minimaliste qui facilite l'ajout de comportements dynamiques à des applications web. Contrairement à React ou Vue, il reste simple d'utilisation (pas de gestion de state, des attributs à rajouter dans les balises HTML) et évite un écosystème complexe. Voici comment HTMX fonctionne :
- Server-Side Rendering (SSR) : HTMX mise sur le serveur pour générer et renvoyer le HTML dynamique. L'interaction utilisateur provoque des requêtes HTTP, et les réponses du serveur mettent à jour directement le DOM.
- Attributs HTML : Les interactions s'appuient sur des attributs comme <span class="css-span">hx-get</span>, <span class="css-span">hx-post</span> et <span class="css-span">hx-swap</span>. Ces derniers définissent le type de requête ainsi que la façon de mettre à jour le DOM.
Avantages de HTMX
- Simplicité : Une courbe d'apprentissage rapide, sans besoin de configuration complexe.
- Performance : Pas de surcharge due à un framework ou à des librairies lourdes. Se base sur des requêtes AJAX.
- Approche progressive : Facile à intégrer dans des projets existants, vous pouvez utiliser HTMX pour certaines parties de votre application sans tout réécrire.
Comment bien démarrer un projet avec HTMX ?
Installation de HTMX
HTMX est simple à installer : il suffit de l’ajouter à votre projet via un fichier local ou un CDN (Content Delivery Network). Il s'agit d'une bibliothèque très légère (15.7kB) et constitue le seul code JavaScript nécessaire côté front-end. Voici un exemple d'intégration avec un CDN :
<script src="https://unpkg.com/htmx.org@2.0.4"></script>Aucune autre dépendance n’est requise.
Mise en place du server
Pour utiliser HTMX, un serveur capable de renvoyer du HTML est nécessaire. Dans cet article, j'utilise un serveur Golang pour cet exemple. Ci-dessous vous trouverez la base du code dont je me suis servit par la suite. Je ne m'attarderai cependant pas sur sa mise en place.
Code Golang
<pre><code>
type Templates struct {
templates *template.Template
}
func (t *Templates) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
return t.templates.ExecuteTemplate(w, name, data)
}
func newTemplates() *Templates {
return &Templates{
templates: template.Must(template.ParseGlob("views/*.html")),
}
}
type Data struct {
Count int
}
func main() {
e := echo.New()
data := Data{Count: 0}
e.Renderer = newTemplates()
e.GET("/", func(c echo.Context) error {
return c.Render(200, "index", data)
})
e.POST("/count", func(c echo.Context) error {
data.Count++
return c.Render(200, "count", data)
})
e.Logger.Fatal(e.Start(":1323"))
}</code></pre>
Code HTML
<pre><code>
{{ block "index" .}}
<html lang="en">
<head>
<title>Younup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/htmx.org@1.7.0"></script>
</head>
<body>
{{ template "count" . }}
<button hx-post="/count" hx-swap="outerHTML" hx-target="#count">Increment</button>
</body>
</html>
{{ end }}
{{ block "count" .}}
<span id="count">
Count {{ .Count }}
</span>
{{ end }}</code></pre>
Dynamiser un bouton avec HTMX
HTMX repose sur des attributs HTML spécifiques appelés HX-VERB (hx-get, hx-post, etc.), qui définissent la manière dont les requêtes sont envoyées au serveur.
Ici, nous allons construire progressivement un bouton qui incrémente un compteur en utilisant HTMX. Nous verrons étape par étape comment améliorer son comportement avec les différents attributs proposés par la bibliothèque.
Exemple d'un bouton avec hx-post
Dans cet exemple, le bouton envoie une requête POST. On pourrait s'attendre à simplement voir le compteur s'incrémenter mais le comportement obtenu n'est pas forcément celui attendu.
<pre><code>
<button hx-post="/count">
Increment
</button>
</code></pre>
Correction avec hx-swap
L'attribut <span class="css-span">hx-swap</span> permet de préciser comment le contenu reçu du serveur doit remplacer une partie spécifique de la page. Il supporte plusieurs modes, dont innerHTML et outerHTML. Avec innerHTML, seul le contenu interne de l'élément ciblé est remplacé, conservant ainsi son conteneur d'origine. En revanche, outerHTML remplace l'élément lui-même, y compris son conteneur, ce qui peut être utile lorsque l'on souhaite complètement modifier un composant de l'interface.
<pre><code>
<button hx-post="/count"
hx-swap="outerHTML">
Increment
</button>
</code></pre>
Bien que l’utilisation de hx-swap permette une meilleure gestion de l’affichage, par défaut c'est l'élément à l'origine de l'action qui est remplacé, ici le bouton. Pour nous permettre de cibler l'élément voulu, nous allons voir comment utiliser hx-target pour obtenir le résultat attendu.
Ciblage précis avec hx-target
L'attribut <span class="css-span">hx-target</span> permet de définir où insérer la réponse du serveur. Il peut cibler un élément spécifique en utilisant des sélecteurs CSS, ce qui permet un contrôle précis sur la mise à jour du DOM. Par exemple, vous pouvez cibler un div précis avec <span class="css-span">hx-target="#monElement"</span>, évitant ainsi d'altérer d'autres parties de la page.
<pre><code>
<button hx-post="/count"
hx-swap="outerHTML"
hx-target="#count">
Increment
</button>
</code></pre>
Comparaison avec React/Vue
Configuration
Démarrer avec React ou Vue demande souvent des bundlers comme Webpack ou Vite, une configuration de Babel, et l’installation de plusieurs dépendances. HTMX, en revanche, fonctionne simplement avec un serveur web, des balises HTML. Il ne repose que sur une bibliothèque JavaScript très légère (15.7kB), évitant ainsi les dépendances massives comme celles présentes dans les nodes_modules.
Gestion de l’état
React et Vue reposent sur des solutions avancées comme Redux ou Context pour gérer l'état, ce qui ajoute une certaine complexité. À l'inverse, HTMX maintient l'état sur le serveur, ce qui réduit la nécessité de gestion côté client et simplifie le développement.
Performance et sécurité
HTMX repose sur des requêtes AJAX en arrière-plan, mais avec une approche optimisée. Contrairement aux librairies comme React qui génèrent du JavaScript côté client, HTMX minimise le travail du navigateur en ne traitant que des fragments HTML envoyés par le serveur. Cela réduit la charge sur le client mais dépend plus de la performance du serveur en contrepartie car c'est lui qui génère et renvoie le HTML.
Côté sécurité, HTMX ne prend pas en charge nativement l'authentification ou la validation des requêtes. Par conséquent, il est crucial d'implémenter des mécanismes de sécurité côté serveur, comme la validation des entrées utilisateur ou l'utilisation de jetons d'authentification (JWT, sessions) bien que cela reste une bonne pratique de sécurité dans toutes les applications.
Conclusion
HTMX ne convient pas à tous les projets, mais il brille par sa simplicité et sa rapidité de développement. Pour des applications légères ou des prototypes rapides, il constitue une alternative séduisante aux frameworks lourds.
Certains développeurs ont même choisi d'abandonner React au profit de HTMX. Retrouvez un retour d'expérience de David Guillot sur cette transition.
Pour aller plus loin, je vous recommande la vidéo de ThePrimeagen sur Youtube, qui est un bon point de départ pour découvrir HTMX.
.svg)
.svg)
.svg)
.svg)