Implémenter facilement une communication asynchrone robuste avec le serveur

HTMX permet d'implémenter de puissantes fonctionnalités asynchrones dans des frameworks de développement web côté serveur comme Django, sans la complexité de JavaScript. Dans cet article, nous allons explorer les principes internes de traitement des requêtes Ajax par HTMX et les méthodes de communication concrètes avec les vues Django à travers des exemples pratiques.

Diagramme conceptuel de la communication Ajax avec HTMX

Le cœur de HTMX : le HTML est le message

Les communications Ajax traditionnelles (par exemple, avec axios ou fetch) impliquent de recevoir des données JSON du serveur, puis de les interpréter avec JavaScript pour redessiner l'écran. Cependant, HTMX adhère au principe 'Hypermedia as the Engine of Application State (HATEOAS)'. Cela signifie que le serveur envoie des fragments HTML complets au lieu de données (JSON), et HTMX se contente de les 'remplacer' à l'emplacement spécifié.

Les 4 étapes de la communication Ajax avec HTMX

  1. Déclenchement de l'événement : L'utilisateur interagit avec un élément HTML (bouton, etc.).
  2. Requête Ajax : HTMX appelle l'API fetch du navigateur pour envoyer une requête au serveur.
  3. Réponse HTML : Après avoir traité la logique, le serveur renvoie uniquement le fragment HTML nécessaire, et non la page entière.
  4. Remplacement DOM (Swap) : HTMX insère immédiatement le HTML reçu dans l'élément spécifié par hx-target.

Exemple pratique : implémenter un bouton "J'aime"

Au-delà du simple changement de nombre, voyons comment les fragments HTML sont échangés entre le serveur et le client.

1. Frontend (Template)

Voici comment envoyer une requête avec hx-post et remplacer l'intégralité de #like-section par la réponse du serveur.

<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML">
        ❤️ J'aime ({{ likes_count }})
    </button>
</div>

Comme le montre cet exemple, lorsque hx-target et hx-swap sont spécifiés directement dans la balise HTML, il est facile de comprendre "où et comment ce bouton va changer" lors de la relecture du code, sans avoir à fouiller dans les fichiers JavaScript. Personnellement, devoir consulter la fonction View du backend pour comprendre le code peut être un peu gênant. Cependant, avec le code hx- intégré dans la balise HTML comme dans cet exemple, on peut se demander si c'est mieux que le JavaScript en ligne en termes de Localité du Comportement.

2. Backend (Vue Django)

Le point crucial ici est d'utiliser render plutôt que JsonResponse.

from django.shortcuts import render

def like_post(request):
    # Traitement de la logique de "J'aime" (ex: mise à jour de la base de données)
    new_count = 10 

    # Renvoie un petit fragment de template contenant uniquement la partie du bouton, et non la page entière.
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })

3. Template partiel pour la réponse

C'est le 'fragment HTML' que le serveur enverra au client. Étant donné que hx-swap="outerHTML" est configuré, tout le #like-section existant sera remplacé par ce contenu.

<!-- partials/_like_button.html -->
<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML"
            class="btn-liked">
        ❤️ J'aime ({{ likes_count }})
    </button>
</div>

Pourquoi cette approche ? (Comprendre le principe)

Avec l'approche traditionnelle, après avoir reçu un JsonResponse({'likes': 10}), il fallait écrire du code JavaScript comme document.getElementById('count').innerText = data.likes.

Cependant, l'approche HTMX permet de : 1. Éviter la fragmentation de la logique : La définition de "comment l'écran doit changer lorsqu'un "J'aime" est cliqué" est gérée par le serveur (template Django). 2. Synchronisation données-vue : Puisque le HTML envoyé par le serveur est directement inséré dans l'affichage, les erreurs qui peuvent survenir lors du traitement des données côté client sont éliminées.

Pour conclure cet épisode

Utiliser HTMX ne consiste pas seulement à réduire le code, mais à revenir à la fonction intrinsèque du web : exploiter au maximum l'« Hypermedia (HTML) ». Cela permet aux développeurs de s'échapper de l'enfer de la gestion d'état JavaScript pour se concentrer davantage sur la logique côté serveur.

Articles connexes :