HTMX: Een nieuwe trend in web ontwikkeling onder de loep genomen

In deze blog vertelt onze collega Ruben wat HTMX is, hoe we het inzetten binnen Four Digits en hoe het zich verhoudt tot onze favoriete CMS tool Wagtail. Laten we beginnen!

Wat is HTMX?

HTMX is een Javascript framework die over allerlei functies beschikt. Tegelijkertijd is het licht en eenvoudig, wat HTMX geschikt maakt om snel interactieve webpagina’s te ontwikkelen. Ruben vertelt:

“Waar je normaal 10 á 20 javascript pakketjes voor nodig hebt, heb je nu alleen maar je HTML bestand nodig met wat HTMX attributes. Omdat alles in één file gebeurd kan het gebruik van HTMX enorm veel tijd besparen. Tegelijkertijd maakt het werken in één file de code een stuk logischer, wat de kwaliteit ten goede komt.”

De unieke kracht van HTMX zit vooral in de mogelijkheid om ook met de client side te communiceren. Dit maakt het mogelijk om verschillende elementen van een webpagina in real-time te updaten, zonder de complete pagina te vernieuwen. Een aantal integraties van HTMX werken hier aan mee. Laten we ze eens op een rij zetten:

AJAX calls

Deze functie maakt het voor mogelijk om asynchrone verzoeken (AJAX) te verzenden naar een server, zonder dat de complete webpagina vernieuwd hoeft te worden. De server response op dit verzoek kan vervolgens gebruikt worden om specifieke elementen van de pagina te updaten. In real-time.

CSS transitions

HTMX maakt het mogelijk om visuele effecten te creëren zonder extra JavaScript tools te integreren. Het ondersteunt CSS-transities, wat het toevoegen van vloeiende overgangen en animaties aan specifieke elementen makkelijk maakt.

Websockets

Websockets maken het mogelijk om real-time tweezijdige communicatie tussen een client en een server mogelijk te maken. Dit maakt het voor HTMX mogelijk om live updates van de server naar de client te pushen, zonder dat de client constant verzoeken hoeft te sturen. Dit is ideaal voor elementen die real-time updates vereisen, zoals chatrooms en live-dashboards.

Concrete voorbeelden van interactieve webpagina’s op basis van HTMX

De eerder genoemde integraties zorgen ervoor dat HTMX ideaal is om webpagina’s te ontwikkelen die moeten beschikken over elementen met real-time updates. Maar over wat voor websites spreken we dan?

Je kunt bijvoorbeeld denken aan een website die aandelenkoersen of live scores van voetbalwedstrijden weergeeft. Ruben noemt nog een ander voorbeeld:

“Een collega is bezig met een filtersysteem. Op het moment dat een klant op een van de filtermogelijkheden klikt, moet het aantal overgebleven artikelen direct gefilterd worden, zonder dat de complete pagina vernieuwd wordt.”

Voor een andere klant hebben we een webapplicatie ontwikkeld voor een klimaatbeheersysteem. De temperatuurwaarden moeten op deze webpagina automatisch en in real-time geüpdatet worden. Het gaat om een enorme hoeveelheid data, waarbij we niet iedere keer de complete pagina willen vernieuwen. We hebben daarom gekozen voor HTMX, want dit geeft de mogelijkheid om het specifieke element te vernieuwen.

HTMX, de beste toepassing voor iedere website?

HTMX gebruiken we voor interactieve gedeeltes van websites, terwijl we Wagtail als Content Management Systeem gebruiken. Hoewel ze dus niet per se samengaan, zijn beide benaderingen compleet anders. Binnen Four Digits zetten we beide benaderingen in om het beste uit onze websites te halen. Ruben vertelt:

“We gebruiken HTMX voor al bestaande Django websites, maar ook voor websites die om veel maatwerk en interactiviteit vragen. Wagtail is juist sterk in intuïtief en simpel CMS beheer en enorm geschikt voor het creëren en beheren van websites met veel pagina’s.”

De meeste van onze klanten willen hun website zelf op simpele wijze beheren. Wagtail maakt het mogelijk om eenvoudig pagina’s en elementen toe te voegen en te wijzigen. Daarnaast biedt het allerlei functionaliteiten om zowel de ervaring van website bezoekers als beheerders te optimaliseren. HTMX biedt vervolgens de mogelijkheid om verschillende pagina’s van de website interactief te maken en real-time info te weergeven.

Wil je weten hoe we met HTMX en/of Wagtail jouw website kunnen optimaliseren? Vraag een gratis adviesgesprek aan.