Htmx 2.0 : Les nouveautés qui vont vous faire swaper (et swapper)

Introduction à Htmx 2.0

Pfiou, on l’attendait depuis un bail celui-là ! Après 4 longues années d’attente (vous avez bien lu, 4 ans !), la version 2.0 du framework front-end Htmx vient enfin de pointer le bout de son nez. Pour ceux qui l’auraient un peu zappé (moi le premier), Htmx est ce petit bijou qui vous permet de booster votre HTML avec quelques attributs malins et un minimum de JavaScript.

Présentation du framework

Alors, pour faire simple, Htmx c’est un peu le couteau suisse du développement web. Au lieu de réinventer la roue avec des tonnes de JS, l’idée est d’enrichir vos bonnes vieilles balises HTML pour leur donner un peu de peps. Le tout sans passer par une API compliquée.

Htmx permet d’ajouter des fonctionnalités dynamiques à votre site en utilisant uniquement du HTML et un peu de JavaScript.

Concrètement, vous allez pouvoir faire des requêtes HTTP directement avec vos tags, mettre à jour des parties de pages, gérer des événements, et même pousser du code sur le serveur, le tout en gardant un code léger et accessible. Un peu comme le bon vieux temps, mais en beaucoup plus puissant ! (Et non, on ne parle pas de Gopher ici).

Les délais entre les versions

Bref, revenons à nos moutons. Htmx 2.0 vient donc de débarquer, presque 4 ans après la version 1.0 sortie en novembre 2020. Un temps de développement qui peut paraître une éternité de nos jours, mais qui s’explique (un peu) par le fait que la 2.0 est la première à lâcher définitivement Internet Explorer. Oui, vous avez bien lu, ils ont encore dû supporter ce dinosaure pendant un bon moment ! (Désolé pour les fans, fallait bien passer à autre chose).

Les nouveautés de la version 2.0

Après cette longue (très longue) intro, voici un petit tour d’horizon de ce qui vous attend avec Htmx 2.0. Eh bien, disons que les développeurs n’ont pas chômé pendant ces 4 ans !

Le nouveau méthode htmx.swap()

La première nouveauté qui devrait vous faire swaper (et swapper), c’est la nouvelle méthode htmx.swap() . Cette petite merveille vous permet de remplacer un contenu existant par un nouveau, en un clin d’œil. Un peu comme une version améliorée du vénérable selectAndSwap() , mais en mieux quoi.

Les incompatibilités et la migration

Bien évidemment, avec une nouvelle version majeure, il y a toujours un risque d’incompatibilités. C’est pourquoi les développeurs ont fait le choix de publier Htmx 2.0 sous l’étiquette « next » sur NPM, au moins jusqu’en janvier 2024. Pendant ce temps, la version 1.0 restera proposée comme « latest » pour ne pas perturber les sites existants. Ah, la sagesse des devs !

La suppression des fonctionnalités dépréciées

Dans un mouvement de ménage printanier, les fonctionnalités dépréciées ont été définitivement supprimées de Htmx 2.0. Au revoir les attributs hx-sse et hx-ws , on ne vous regrettera pas ! (Enfin, si, un peu quand même. Faudra s’y faire).

Les extensions indépendantes

Autre changement de taille, les extensions ne font désormais plus partie du repository principal de Htmx. Elles sont devenues des projets indépendants, ce qui leur permettra d’évoluer à leur propre rythme, sans avoir à suivre les mises à jour du framework. Les vieilles extensions restent accessibles dans le dossier /dist/ext , histoire de ne pas casser les liens CDN, mais à l’avenir, tout sera découplé. Une bonne nouvelle pour les amateurs de personnalisation !

Les améliorations de la gestion des requêtes HTTP

Passons aux améliorations côté requêtes HTTP. Avec Htmx 2.0, les requêtes DELETE utilisent désormais directement les paramètres, ce qui devrait simplifier pas mal de choses. Le support des requêtes asynchrones a également été peaufiné, tout comme la gestion des transitions CSS et des communications WebSocket via les attributs HTML. Bref, que du bon pour vos applis web !

Le support des Web components

Last but not least, Htmx 2.0 embarque le support des Web components. Oui, ces petits éléments HTML personnalisés et réutilisables à souhait. Un peu comme les composants de React ou Vue, mais directement dans votre navigateur, sans couche d’abstraction ! De quoi encore simplifier le développement de vos interfaces, si vous aimez ce genre de choses.

Htmx et XMLHttpRequest : Pourquoi ce choix ?

Parlons maintenant d’un choix un peu particulier de Htmx : l’utilisation de XMLHttpRequest au lieu de la fetch API. Un choix qui peut surprendre de prime abord, mais qui a en fait tout son sens.

Les avantages de XMLHttpRequest

Déjà, XMLHttpRequest a l’avantage d’être plus léger et plus simple à mettre en œuvre que fetch. Ensuite, en utilisant cette API « old school », Htmx peut se targuer d’être compatible avec… à peu près tous les navigateurs, même les plus anciens. Un luxe que ne peut se permettre fetch, arrivée plus tard dans la danse.

Mais au-delà de ces aspects pratiques, le choix de XMLHttpRequest s’inscrit dans la philosophie même de Htmx : étendre les fonctionnalités de base de HTML, et remplacer JavaScript partout où c’est possible. Un peu comme

un retour aux sources, mais dans une version remastérisée et boostée aux hormones du 21ème siècle !

Les projets remplaçant JavaScript

D’ailleurs, Htmx n’est pas le seul projet à vouloir repenser l’utilisation du JavaScript dans le développement web. D’autres initiatives comme Hotwire (de Basecamp) ou Html-ized (initiée par les créateurs de htmx) vont dans le même sens, en explorant des alternatives aux frameworks JavaScript traditionnels. Une tendance à suivre de près, surtout si vous en avez un peu marre de passer votre temps à mettre à jour vos dépendances NPM !

Bon, trêve de plaisanteries (pour l’instant). Il est temps de conclure ce petit tour d’horizon de Htmx 2.0. Une version qui, malgré les 4 ans d’attente, apporte son lot de nouveautés bienvenues, tout en restant fidèle à l’esprit initial du framework. Un équilibre pas toujours facile à trouver, mais qui semble avoir été plutôt bien négocié ici.