Boosting

Htmx prend en charge le « boosting » des ancres HTML et des formulaires réguliers avec l’attribut hx-boost. Cet attribut convertira toutes les balises d’ancre et les formulaires en requêtes AJAX qui, par défaut, cibleront le corps de la page.

Voici un exemple :

<div hx-boost="true">
    <a href="/blog">Blog</a>
</div>

La balise d’ancre dans ce div émettra une requête AJAX GET vers /blog et remplacera la réponse dans la balise body.

Amélioration Progressive

Une caractéristique de hx-boost est qu’il se dégrade gracieusement si le JavaScript n’est pas activé : les liens et les formulaires continuent de fonctionner, ils n’utilisent simplement pas de requêtes AJAX. C’est ce que l’on appelle l’Amélioration Progressive, et cela permet à un plus large public d’utiliser les fonctionnalités de votre site.

D’autres motifs htmx peuvent être adaptés pour réaliser une amélioration progressive, mais ils nécessiteront plus de réflexion.

Considérons l’exemple de la recherche active. Tel qu’il est écrit, il ne se dégrade pas gracieusement : quelqu’un qui n’a pas le JavaScript activé ne pourra pas utiliser cette fonctionnalité. Cela est fait pour des raisons de simplicité, afin de garder l’exemple aussi bref que possible.

Cependant, vous pourriez envelopper l’entrée améliorée par htmx dans un élément de formulaire :

<form action="/search" method="POST">
    <input class="form-control" type="search"
        name="search" placeholder="Commencez à taper pour rechercher des utilisateurs..."
        hx-post="/search"
        hx-trigger="keyup changed delay:500ms, search"
        hx-target="#search-results"
        hx-indicator=".htmx-indicator">
</form>

Avec cela en place, les clients avec JavaScript activé obtiendraient toujours la belle UX de recherche active, mais les clients sans JavaScript pourraient appuyer sur la touche Entrée et rechercher quand même. Encore mieux, vous pourriez ajouter un bouton « Rechercher ». Vous devrez ensuite mettre à jour le formulaire avec un hx-post qui reflète l’attribut action, ou peut-être utiliser hx-boost dessus.

Vous devrez vérifier côté serveur l’en-tête HX-Request pour différencier une requête pilotée par htmx et une requête régulière, afin de déterminer exactement quoi rendre au client.

D’autres motifs peuvent être adaptés de manière similaire pour répondre aux besoins d’amélioration progressive de votre application.

Comme vous pouvez le voir, cela demande plus de réflexion et de travail. Cela exclut également certaines fonctionnalités. Ces compromis doivent être faits par vous, le développeur, en fonction des objectifs de votre projet et de votre public.

L’accessibilité est un concept étroitement lié à l’amélioration progressive. L’utilisation de techniques d’amélioration progressive telles que hx-boost rendra votre application htmx plus accessible à un large éventail d’utilisateurs.

Les applications basées sur htmx sont très similaires aux applications Web normales, non basées sur AJAX, car htmx est orienté HTML.

En tant que tel, les recommandations normales en matière d’accessibilité HTML s’appliquent. Par exemple :

• Utilisez autant que possible du HTML sémantique (c’est-à-dire les bonnes balises pour les bonnes choses)
• Assurez-vous que l’état de focus est clairement visible
• Associez des étiquettes de texte à tous les champs de formulaire
• Maximisez la lisibilité de votre application avec des polices appropriées, du contraste, etc.