Applications Web dynamiques sans JavaScript

DjangoCon et Devoxx Belgique des exemples récemment rapportés d'applications Web interactives développées sans développeurs JavaScript. La vitrine htmx Le framework HTML-first semble cibler les applications qui proposent principalement une interface conviviale pour les opérations CRUD sur des ressources distantes. Dans un cas, l'équipe a pu supprimer le développeur JavaScript.

À la DjangoCon 2022, David Guillot a déclaré avoir réimplémenté son produit SaaS de l'entreprise avec HTML-first framework htmx en deux mois avec les résultats suivants :

Guillot a volontiers mentionné que 15 000 lignes de code JavaScript avaient disparu de la base de code ; performances améliorées (tel que mesuré par temps d'interactivité et utilisation de la mémoire) ; le seul développeur JavaScript de l'équipe restant et les développeurs back-end se sont tournés vers les développeurs full stack.

L'équipe htmx prévient cependant que des résultats aussi spectaculaires ont été obtenus parce que cette application SaaS particulière convenait parfaitement à l'approche HTML d'abord de htmx :

Ce sont des chiffres impressionnants, et ils reflètent le fait que l'application Contexte est extrêmement sensible à l'hypermédia : c'est une application centrée sur le contenu qui affiche beaucoup de texte et d'images. Nous ne nous attendrions pas à ce que toutes les applications Web voient ces types de chiffres.

Cependant, nous aurait attendre de nombreux applications de voir des améliorations spectaculaires en adoptant l'approche hypermédia/htmx, au moins pour une partie de leur système.

À Devoxx Belgique 2022, Wim Deblauwe a présenté le type d'interactivité que htmx peut mettre en œuvre sans aucun JavaScript : champ de saisie de recherche au fur et à mesure de la frappe, mise à jour de l'interface utilisateur car certaines ressources distantes sont affectées par les opérations CRUD, actualisation régulière de l'interface utilisateur avec les données envoyées par le serveur, etc.

L'équipe htmx considère qu'une candidature lui convient pour le cadre si l'interface utilisateur est principalement composée de texte et d'images ; l'interface utilisateur interface principalement les opérations CRUD ; et les mises à jour HTML se déroulent principalement dans des blocs bien définis. À l'inverse, les applications avec de nombreuses interdépendances dynamiques, qui nécessitent une fonctionnalité hors ligne ou un état de mise à jour extrêmement fréquent ne seraient pas une bonne première pour l'approche hypermédia de htmx.

Dans une application htmx, le serveur renvoie des pages ou des fragments de pages.

L'extrait HTML précédent encode que lorsqu'un utilisateur clique sur le bouton, htmx envoie une requête HTTP POST au /clicked point final. Htmx utilise le contenu de la réponse postérieure pour remplacer l'élément par l'id parent-div dans les DOM. Avec htmx, n'importe quel élément (c'est-à-dire pas seulement les ancres et les formulaires), n'importe quel événement peut déclencher une requête HTTP. La réponse HTML du serveur ne met à jour que la partie pertinente de l'interface utilisateur. Pour un aperçu complet des fonctionnalités htmx, les développeurs peuvent se référer à la documentation.

Fait intéressant, htmx est souvent présenté par des développeurs back-end qui appartiennent à des écosystèmes non-JavaScript (par exemple, Python/Django/Flask, PHP/Laravel, Ruby/Ruby on Rails). Comme Guillot l'a mentionné, avec htmx, les développeurs back-end étendent leur portée à l'ensemble de la pile sans avoir à apprendre JavaScript, npm, Webpack, React, CSS-en-JS, et beaucoup plus. Matt Layman, dans son Vous n'avez pas besoin de JavaScript parler résume :

C'est juste ça roulement constant dans le [JavaScript] écosystème et ajoutant beaucoup de complexité à un flux lorsque vous essayez de fournir une application Web. Vous voulez simplement vivre une expérience qui fonctionne réellement pour les gens. Mais ensuite tu finis par te battre avec [the toolchain].

[...]
À une certaine échelle, JavaScript peut être une chose fantastique à intégrer à vos applications. Mais pour une personne moyenne ou une petite équipe, c'est une tonne de complexité supplémentaire, donc ma recommandation est : ne le faites pas. Nous avons d'autres options.

htmx est un projet open-source sous licence BSD-2-clause.
htmx prétend fournir AJAX, CSS Transitions, WebSockets et Événements envoyés par le serveur directement en HTML, à l'aide d'attributs, afin que les développeurs puissent créer des interfaces utilisateur avec la simplicité et la puissance de l'hypertexte.