Présentation sur HN : HTMX Playground entièrement implémenté dans le navigateur

HTMX Playground

• HTMX Playground est un outil qui permet de jouer avec HTMX dans un environnement simple de bac à sable pour le code.
• Il peut être utilisé immédiatement sans configuration particulière, et permet de consulter des exemples repris du site htmx.org.
• Il est possible d’écrire du code dans le navigateur dans un environnement proche d’un backend, de définir des endpoints dans server.js et de rendre ses propres templates.
• Il exécute un serveur simulé qui intercepte les requêtes sortantes de HTMX, et fournit un traitement des requêtes ainsi qu’un moteur de templates familiers pour les personnes qui utilisent Django.
• Ce projet ne se limite pas à HTMX, il est donc aussi possible d’essayer librement d’autres bibliothèques.

Enregistrement et partage

• Le bouton "Copy as JSON" en haut à droite permet de copier le contenu au format JSON.
• En téléversant ce contenu sur Gist puis en saisissant l’URL brute dans "Load Playground", l’URL de la page est mise à jour afin de pouvoir la partager.
• Le code est également disponible sur GitHub.

Points à noter

• Il n’y a pas de fonctionnalité de navigation entre pages.
• La prise en charge mobile est limitée.
• server.js peut avoir un état, mais si l’état est mis à jour dans la vue on.get("/"), cette mise à jour peut être perdue au chargement initial de la page, car celle-ci est récupérée via un iframe séparé.

Bibliothèques utilisées

• Svelte
• Ace (éditeur de code)
• PollyJS (serveur simulé)
• Nunjucks (moteur de templates)

Avis de GN⁺

• HTMX Playground est un outil utile pour les développeurs web qui veulent prototyper rapidement des applications web interactives avec HTMX.
• Il propose un environnement facilement accessible aux développeurs familiers des frameworks backend comme Django, ce qui aide à unifier l’expérience de développement frontend et backend.
• Cet outil facilite aussi l’enregistrement et le partage du code, ce qui peut le rendre très utile pour la collaboration ou la formation.

[GN⁺]

Commentaires Hacker News

• Remerciements du créateur de htmx

  • Créateur de htmx : le créateur de htmx a adressé ses remerciements. Il indique être très encouragé par l’intérêt et l’usage autour de son projet.

• Inquiétudes et questions sur l’utilisation de htmx

  • Préoccupation sur le vivier de développeurs : un utilisateur a envisagé d’utiliser htmx, mais a estimé que le vivier de développeurs était trop réduit, ce qui compliquait le recrutement. Il partage son expérience selon laquelle il était plus facile d’embaucher des développeurs front-end spécialisés, habitués à des frameworks dédiés, que de trouver des développeurs full-stack spécialisés. Il ajoute que les développeurs hésitent à gérer du code complexe et qu’il ne souhaite pas que les développeurs back-end deviennent un goulot d’étranglement. Il demande si htmx est conscient de ce problème et comment il compte y répondre.

• Réflexion sur htmx et la prise en charge des applications mobiles

  • Support des applications mobiles : un utilisateur dit apprécier le concept de htmx et avoir commencé à lire un livre à son sujet, mais s’interroge en se rappelant que, lorsqu’un support des applications mobiles devient nécessaire, il faut largement réécrire le front-end et le back-end. Il indique connaître hyperview.org, mais précise qu’une application react-native ne convient pas aux cas d’usage qui l’intéressent.

• Avis sur le choix de l’éditeur et l’affichage des erreurs

  • Éditeur et affichage des erreurs : un utilisateur souligne que le support mobile est limité et affirme qu’il faudrait utiliser Monaco Editor à la place de Ace Editor. Il est cependant expliqué que Monaco ne fonctionne délibérément pas sur mobile, d’où l’usage de Ace. Un lien vers une issue GitHub est mentionné à l’appui.

• Partage d’expérience avec htmx et Django

  • Utilisation de htmx avec Django : un utilisateur explique qu’il utilise maplibre, Django et htmx ensemble, et prévoit de publier un exemple pour le partager avec d’autres.

• Retour d’expérience et feedback sur htmx

  • Utilisation et feedback sur htmx : un utilisateur dit avoir utilisé htmx dans son travail et estime que cela fonctionne bien. Il prévoit de continuer à l’utiliser, mais pourrait aussi créer une version basée sur PHP. Il partage également avoir perdu son travail à plusieurs reprises en collant du JSON dans le champ de chargement d’URL, ainsi qu’un problème l’empêchant d’effacer le navigateur des requêtes réseau, présenté comme une demande de fonctionnalité.

• Question sur le support technique

  • Prise en charge d’ActiveX : un utilisateur demande si htmx prend en charge ActiveX.

• Commentaire satirique sur le choix des outils de développement

  • Utilisation de Svelte : un utilisateur demande si htmx a été créé avec Svelte. Il ajoute, sur un ton satirique, qu’il se demande où sont les puristes des MPA (Multi-Page Application) et quelle serait leur réaction.

• Curiosité autour du développement d’applications hors ligne

  • Applications hors ligne : un utilisateur se demande si quelqu’un crée des applications hors ligne via un modèle requête-réponse avec htmx et HTML, en définissant un serveur virtuel dans un service worker.

• Signalement d’une faute de frappe dans la description du site web

  • Faute de frappe : un utilisateur signale une faute de frappe dans la description de la page principale du site web, en précisant que "intersepts" devrait être corrigé en "intercepts".