htmx en Bref

htmx est une bibliothèque qui vous permet d’accéder aux fonctionnalités modernes du navigateur directement depuis HTML, sans utiliser de JavaScript.

Pour comprendre htmx, commençons par un exemple de balise d’ancre :

<a href="/blog">Blog</a>

Cette balise d’ancre indique au navigateur :

« Lorsqu’un utilisateur clique sur ce lien, effectuer une requête HTTP GET vers ‘/blog’ et charger le contenu de la réponse dans la fenêtre du navigateur. »

Avec cela en tête, considérez le fragment HTML suivant :

<button hx-post="/clicked"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="outerHTML">
    Cliquez-moi !
</button>

Cela indique à htmx :

« Lorsqu’un utilisateur clique sur ce bouton, effectuer une requête HTTP POST vers ‘/clicked’ et utiliser le contenu de la réponse pour remplacer l’élément avec l’id parent-div dans le DOM. »

htmx étend et généralise l’idée centrale du HTML en tant qu’hypertexte, ouvrant ainsi de nombreuses possibilités directement dans le langage :

• Désormais, n’importe quel élément, pas seulement les ancres et les formulaires, peut émettre une requête HTTP.
• Désormais, n’importe quel événement, pas seulement les clics ou les soumissions de formulaires, peut déclencher des requêtes.
• Désormais, n’importe quel verbe HTTP, pas seulement GET et POST, peut être utilisé.
• Désormais, n’importe quel élément, pas seulement la fenêtre entière, peut être la cible de la mise à jour par la requête.

Notez que lorsque vous utilisez htmx, côté serveur, vous répondez généralement avec du HTML, pas du JSON. Cela vous maintient fermement dans le modèle de programmation Web original, utilisant l’Hypertexte comme moteur de l’état de l’application (HATEOAS) sans même avoir besoin de vraiment comprendre ce concept.

Il est à noter que, si vous le souhaitez, vous pouvez utiliser le préfixe data- lors de l’utilisation de htmx :

<a data-hx-post="/click">Cliquez-moi !</a>

Enfin, la Version 1 de htmx est toujours prise en charge et supporte IE11.

Guide de Migration de la Version 1.x à 2.x

Si vous migrez vers htmx 2.x depuis htmx 1.x, veuillez consulter le guide de migration de htmx 1.x.

Si vous migrez vers htmx depuis intercooler.js, veuillez consulter le guide de migration d’intercooler.