HTMX

Simplifier le développement web interractif

HTMX est une bibliothèque JavaScript légère (14 Kb ) et sans dépendance qui permet d'ajouter facilement des fonctionnalités AJAX aux pages web en utilisant des directives HTML.

En étendant les capacités d'HTML, HTMX simplifie la gestion des requêtes HTTP asynchrones, réduisant le code javascript.

hx-get : Envoie une requête HTTP GET lorsqu'un événement est déclenché (par exemple, un clic sur un lien ou un bouton).
hx-post : Envoie une requête HTTP POST lorsqu'un événement est déclenché (par exemple, la soumission d'un formulaire).
hx-target : Définit l'élément HTML cible où le contenu renvoyé par le serveur sera inséré.
hx-swap : Détermine la manière dont le contenu renvoyé par le serveur sera inséré dans l'élément cible.
hx-trigger : Déclenche une requête AJAX en fonction d'un événement personnalisé ou d'une action spécifique.

Quelques attributs AJAX

<button type="button" hx-get="/chuck" hx-target="#chuck" hx-swap="innerHTML">
  Chuck, telle me a joke !
</button>
<div id="chuck"></div>

<div hx-get="/chuck" hx-trigger="click[ctrlKey]" hx-swap="innerHTML transition:true">
Control Click Me
</div>

Pour aller plus loin : Alpine.js

Alpine.js est un outil léger (17 Kb ) et robuste permettant d'ajouter des comportements interactifs directement dans votre balisage HTML, se positionnant comme une alternative à jQuery avec seulement 15 attributs, 6 propriétés et 2 méthodes. L'association de HTMX et Alpine.js offre une approche simple et puissante pour créer des applications web simples, en tirant parti des meilleures fonctionnalités de chaque bibliothèque.

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <span x-show="open">
        Content...
    </span>
</div>

HTMX

By Loic Ramphort