Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 3): Integratie met Django

De robuuste backend Django, met zijn 'Batteries Included'-filosofie, en HTMX, dat slim gebruikmaakt van de vers gebakken HTML-fragmenten die de backend serveert, vormen een perfecte combinatie.

In dit derde deel van onze serie over het vereenvoudigen van dynamische webontwikkeling met Django en HTMX bouwen we voort op de vorige delen en bespreken we twee concrete methoden om HTMX in een bestaand Django-project te integreren.

Afbeelding van de combinatie van Django en HTMX

1. Direct gebruik zonder externe pakketten

Dit is de meest pure en lichtgewicht methode. Zonder complexe installatieprocessen kunt u de functionaliteit van HTMX direct gebruiken door simpelweg één scriptregel toe te voegen aan uw HTML-template.

Installatiemethode

De officiële HTMX-documentatie stelt verschillende installatiemethoden voor, maar de snelste manier is ongetwijfeld het gebruik van een CDN.

  • CDN gebruiken (het snelst): Voeg de onderstaande code toe binnen de <head>-tag van uw base.html.
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • Direct downloaden: Als beveiliging of offline omgevingen belangrijk zijn, kunt u htmx.min.js downloaden, in de static-map van uw project plaatsen en het pad ernaartoe specificeren.
  • npm: Als u een buildsysteem gebruikt, kunt u het installeren met het commando npm install htmx.org.

Ga direct naar de officiële HTMX installatiedocumentatie

2. De django-htmx package gebruiken

Binnen het Django-ecosysteem bestaat er een specifieke bibliotheek die helpt om HTMX nog meer 'op zijn Django's' te gebruiken: django-htmx.

Installatie en configuratie

Volg de onderstaande stappen volgens de officiële django-htmx documentatie.

  1. Pakket installeren

    bash python -m pip install django-htmx

  2. INSTALLED_APPS registreren

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. Middleware toevoegen

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

Hoe handig is django-htmx?

Het is begrijpelijk dat men zich afvraagt of het nodig is om een extra pakket zoals django-htmx te installeren, aangezien HTMX op zichzelf al een zeer eenvoudig hulpmiddel is. Inderdaad, de kernfunctionaliteit kan zonder dit pakket worden geïmplementeerd. Echter, door de handige functies die dit pakket biedt, wordt duidelijk waarom veel ontwikkelaars hiervoor kiezen.

Volgens de officiële documentatie van django-htmx is het belangrijkste kenmerk dat het de request-object uitbreidt via middleware. Door de middleware te registreren, wordt een request.htmx-attribuut toegevoegd, waardoor u eenvoudig toegang krijgt tot gedetailleerde informatie zoals:

  • Verzoekinformatie controleren: boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • Target en trigger beheren: target, trigger, trigger_name, triggering_event

Daarnaast ondersteunt het twee speciale tags die het werken met templates vergemakkelijken.

  • {% htmx_script %}: Dit is de hoofdtag die het HTMX-bibliotheekscript invoegt.
  • {% django_htmx_script %}: Dit is een hulptag die alleen de uitbreidingsscripts voor debugging toevoegt wanneer HTMX rechtstreeks via CDN of als statisch bestand is geïmplementeerd.

Bijzonder indrukwekkend zijn de 11 nuttige methoden die in de django_htmx.http-module zijn opgenomen. Onder deze methoden valt trigger_client_event() er absoluut uit. Hiermee kunt u aan serverzijde eenvoudig de HX-Trigger-header configureren en meesturen met de respons, waardoor client-side events rechtstreeks vanaf de server kunnen worden aangestuurd. Zodra u er vertrouwd mee bent, zult u merken dat het een krachtig en veelgebruikt hulpmiddel is.

Natuurlijk kunnen al deze functionaliteiten ook door de ontwikkelaar zelf worden geïmplementeerd, bijvoorbeeld door middleware te schrijven of headers handmatig te manipuleren. Voor degenen die, net als ik, de voorkeur geven aan zelf implementeren, zal het misschien niet als een essentieel pakket aanvoelen.

Kortom, django-htmx is geen 'must-have', maar wel degelijk een pakket dat 'de ontwikkeling aanzienlijk prettiger maakt'. De omvang van de officiële documentatie is beperkt, dus met één of twee uur studie heeft u het voldoende onder de knie. Beslis zelf of u het wilt implementeren, afhankelijk van de aard van uw project.

Afronding

Als u alleen van plan bent om een paar eenvoudige toggle-knoppen of 'like'-functionaliteiten te implementeren, is direct gebruik (via CDN) ruimschoots voldoende. Het niet onnodig vergroten van afhankelijkheden kan immers de meest economische keuze zijn.

Echter, als de projectomvang toeneemt en u zich vaker in situaties bevindt waarin één view zowel volledige pagina's als gedeeltelijke pagina's moet afhandelen, dan is django-htmx zeker het overwegen waard.

Welke aanpak spreekt u het meest aan? Feit is dat django-htmx geen zwaar pakket is; het is vrij lichtgewicht, dus het kan zelfs de juiste keuze zijn om het gewoon zonder veel nadenken te installeren en te gebruiken. Uiteindelijk hangt alles af van de voorkeuren en het karakter van de ontwikkelaar. 'Ik wil zo min mogelijk afhankelijkheden.' of 'Ik doe het liefst zoveel mogelijk zelf.' Het zijn dit soort ontwikkelvoorkeuren die de beslissing bepalen, denk ik.

Maar welke keuze u ook maakt, met HTMX kunt u het plezier ervaren om los te komen van JavaScript en terug te keren naar de eenvoud van HTML.

Gerelateerde artikelen: