Robuuste asynchrone communicatie met de server eenvoudig implementeren

HTMX maakt het mogelijk om krachtige asynchrone functionaliteiten te implementeren in servergerichte webontwikkelingsframeworks zoals Django, zonder de complexiteit van JavaScript. In dit deel duiken we dieper in de interne werking van HTMX bij het verwerken van Ajax-verzoeken en de communicatie met Django-views, aan de hand van concrete voorbeelden.

Conceptueel diagram van HTMX Ajax-communicatie

De kern van HTMX: HTML is het bericht

Traditionele Ajax-communicatie (bijv. met axios, fetch) omvat het ontvangen van JSON-gegevens van de server, waarna JavaScript deze interpreteert en de pagina opnieuw tekent. HTMX volgt echter het principe van 'Hypermedia as the Engine of Application State (HATEOAS)'. Dit betekent dat de server, in plaats van data (JSON), volledige HTML-fragmenten verstuurt, en HTMX deze simpelweg 'vervangt' op de aangewezen locatie.

De 4 stappen van HTMX Ajax-communicatie

  1. Gebeurtenis triggeren: De gebruiker interacteert met een HTML-element (zoals een knop).
  2. Ajax-verzoek: HTMX roept de fetch-API van de browser aan om een verzoek naar de server te sturen.
  3. HTML-antwoord: De server verwerkt de logica en retourneert alleen het benodigde HTML-fragment, niet de volledige pagina.
  4. DOM-vervanging (Swap): HTMX voegt de ontvangen HTML direct in het element dat is gespecificeerd door hx-target.

Praktisch voorbeeld: "Vind ik leuk"-knop implementeren

Laten we, verder dan alleen het wijzigen van een getal, bekijken hoe HTML-fragmenten worden uitgewisseld tussen de server en de client.

1. Frontend (Template)

Dit is een methode waarbij een verzoek wordt verzonden met hx-post, en het gehele #like-section wordt vervangen door het antwoord van de server.

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

Als, zoals in dit voorbeeld, hx-target en hx-swap direct in de HTML-tag zijn gespecificeerd, weet je bij het herlezen van de code meteen "waar en hoe deze knop de pagina zal wijzigen", zonder dat je door JavaScript-bestanden hoeft te zoeken. Persoonlijk vind ik het misschien een beetje onhandig dat je de View-functie van de backend moet doorzoeken om de code te begrijpen, maar omdat de hx- code in de HTML-tag is ingebed, zoals in het voorbeeld hierboven, vraag ik me af of dit vanuit het oogpunt van Locality of Behavior beter is dan inline JavaScript.

2. Backend (Django View)

Het belangrijke punt hier is dat u render gebruikt in plaats van JsonResponse.

from django.shortcuts import render

def like_post(request):
    # 좋아요 로직 처리 (예: DB 업데이트)
    new_count = 10 

    # 전체 페이지가 아닌, 버튼 부분만 포함된 작은 템플릿 조각을 반환합니다.
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })

3. Deel-template voor antwoord

Dit is het 'HTML-fragment' dat de server naar de client zal sturen. Aangezien hx-swap="outerHTML" is ingesteld, zal deze inhoud het gehele bestaande #like-section vervangen.

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

Waarom doen we dit? (Begrip van het principe)

Bij de traditionele methode moest je, na het ontvangen van JsonResponse({'likes': 10}), JavaScript-code schrijven zoals document.getElementById('count').innerText = data.likes.

Maar de HTMX-methode: 1. Voorkomen van logicafragmentatie: De server (Django-template) beheert de definitie van "hoe het scherm moet veranderen wanneer er op 'Vind ik leuk' wordt geklikt". 2. Data-view synchronisatie: Omdat de HTML die door de server wordt verzonden direct op het scherm wordt geplaatst, worden fouten die optreden bij het verwerken van gegevens aan de clientzijde geëlimineerd.

Ter afsluiting van dit deel

Het gebruik van HTMX is niet alleen het verminderen van code, maar een terugkeer naar de essentie van het web: het optimaal benutten van 'Hypermedia (HTML)'. Hierdoor kunnen ontwikkelaars ontsnappen aan de complexiteit van JavaScript-statusbeheer en zich meer richten op de serverlogica.

Lees ook :