Scripting

Bien que htmx encourage une approche hypermédia pour construire des applications web, il offre de nombreuses options pour le scripting côté client. Le scripting est inclus dans la description REST-ful de l’architecture web, voir : Code-On-Demand. Autant que possible, nous recommandons une approche hypermédia-friendly pour le scripting dans votre application web :

• Respecter HATEOAS : Adoptez une approche où les interactions client-serveur sont guidées par les liens fournis dans les réponses du serveur.
• Utiliser les événements pour communiquer entre les composants : Le modèle événementiel d’htmx vous permet de déclencher et de réagir à des événements pour orchestrer des interactions complexes.
• Utiliser des îlots pour isoler les composants non hypermédia du reste de votre application : Maintenez une séparation claire entre les parties de votre application qui utilisent htmx et celles qui ne l’utilisent pas.
• Considérer le scripting en ligne : Gardez le comportement de votre application proche de la structure HTML en utilisant des scripts en ligne, facilitant ainsi le débogage et la maintenance.

Le principal point d’intégration entre htmx et les solutions de scripting est les événements que htmx envoie et auxquels il peut répondre. Voir l’exemple SortableJS dans la section JavaScript tiers pour un bon modèle d’intégration d’une bibliothèque JavaScript avec htmx via des événements.

Les solutions de scripting qui se marient bien avec htmx incluent :

• VanillaJS : Utiliser simplement les capacités intégrées de JavaScript pour accrocher des gestionnaires d’événements afin de répondre aux événements émis par htmx peut fonctionner très bien pour le scripting. C’est une approche extrêmement légère et de plus en plus populaire.
• AlpineJS : Alpine.js fournit un ensemble d’outils riches pour créer des scripts front-end sophistiqués, y compris le support de la programmation réactive, tout en restant extrêmement léger. Alpine encourage l’approche du « scripting en ligne » que nous pensons bien se marier avec htmx.
• jQuery : Malgré son âge et sa réputation dans certains cercles, jQuery se marie très bien avec htmx, en particulier dans les anciens codes qui contiennent déjà beaucoup de jQuery.
• hyperscript : Hyperscript est un langage de script front-end expérimental créé par la même équipe qui a créé htmx. Il est conçu pour s’intégrer bien dans HTML et à la fois répondre aux événements et en créer, et se marie très bien avec htmx.

Nous avons un chapitre entier intitulé « Scripting Côté Client » dans notre livre qui examine comment le scripting peut être intégré dans votre application basée sur htmx.

Attributs hx-on*

HTML permet l’intégration de scripts en ligne via les propriétés onevent, telles que onClick :

<button onclick="alert('Vous m'avez cliqué!')">
    Cliquez-moi !
</button>

Cette fonctionnalité permet de co-localiser la logique de script avec les éléments HTML auxquels elle s’applique, offrant ainsi une bonne Localité du Comportement (LoB). Malheureusement, HTML ne permet les attributs on* que pour un nombre fixe d’événements DOM spécifiques (par exemple onclick) et ne fournit pas de mécanisme généralisé pour répondre à des événements arbitraires sur les éléments.

Pour remédier à ce manque, htmx offre des attributs hx-on*. Ces attributs vous permettent de répondre à n’importe quel événement de manière à préserver la LoB des propriétés on* standard.

Si nous voulions répondre à l’événement click en utilisant un attribut hx-on, nous écririons ceci :

<button hx-on:click="alert('Vous m'avez cliqué!')">
    Cliquez-moi !
</button>

Ainsi, la chaîne hx-on est suivie d’un deux-points (ou d’un tiret), puis du nom de l’événement.

Pour un événement click, bien sûr, nous recommanderions d’utiliser l’attribut standard onclick. Cependant, envisagez un bouton alimenté par htmx qui souhaite ajouter un paramètre à une requête en utilisant l’événement htmx:config-request. Cela ne serait pas possible en utilisant une propriété on* standard, mais cela peut être fait en utilisant l’attribut hx-on:htmx:config-request :

<button hx-post="/example"
        hx-on:htmx:config-request="event.detail.parameters.example = 'Hello Scripting!'">
    Envoyez-moi !
</button>

Ici, le paramètre example est ajouté à la requête POST avant qu’elle ne soit émise, avec la valeur « Hello Scripting! ».

Les attributs hx-on* sont un mécanisme très simple pour le scripting intégré généralisé. Ce n’est pas un remplacement pour des solutions de scripting front-end plus développées telles que AlpineJS ou hyperscript. Cependant, cela peut compléter une approche basée sur VanillaJS dans votre application alimentée par htmx.

Notez que les attributs HTML sont insensibles à la casse. Cela signifie que, malheureusement, les événements qui dépendent de la capitalisation/du camel case, ne peuvent pas être pris en charge. Si vous avez besoin de prendre en charge des événements en camel case, nous recommandons d’utiliser une solution de scripting plus fonctionnelle telle que AlpineJS ou hyperscript. htmx déclenche tous ses événements en camelCase et en kebab-case pour cette raison précise.