htmx 1.9.0 a été publié. Il inclut de nouvelles fonctionnalités telles que la prise en charge des transitions de vue ou la gestion généralisée des événements en ligne via le nouvel attribut hx-on, ainsi que des améliorations et des corrections de bogues.htmx en bref
htmx est une bibliothèque qui vous permet d'accéder aux fonctionnalités des navigateurs modernes directement à partir du HTML, plutôt que d'utiliser le javascript.
htmx vous donne accès à AJAX, aux transitions CSS, aux WebSockets et aux événements envoyés par le serveur directement en HTML, en utilisant des attributs, afin que vous puissiez construire des interfaces utilisateur modernes avec la simplicité et la puissance de l'hypertexte.
Pour comprendre htmx, voyons d'abord ce qu'est une balise d'ancrage :
| Code : | Sélectionner tout |
<a href="/blog">Blog</a>
Cette balise d'ancrage indique au navigateur :
Lorsqu'un utilisateur clique sur ce lien, émettre une requête HTTP GET vers '/blog' et charger le contenu de la réponse dans la fenêtre du navigateur.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 | <button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML"
>
Click Me!
</button> |
Ceci indique à htmx :
Lorsqu'un utilisateur clique sur ce bouton, émettre 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
- N'importe quel élément, et pas seulement les ancres et les formulaires, peut émettre une requête HTTP.
- Tout événement, et pas seulement les clics ou les soumissions de formulaires, peut déclencher des requêtes.
- Tout verbe HTTP, et pas seulement GET et POST, peut être utilisé.
- Tout élément, et 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, du côté du serveur, vous répondez généralement avec du HTML, et non du JSON. Cela vous permet de rester fermement dans le modèle de programmation web original, en utilisant l'hypertexte comme moteur de l'état de l'application sans même avoir besoin de comprendre ce concept.
Il convient de mentionner que, si vous préférez, vous pouvez utiliser le préfixe data- lorsque vous utilisez htmx :
| Code : | Sélectionner tout |
<a data-hx-post="/click">Click Me!</a>
La bilbiothèque htmx 1.9.0 est désormais disponible !
Je suis heureux d'annoncer la sortie de la version 1.9.0 de htmx.
Nouvelles fonctionnalités
Améliorations et corrections de bugs
Merci à tous ceux qui ont contribué, et profitez bien !
Nouvelles fonctionnalités
- Support des transitions de vue, basé sur l'API expérimentale View Transitions actuellement disponible dans Chrome 111+ et bientôt dans d'autres navigateurs.
- Prise en charge des attributs hx-trigger "nus", où un hx-trigger est présent sur un élément qui n'a pas de hx-get, etc. défini sur lui. Au lieu de cela, il déclenchera le nouvel événement htmx:triggered, auquel vous pourrez répondre via votre solution de script préférée.
- Prise en charge de la gestion généralisée des événements en ligne via le nouvel attribut hx-on, qui répond à l'insuffisance des attributs de propriétés onevent en HTML.
Améliorations et corrections de bugs
- Le site htmx a été migré de 11ty à zola par @danieljsummers, ce qui réduit considérablement le nombre de dépendances javascript "de développement".
- Correction d'une fuite de mémoire par @croxton
Merci à tous ceux qui ont contribué, et profitez bien !
Et vous ?
Que pensez-vous de cette librairie ? Quelles fonctionnalités vous semblent intéressantes ? Avez-vous déjà utilisé htmx ? Si oui, quels avantages en avez-vous tiré et seriez-vous prêt à recommander cette librairie ?Voir aussi
Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ? Un designer pense que cela est possible, quel est votre avis ? HTML6 : un développeur veut mettre fin à l'utilisation de JavaScript dans les pages dynamiques, pour améliorer la vitesse de chargement des pages Est-il possible de se passer de JavaScript sur la toile ? Après avoir désactivé JavaScript, Klint le réactive pour profiter de ses avantages