HTMX.org

Voir la vidéo
Intermédiaire
Télécharger la vidéo

Lorsque l'on crée une application dynamique on a souvent besoin d'intéragir avec le serveur pour des interactions plus ou moins complexes. Dans le cas d'une application générée côté serveur cela peut rapidement nécessiter une quantité conséquente de JavaScript pour des opérations relativement classiques.

Je clique sur cet élément, je demande au serveur une partie de l'HTML et je l'injecte ensuite à différents endroits dans ma page.

HTMX est une librairie qui va vous permettre de décrire ce type d'interactions facilement à l'aide d'attributs HTML spéciaux.

<tr id="replaceMe">
  <td colspan="3">
    <button class='btn' hx-get="/contacts/?page=2" 
                        hx-target="#replaceMe" 
                        hx-swap="outerHTML">
         Charger plus d'éléments... <img class="htmx-indicator" src="/img/spinner.svg">
    </button>
  </td>
</tr>

Avec cet exemple la page /contacts/?page=2 sera appelée et le contenu HTML renvoyé par le serveur remplacera le <tr id="replaceMe">. Cela implique par contre de faire en sorte que la réponse serveur ne renvoie que le contenu à remplacer. Pour cela il est possible de regarder les en-têtes de la requête pour rechercher la présence de l'en tête HX-Request.

Remplacement "Out of band"

Dans des cas plus complexes on peut avoir envie de remplacer plusieurs éléments dans la page source. Dans ce cas là il sera possible d'utiliser l'attribut hx-swap-oob dans les éléments de la réponse pour définir les éléments que l'on va remplacer.

Sur notre page de départ on va demander à charger la page suivante

<div id="posts">
    <!-- Liste des articles -->
</div>

<div id="more">
    <button 
      class="btn btn-primary" 
      hx-get="/?page=2">
        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
        Voir plus
    </button>
</div>

Dans la réponse renvoyée par le serveur, on va utiliser l'attribute hx-swap-oob pour définir les éléments à cibler (le système se base sur l'id de l'élément) et comment le remplacement doit être fait.

<div id="posts" hx-swap-oob="beforeend">
    <!-- Liste des articles -->
</div>

<div id="more" hx-swap-oob="true">
    <button 
      class="btn btn-primary" 
      hx-get="/?page=3">
        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
        Voir plus
    </button>
</div>

Extension et chargement

Lorsque htmx va faire une requête il va automatiquement ajouter la classe htmx-request à l'élément source et il propose aussi une classe htmx-indicator qui va être masqué (opacity: 0) par défaut. 

<button class='btn' hx-get="/contacts/?page=2">
        Charger plus d'élément... <img class="htmx-indicator" src="/img/spinner.svg">
</button>

Vous pouvez ajouter votre propre style pour donner l'apparence que vous souhaitez aux éléments pendant leur chargement. Vous pouvez aussi cibler l'élément qui recevra l'indicateur de chargement grâce à l'attribut hx-indicator.

<div>
    <button hx-post="/example" hx-indicator="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
</div>

hx-boost

En plus des attributs hx-get, hx-post et hx-delete il est aussi possible d'utiliser l'attribut hx-boost pour faire de l'amélioration progressive et "booster" les liens et les formulaires.

<div hx-boost="true">
  <a href="/page1">Page 1</a>
  <a href="/page2">Page 2</a>
</div>

Les liens seront alors automatiquement chargés en Ajax et le contenu de la nouvelle page sera injecté sur la page courante. Si des attributs hx- sont présents sur (ou autour) de l'élément ils seront respectés.

Publié
Technologies utilisées
HTML
Auteur :
Grafikart
Partager