Formation HTMX | Fondamentaux

HTMX : c’est quoi ?

Du HTML aux hormones

HTMX, signifiant « HTML eXtensible », est une librairie JavaScript visant à étendre les possiblités du HTML.

La promesse de ce langage est de remettre au centre le HTML pour tout un tas de mécaniques hypertexte, aujourd’hui gérées via l’écriture de JavaScript.

HTMX permet entre autres :

• D’effectuer des appels AJAX
• D’appliquer des transitions CSS
• D’exploiter des Web Sockets et Server Events
• Etc.

Si HTMX est une librairie qui a su faire parler d’elle c’est pour son approche disruptive en ce qui concerne la simplification des appels AJAX.

Simplifier les appels AJAX

Un appel AJAX permet d’envoyer et de recevoir des données depuis un serveur web sans recharger la page entière.

Concrètement, un appel AJAX s’élabore en :

1. Plaçant un écouteur d’évènement avec addEventListener() sur un élément HTML.
2. Déclenchant une requête HTTP sur un serveur web avec fetch() (sans recharger la page web)
3. Traitant si besoin la réponse HTTP

Et ça, c’est parfois verbeux, et surtout, ça nécessite d’écrire du JavaScript.

HTMX vient changer la donne en rendant tout cela possible, uniquement en HTML. Avec HTMX :

• N’importe quel élément HTML peut envoyer des requêtes HTTP (pas uniquement <a> et <form>) et par l’intermédiaire d’autres évènements que des clics sur des liens ou des soumissions de formulaires.
• Il est possible d’envoyer des requêtes via d’autres méthodes HTTP que GET et POST (seules méthodes supportées par les formulaires HTML)
• Le résultat de ces requêtes est exploitable depuis les balises

Plus concrètement, HTMX, par l’intermédiaire de la méthode AJAX, donne au langage HTML le pouvoir d’exécuter des actions comme :

• Soumettre un formulaire sans rechargement de page
• Filtrer des produits, articles…
• Afficher des commentaires en temps réel (en envoyant des requêtes AJAX à intervalles réguliers)

HTMX permet en conséquence de fournir une expérience de type « Single Page Application » (SPA), gérée par le serveur.

HTMX, comment ça marche ?

Concrètement, HTMX propose aux développeurs frontend de booster leur code HTML via l’usage d’attributs spécifiques commencant par hx-.

Nous aborderons par la suite les principaux, comme hx-target, hx-trigger, hx-swap, hx-get, hx-post…

Ces attributs vont entre autres permettre d’envoyer des requêtes à un serveur et d’injecter le template retourné dans le DOM.

Une librairie à l’opposé des frameworks JS

Server State VS Client State

Avec HTMX, l’état (les données) de l’application est localisé sur le serveur et retourné sous forme de template HTML, il n’est donc pas manipulé côté client.

En revanche, avec des frameworks JS réactifs comme React, Vue, Angular ou encore Svelte, l’état de l’application (déclaré au sein des composants ou récupéré par des appels API) est manipulé côté client afin de mettre à jour le DOM.

HTMX manipule l’état côté serveur et les frameworks réactifs côté client (c’est le principe même de la réactivité ; pourvoir mettre à jour l’interface, en fonction de l’état stocké côté client).

HTMX encourage le principe d'architecture HATEOAS

La génération de templates côté serveur favorise le respect du principe original d’architecture HATEOAS (« Hypermedia As The Engine Of Application State »), où les réponses du serveur incluent des liens vers d’autres ressources, permettant ainsi aux clients de naviguer dans l’API de manière autonome.

Cela favorise la découvrabilité et la flexibilité des interactions entre les services.

La stack HOWL

Carson Gross définit humoristiquement HTMX comme appartenant à la stack HOWL, pour « Hypermedia On Whatever you’d Like » (littéralement « hypertexte sur ce que vous voulez »), allant à contrepied du monopole de JS pour la conception d’applications dynamiques.

Le constat de Carson est simple : si l’interface utilisateur de votre application est principalement écrite en HTML et contient peu de JavaScript, vous réduisez la « JavaScript Pressure », un phénomène poussant de nombreux développeurs à utiliser JS côté serveur, car il l’est déjà beaucoup côté client…

En bref, moins de JS côté front-end faciliterait la considération d’autres langages et critères (techniques, architecturals, esthétiques, etc.).

« JavaScript Pressure » par l'exemple

Imaginez vous avoir développé une SPA en React piochant du contenu en BDD via une API.

Il serait logique de coder cette API en JS aussi, pour par exemple :

• Partager la logique de l’application entre le front et le back. Un bon exemple ici est la logique de validation.
• Partager les structures de données entre le front et le back.
• Développer une expertise dans un seul langage : JavaScript. Cela rend par la même occasion plus facile pour un développeur de travailler côté front et back.
• Utiliser le même gestionnaire de dépendances
• Etc.

Quand utiliser HTMX ?

En fonction des cas d’utilisation, HTMX peut s’avérer être un candidat idéal.

Dynamiser ses interfaces

En agissant comme une couche d’abstraction aux appels AJAX, HTMX facilite les interactions dynamiques simples nécessitant de modifier partiellement la page.

Cela peut être utile pour :

• Valider des données de formulaire côté serveur
• L’autocomplétion
• Pagination / infinite scroll
• Etc.

S’affranchir de JavaScript

Faire du HTMX c’est exploiter des mécaniques JavaScript, sans en écrire la moindre ligne de code côté client.

Cette extension du HTML simplifie ainsi l’expérience développeur (DX), et, en limitant l’usage de JS, facilite la considération d’un backend développé avec un autre langage de programmation (PHP, Python, Ruby, etc.).

Gestion de l’état côté serveur

HTMX est un candidat idéal pour les applications où la majorité de l’état et de la logique sont coté serveur. C’est par exemple le cas d’applications bancaires, RH, ecommerce… traitant un grand nombre de données, avec bien souvent, un enjeu de confidentialité/sécurité.

Par opposition, HTMX ne sera pas adapté à des applications telles que des jeux en ligne, des outils de productivité… où l’état et la logique sont côté client car souvent plus complexes et nécessitent de changer régulièrement.