Le débat autour des applications multipages (MPA), ou ce que vous pourriez appeler les sites Web traditionnels, par rapport aux applications monopage (SPA), ou aux applications Web construites à l’aide de frameworks JavaScript frontaux tels que React, dure depuis plusieurs années maintenant. Un nouveau framework d’extension HTML appelé htmx, décrit comme “une bibliothèque qui vous permet d’accéder aux fonctionnalités modernes du navigateur directement à partir de HTML, plutôt que d’utiliser javascript”, espère éloigner le développement Web de l’approche SPA.
Récemment, Rich Harris, créateur du framework Svelte, a publié une vidéo demandant si les applications d’une seule page ont ruiné le Web ? Dans la vidéo, Harris examine les avantages et les inconvénients des deux côtés, déterminant finalement que la voie à suivre consiste à utiliser un peu des deux approches – via ce qu’il appelle des «applications de transition», qui sont un mélange de technologies SPA et MPA.
Dans une réponse à cette vidéo, Carson Gross, créateur de htmx, a fait valoir que la plupart des exemples spécifiques que Harris propose comme problématiques pour les AMP peuvent en fait être résolus avec htmx lui-même. Au-delà d’offrir htmx comme solution, cependant, Gross affirme également qu’il y a un gros problème que Harris a négligé dans son examen des inconvénients des SPA : la complexité.
“Malheureusement, il y a un sujet que M. Harris ne discute pas, et nous pensons que c’est peut-être parce qu’il ne le voit pas », a écrit Gross dans sa réponse. “C’est un développeur JavaScript passionné par ce langage et qui nage dans la culture d’ingénierie des frameworks frontend, donc la complexité actuelle du développement frontend JavaScript lui semble naturelle. Pour beaucoup d’entre nous, cependant, l’écosystème JavaScript est tout simplement incroyablement compliqué. De manière comique, en fait, compte tenu des exigences de la plupart des applications Web.
Qu’est-ce que htmx et pourquoi est-il utile ?
La complexité du développement Web frontal est quelque chose que Gross tente de résoudre depuis près d’une décennie maintenant, après avoir créé la bibliothèque frontale alternative intercooler.js en 2013, qui était accompagnée du slogan «AJAX avec des attributs: il n’y a pas besoin d’être complexe.” Récemment, intercooler.js a atteint la version 2.0 et est devenu htmx, ce qui, selon la description de GithHub, “vous permet d’accéder à AJAX, aux transitions CSS, aux WebSockets et aux événements envoyés par le serveur directement en HTML, à l’aide d’attributs, afin que vous puissiez créer des interfaces utilisateur modernes avec la simplicité et puissance de l’hypertexte ».
“Le concept est d’utiliser le modèle original du Web pour créer des applications Web, mais rendons le HTML plus puissant.”
– Carson Gross, créateur de htmx
Plus simplement, Gross a décrit htmx comme une tentative “de rester dans le modèle original du Web, en utilisant les concepts HTML et Hypermédia, plutôt que de demander aux développeurs d’écrire beaucoup de JavaScript”. De manière quelque peu amusante pour cette discussion, htmx est une bibliothèque JavaScript – mais conformément à cette approche simpliste, elle est sans dépendance et les développeurs frontaux utilisant htmx n’ont pas besoin d’écrire JavaScript pour obtenir une fonctionnalité similaire. Au lieu de cela, ils utilisent des attributs supplémentaires dans les balises HTML pour obtenir un contenu et des mises à jour dynamiques. Dans la description du projet, Gross écrit qu’il a créé htmx pour résoudre quatre problèmes de base avec le HTML traditionnel :
- Pourquoi seuls et
- Pourquoi seuls les événements click & submit devraient-ils les déclencher ?
- Pourquoi seules les méthodes GET & POST devraient-elles être disponibles ?
- Pourquoi ne devriez-vous pouvoir remplacer que l’intégralité de l’écran ?
« En supprimant ces contraintes arbitraires, htmx complète le HTML en tant qu’hypertexte », conclut-il. Pour ce faire, Htmx émet des requêtes AJAX (JavaScript et XML asynchrones) directement à partir du code HTML, en utilisant des événements similaires à ceux de JavaScript, tels que les passages de souris ou les comportements de défilement. À l’aide de htmx, les développeurs peuvent ensuite créer des fonctionnalités d’interface utilisateur telles que le défilement infini, les barres de progression, les boîtes de dialogue de confirmation, l’édition en ligne et une variété d’autres “modèles UX implémentés dans htmx avec un minimum de HTML et de style”.
En comparaison, les frameworks JavaScript tels que React et Vue.js créent des SPA en utilisant JavaScript pour renvoyer des requêtes à un serveur, qui envoie ensuite des données en utilisant le format de données JSON (JavaScript Object Notation), et utilise à nouveau JavaScript pour traiter ces données et les mettre à jour. l’interface utilisateur.
Rendre le HTML plus puissant
“Je pense que beaucoup de frameworks JavaScript maintenant, vous construisez presque un client lourd dans le navigateur”, a déclaré Gross dans une interview avec The New Stack. Vous utilisez simplement le navigateur comme machine virtuelle pour le faire. Lorsque vous êtes dans ce monde, vous pouvez faire beaucoup plus, évidemment, mais il y a beaucoup plus de complexité.
Gross voit htmx comme une réponse à cette complexité pour de nombreux sites Web – même des sites comme Facebook ou Twitter, qui sont “principalement du texte et des images”.
“Le concept est d’utiliser le modèle original du Web pour créer des applications Web, mais rendons le HTML plus puissant”, a poursuivi Gross. “Si nous rendons HTML plus puissant, nous n’aurons peut-être pas à supporter toute la complexité qui accompagne ces frameworks frontaux JavaScript, car lorsque vous écrivez votre interface utilisateur en JavaScript, vous écrivez beaucoup de code. . Il y a beaucoup de complexité à gérer cela. Htmx est vraiment une sorte de retour en arrière et une tentative de dire, ‘D’accord, au lieu d’emprunter cette voie JavaScript, de créer de grandes applications dans le navigateur en JavaScript, rendons HTML plus puissant et voyons combien d’interactions nous pouvons obtenir en essayant simplement pour rendre le HTML plus puissant en tant qu’hypertexte, en tant qu’hypermédia, en tant que quelque chose qui échange du HTML.
Bien qu’il ne s’attende pas à ce que htmx prenne une bouchée de la domination de React de sitôt, Gross a déclaré qu’il avait un certain espoir de trouver plus d’ancrage, étant donné les récentes hésitations à adopter JavaScript pour tout.
“Cela se résume à un hypermédia vs. une approche centrée sur JavaScript », a-t-il déclaré. “Les deux sont des moyens raisonnables de créer des applications Web – et l’industrie, en ce moment, penche fortement vers cette dernière. J’espère changer cela au moins un peu et démontrer qu’en fait, les applications hypermédias peuvent implémenter de nombreux modèles d’interface utilisateur raisonnablement sophistiqués sans la complexité des frameworks JavaScript plus lourds.
Photo de Paula Schmidt de Pexels.