Accès Rapides
Points Essentiels à Retenir
- HTMX est une librairie JavaScript qui facilite la gestion des requêtes HTTP en mettant à disposition des fonctions habituelles via les attributs HTML.
- Son intégration dans votre application web se fait aisément, via un lien vers le script HTMX hébergé sur un CDN.
- HTMX permet de réaliser des interactions telles que la pagination, la validation de formulaires et l’édition en direct, sans avoir recours à l’écriture de JavaScript.
Récemment, la communauté des développeurs web s’est montrée particulièrement enthousiaste au sujet de HTMX. Mais de quoi s’agit-il réellement ? Il s’avère que cette technologie est plus accessible qu’on pourrait le penser, et son utilité justifie l’engouement qu’elle suscite.
Qu’est-ce que HTMX ?
HTMX est une librairie JavaScript légère, axée sur un objectif précis. Elle rend les fonctionnalités JavaScript les plus courantes accessibles par le biais d’attributs HTML. Voici un exemple simple :
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">À propos</a>
Ce code présente un attribut HTML personnalisé, hx-get. En cliquant sur ce lien, la librairie HTMX envoie une requête AJAX et charge la page visée sans rechargement complet du navigateur.
HTMX propose des fonctionnalités supplémentaires permettant d’envoyer des requêtes :
- À partir d’éléments autres que <a> et <form>.
- Lors d’événements autres que le clic et la soumission.
- En utilisant des méthodes HTTP autres que GET et POST.
- En remplaçant n’importe quelle portion de la page, au lieu de la totalité.
Bien que HTMX prenne en charge des technologies comme l’animation CSS et les WebSockets, son objectif premier est de simplifier la gestion des requêtes HTTP.
Comment intégrer HTMX dans une application web basique
HTMX cible des fonctionnalités spécifiques au sein d’applications ou de sites web, plutôt que la globalité du comportement d’une application.
L’un des grands avantages de cette librairie est sa facilité de prise en main. Vous pouvez télécharger et installer une copie si vous le souhaitez, mais étant donné qu’elle n’a aucune dépendance, il vous suffit pour commencer d’ajouter un lien vers le script sur un CDN :
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Pour le développement et les tests en local, la configuration d’un serveur web tel qu’Apache sera nécessaire si vous n’en avez pas déjà un. Cette étape est cruciale, même si vous testez de simples fichiers statiques, car le protocole file: ne permet pas les requêtes AJAX.
Un exemple simple avec le défilement infini
Le défilement infini est une méthode populaire, employée notamment par des plateformes comme Twitter pour leur flux. Lorsque vous arrivez en bas d’une liste, le défilement infini charge de nouveaux éléments pour poursuivre la lecture.
Cette fonctionnalité requiert habituellement du JavaScript pour examiner la position de défilement et charger les nouveaux éléments sans recharger la page. Mais HTMX peut s’en charger intégralement.
Considérez le code suivant, qui représente une liste de publications, avec une image pour chacune :
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Imaginez que ces éléments soient contenus dans un fichier, feed1.html, et que d’autres éléments se trouvent dans feed2.html, etc. Chaque page affichera alors un petit ensemble d’éléments que vous pourrez faire défiler :
Bien sûr, des liens « page suivante » peuvent être employés pour naviguer d’une page à l’autre, mais il est tout aussi facile d’implémenter un défilement infini. Il suffit de modifier le dernier élément comme suit :
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
L’ajout de ces quatre attributs au dernier élément de liste permet d’implémenter le défilement infini. Voici la signification de chaque attribut :
|
Attribut |
Valeur |
Signification |
|---|---|---|
|
hx-trigger |
revealed |
Lorsque cet élément apparaît à l’écran pour la première fois… |
|
hx-get |
feed2.html |
… envoyer une requête GET à feed2.html, … |
|
hx-select |
li |
… sélectionner les éléments <li> de la réponse, … |
|
hx-swap |
afterend |
… et les insérer après cet élément. |
En faisant défiler vers le bas de la liste, vous remarquerez que la page charge automatiquement le nouveau contenu. Vous pouvez le vérifier en observant la barre de défilement et en examinant les outils de développement de votre navigateur :
Dans cette configuration statique simplifiée, la page feed2.html inclut un dernier élément avec un attribut hx-get pointant vers feed3.html, et ainsi de suite. Notez également comment HTMX a ajouté un écouteur à l’événement scroll.
Autres possibilités d’utilisation de HTMX
HTMX peut être mis à profit pour de nombreuses autres interactions courantes :
- Pagination : charger et remplacer des éléments lorsque l’utilisateur clique sur un lien de pagination.
- Validation de formulaire : à la soumission, remplacer un formulaire par un message de confirmation ou une portion du formulaire.
- Barres de progression : actualiser régulièrement la valeur d’une barre de progression en fonction d’une réponse ping.
- Édition en direct : remplacer un élément par une zone de texte contenant la valeur de cet élément.
Bien qu’il soit possible de reproduire ces exemples en utilisant du JavaScript conventionnel, HTMX simplifie grandement le processus.
Atouts et faiblesses de HTMX
Avantages
HTMX peut considérablement simplifier les interactions courantes, ce qui peut s’avérer bénéfique pour de nombreuses applications et sites web. Il permet aux concepteurs et autres personnes travaillant sur le front-end d’ajouter des fonctionnalités sans avoir à apprendre le JavaScript.
En faisant abstraction des comportements communs, HTMX assure une cohérence dans l’ensemble de vos projets. Le défilement infini se comportera de manière identique d’une page à l’autre, quelle que soit la personne qui l’a implémenté.
En favorisant une approche déclarative (quoi) au lieu d’une approche impérative (comment), la logique HTMX est généralement plus facile à appréhender et à maîtriser.
Inconvénients
Bien que HTMX puisse vous épargner l’usage de JavaScript dans de nombreux cas, il ne résout pas tous les problèmes ! Vous devrez toujours écrire du code pour gérer la logique métier spécifique et les fonctionnalités de bas niveau.
Puisque HTMX automatise une grande partie du travail, la personnalisation du comportement est plus limitée. Ce compromis est souvent bénéfique, mais vous devez être prêt à renoncer à un certain degré de contrôle.
HTMX permet d’éviter l’écriture de JavaScript, mais il est important de comprendre que du code JavaScript s’exécute en arrière-plan. Vous pourriez être tenté d’utiliser l’attribut hx-get sur chaque lien à la place de l’attribut href, mais cela introduit une dépendance à JavaScript ; si le code ne s’exécute pas, l’utilisateur se retrouve avec un lien qui n’effectue aucune action. Il est donc crucial de privilégier une approche d’amélioration progressive pour éviter ce genre de situation.