Vous avez peut-être la chance d'avoir connu l'âge des pages web statiques sans interactions puis l'avènement de Flash et jQuery pour finir aujourd'hui à l'ère des frameworks tels que React, Angular, Vue.js. Et si on pouvait revenir à quelque chose de plus simple ? C'est la promesse de HTMX. Allez, installez-vous et regardons ça de plus près.
HTMX, c'est quoi ?
HTMX est une bibliothèque JavaScript qui permet de faire des mises à jour partielles du contenu de votre page en utilisant directement le HTML. Pas besoin de JSX, de modèles complexes ou de Virtual DOM.
HTMX permet d'effectuer des appels API, d'utiliser les Server Sent Events ou même les WebSockets en offrant la possibilité de rendre les applications web réactives et interactives.
Comment HTMX réalise ce miracle ?
Une fois injectée dans votre page, HTMX va inspecter l'ensemble du DOM à la recherche d'attributs hx-* et remplacer le contenu ou effectuer des actions comme mettre en place des listeners ou émettre des appels API.
Comment démarrer avec HTMX ?
Vous devrez injecter la librairie dans votre page :
<script src="https://unpkg.com/htmx.org"></script>
Puis vous pouvez par exemple émettre votre première requête API comme suit :
<div
hx-get="https://dummyjson.com/todos/1"
hx-trigger="every 1s"
hx-swap="outerHTML">
<p>Attente de la donnée...</p>
</div>
Voici le rendu au chargement de la page :
et après chaque requête HTTP le contenu de la div est remplacé :
Pour aller plus loin
HTMX propose quelques extensions comme :
- json-enc: pour encoder le corps d'une requête au format JSON à la place du classique x-www-form-urlencoded
- client-side-templates: qui permet d'utiliser Mustache, Handlebars ou encore Nunjucks pour créer des templates.
- debug: pour debugger un élément HTMX en particulier.
Voici un exemple qui met en oeuvre HTMX avec le moteur de templating Mustache :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
<div hx-boost hx-ext="client-side-templates">
<div
hx-get="https://dummyjson.com/posts"
hx-trigger="load"
mustache-template="todo-list"
>
<p>Loading posts...</p>
</div>
<script id="todo-list" type="x-tmpl-mustache">
{{#posts}}
<h4>{{title}}</h4>
<p>{{body}}</p>
{{#tags}}
<i>#{{.}}</i>
{{/tags}}
<hr/>
{{/posts}}
</script>
</div>
</body>
</html>
Êtes-vous prêt à revenir au minimalisme ?
HTMX nous rappelle l'époque où le développement web était un peu plus simple. En plus de diminuer la complexité, HTMX n'a que peu d'impact sur la performance web de votre application. Et si la prochaine fois que vous n'aurez qu'à afficher des données, vous laissiez sa chance à HTMX ?
