Zo boost je je WordPress site met HTMX: verbeter het platform zonder complexe frameworks

Hoewel er veel talen zijn om mee te coderen, is webontwikkeling zich momenteel aan het focussen rond een een paar betrouwbare technologieën. En dit geldt ook zeker voor WordPress.

JavaScript is nog aan het rijpen voor het platform, maar bezoekers verwachten nog altijd dynamische en interactieve websites. Frameworks kunnen die kloof overbruggen, maar de complexiteit van sommige populaire frameworks kan je ontwikkeling in de weg staan. Maak kennis met HTMX! Deze lichtgewicht bibliotheek belooft gebruiksvriendelijkheid en vereenvoudiging bij het maken van moderne webervaringen.

In dit artikel onderzoeken we hoe HTMX kan worden geïntegreerd in je eigen WordPress ontwikkelworkflow. Je leert hoe je deze krachtige en toegankelijke manier kunt gebruiken om dynamische content en interactiviteit te bouwen.

We bespreken wat HTMX is, waarom het steeds populairder wordt en hoe het aansluit op WordPress. Je krijgt bovendien een praktische handleiding voor het integreren en gebruiken van HTMX met WordPress.

Wat HTMX is

In een notendop is HTMX een JavaScript bibliotheek die de standaard HyperText Markup Language (HTML) uitbreidt zonder dat je vanilla of framework JavaScript hoeft te schrijven. Met deze uitbreidingen heb je ook toegang tot andere technologieën:

• Asynchrone JavaScript en XML (AJAX). HTMX gebruikt AJAX om ‘async’ verzoeken aan de server uit te voeren. Hierdoor kun je pagina’s gedeeltelijk bijwerken zonder dat je de pagina helemaal opnieuw hoeft te laden.
• WebSockets. Je kunt WebSocket verbindingen tot stand brengen en realtime tweerichtingscommunicatie tussen de browser en de server mogelijk maken.
• Server-sent events (SSE). Met deze technologie kan de server gegevens naar de browser pushen. Van daaruit kun je HTMX gebruiken om pagina-updates in realtime uit te voeren.
• CSS transitions. Je kunt integreren met CSS transitions, waarmee je vloeiende en geanimeerde updates op je site kunt implementeren.

Het idee achter HTMX is om de manier waarop je dynamische, interactieve webapps maakt, te vereenvoudigen. De belangrijkste functionaliteit is hoe het GET, POST, PUT, PATCH, en DELETE HTTP-verzoeken kan maken van HTML-elementen. Dit betekent dat je gelikte en vloeiende gedeeltelijke pagina-updates kunt verwerken zoals een mobiele app. Over het geheel genomen is HTMX een krachtige toolkit waarmee je een dynamische webervaring kunt creëren zonder dat je massa’s JavaScript-code nodig hebt.

Waarom we het allemaal over HTMX hebben

Er is de laatste tijd veel te doen geweest over HTMX, en dan met name over het aantal zoekopdrachten naar deze bibliotheek die de afgelopen vijf jaar explosief zijn gestegen.

Deze populariteitsstijging is deels te danken aan de sociale media en de zichtbaarheid op ontwikkelaarsforums. HTMX heeft echter verschillende factoren die het een aantrekkelijke ontwikkeloptie maken.

• Eenvoud. Omdat HTMX bekende HTML-syntaxis gebruikt om je te helpen dynamische, interactieve webapps te maken, is het super eenvoudig te implementeren en heeft het bijna niet de complexiteit van typische JavaScript frameworks.
• Prestaties. Door de hoeveelheid benodigde JavaScript te minimaliseren, kan HTMX snellere laadtijden en betere prestaties leveren dan andere frameworks, vooral voor mobiele apparaten.
• Rendering aan de serverkant. Server-side rendering is geweldig als je de eerste laadtijden van pagina’s en zoekmachineoptimalisatie (SEO) wilt verbeteren. HTMX heeft dit geïntegreerd in zijn functieset.
• Progressieve verbetering. Dit betekent het toevoegen van interactiviteit aan websites zonder de functionaliteit af te breken voor degenen die JavaScript uitschakelen. HTMX werkt volgens deze principes, dus er is een toegankelijkheidsvoordeel.

Bovendien heeft HTMX, in tegenstelling tot sommige grotere frameworks, geen complex bouwproces of toolchain nodig. In combinatie met een veel lagere leercurve, is het integreren van de bibliotheek in je projecten eenvoudiger.

Deze voordelen leiden op hun beurt weer tot meer discussie over HTMX en een grotere acceptatie ervan. Als je op zoek bent naar een eenvoudigere oplossing voor het maken van interactieve webervaringen, dan zou deze bibliotheek wel eens jouw keuze kunnen zijn.

WordPress’ architectuur in relatie tot JavaScript

De geschiedenis van WordPress met JavaScript kwam in een stroomversnelling vanaf de State of the Word 2015, toen Matt Mullenweg afsloot met de zin: “Leer JavaScript goed.”

De typische route voor WordPress developers was om flink te investeren in interactieve en dynamische onderdelen op een website. In de meeste gevallen was jQuery het WordPress JavaScript framework. Zelfs de uberpopulaire Harvard Gazette website bouwt bovenop jQuery:

WordPress maakt daarom standaard gebruik van jQuery. Daarnaast worden veel kernfuncties, plugins en thema’s uitgebreid gebruikt. Deze aanpak is consistent en wordt breed ondersteund.

Maar naarmate webontwikkeling zich ontwikkelde, ontwikkelde ook WordPress’ benadering van JavaScript zich. De introductie van de Block Editor ging gepaard met een verschuiving naar het gebruik van het React framework voor het bouwen van gebruikersinterfaces, vooral binnen het WordPress dashboard.

De voor- en nadelen van de huidige JavaScript implementatie van WordPress

Dit betekent dat er een mix is van frameworks met ondersteuning in de code code van WordPress. Dit heeft een aantal plus- en minpunten. Eerst de positieve punten:

• Er is wijdverspreide compatibiliteit voor zowel React als jQuery. Het eerste is een krachtig en populair framework. Voor jQuery heeft het een langdurige associatie met WordPress.
• Veel developers zijn bekend met de frameworks omdat React en jQuery populair zijn. Bovendien kun je meer bronnen vinden om beide te leren en problemen op te lossen.
• WordPress biedt ingebouwde ondersteuning voor AJAX via wp_ajax.

Deze voordelen gaan echter ook gepaard met een aantal nadelen:

• Gebruik van jQuery geeft een aanslag op de prestaties van je site, en voor sommige toepassingen heb je het framework helemaal niet nodig.
• Niet alle ‘moderne’ features en functionaliteit van JavaScript zijn geïmplementeerd in WordPress vanwege compatibiliteit en beveiliging. Dit kan een probleem zijn als je iets speciaals wilt bouwen.
• Met de toevoeging van React aan delen van WordPress (zoals de Block en Site Editors) heb je een nog grotere leercurve dan ooit tevoren.

De huidige JavaScript architectuur van WordPress is geschikt als je de ontwikkelingskennis hebt van de aanbevolen frameworks of de tijd om ze te leren. Zo niet, dan wil je waarschijnlijk een oplossing die niet de complexiteit van de typische frameworks met zich meebrengt en toch een moderne interactieve ervaring aan de voorkant biedt. Dit is waar HTMX een overweging zou moeten zijn.

Waarom HTMX beter geschikt zou kunnen zijn voor sommige WordPress ontwikkelingstaken

HTMX biedt een paar overtuigende voordelen als het gaat om WordPress ontwikkeling. Het zou het midden kunnen houden tussen de eenvoud van jQuery en het moderne, krachtige React.

Over sommige van deze aspecten hebben we het al gehad, maar laten we ze nog eens kort samenvatten:

• Het ‘gewicht’ van HTMX kan een grote invloed hebben op de prestaties in vergelijking met jQuery en React.
• De meeste WordPress ontwikkelaars beschouwen zichzelf als het meest deskundig in HTML en PHP in plaats van JavaScript. HTMX vormt een gemakkelijkere toegangsdrempel als je ermee werkt, net als met een markup taal.
• PHP en HTMX werken ook goed samen dankzij de server-side rendering, wat weer een positief effect kan hebben op de prestaties.
• Ondanks dat het een ‘nieuwere’ bibliotheek is, kun je HTMX met meer gemak integreren en snel leren hoe het werkt. Dit zal je workflow ten goede komen.

Voor WordPress ontwikkeling zijn we ook blij met het gemak waarmee je een prototype kunt maken van nieuwe functionaliteit voor een site. Je kunt snel complexe nieuwe features bouwen door te coderen binnen de bestaande HTML. Van daaruit heb je de flexibiliteit om waar nodig React componenten of een beetje jQuery toe te voegen.

De progressieve verbeteringsprincipes van HTMX spreken ook aan. Toegankelijkheid zou centraal moeten staan in je ontwerpstrategie, en met HTMX kun je interactiviteit bouwen zonder dat dit ten koste gaat van mensen die ervoor kiezen JavaScript uit te schakelen in de browser.

Tot slot is een belangrijk voordeel van HTMX dat het geen custom of speciale server-side setup vereist. Je kunt je HTMX markup gebruiken met elke host – inclusief Kinsta.

Gezien de kwaliteitsprestaties van onze hostingvoorzieningen, zou een site die HTMX gebruikt snel moeten zijn. Dit heeft invloed op je SEO prestaties, verkeersaantallen, ontwikkeltijd, workflow voor probleemoplossing en de hele ontwikkelingsketen.

Typische gebruikssituaties voor HTMX

We hadden het erover in de laatste paragraaf, maar HTMX zal geen bibliotheek zijn die je gebruikt als directe vervanging voor een van de meer bekende JavaScript frameworks. In plaats daarvan zal het het beste werken naast wat al bestaat om waar nodig te helpen de last te dragen.

Dit betekent dat je HTMX zult gebruiken voor bepaalde taken waar jQuery en React niet optimaal voor zijn. Voordat we dieper ingaan op de implementatie van HTMX in WordPress, geven we drie veelvoorkomende scenario’s waarbij de bibliotheek WordPress zou kunnen verbeteren.

Gedeeltelijke pagina herladen

De belangrijkste toepassing voor HTMX is hoe je gedeeltelijke paginaverversingen kunt implementeren met een minimum aan gedoe. Dit kan voor veel developers een groot voordeel zijn, vooral voor snelle mockups en prototypes. HTMX zou echter resultaten van productiekwaliteit kunnen leveren.

Het kan je bijvoorbeeld helpen bij het implementeren van live zoekfunctionaliteit op je site:

De HTMX voorbeeldbibliotheek gaat ook in op de methodologie voor het uitvoeren van realtime updates op andere inhoudsgebieden binnen de pagina. Hun voorbeeld gebruikt bijvoorbeeld een contactformulier met een tabel met beschikbare contactpersonen die wordt vernieuwd zodra een gebruiker een nieuwe toevoeging indient. HTMX heeft een aantal elegante manieren om dit te bereiken:

<div id="table-and-form">
    <h2>Contacts</h2>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="contacts-table">

        ...

      </tbody>
    </table>

    <h2>Add A Contact</h2>

    <form hx-post="/contacts" hx-target="#table-and-form">
      <label>
        Name
            <input name="name" type="text">  
      </label>

      <label>
        Email
            <input name="email" type="email">  
      </label>
    </form>
</div>

Het formulier gebruikt de attributen hx-post en hx-target om het doel uit te breiden. Je zou ook HTMX attributen kunnen gebruiken om formulierinvoer te behouden na een foutmelding of een andere validatiepoging waarbij verversen wordt gebruikt:

<input form="binaryForm" type="file" name="binaryFile">

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <button type="submit">Submit</button>
</form>

Hier plaats je de invoer voor het binaire bestand buiten het primaire formulierelement en gebruik je de attributen hx-swap en hx-target.

Dynamisch laden

Deze benadering van dynamisch verversen en laden kan ook geschikt zijn voor meer algemene taken. Neem bijvoorbeeld oneindig scrollen:

<tr hx-get="/contacts/?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Agent Smith</td>
  <td>[email protected]</td>
  <td>55F49448C0</td>
</tr>

Het hx-swap attribuut fungeert als een ‘listener’ voor het hx-trigger attribuut. Zodra een gebruiker het einde van de lijst bereikt, laadt HTMX oneindig de tweede pagina met contactpersonen in.

Je zou dezelfde methode ook kunnen toepassen op de feature voor lazyloaden:

Dit gebruikt opnieuw de attributen hx-get en hx-trigger om een htmx-settling transition te starten om de grafiek te laden met behulp van een langzame fade-in.

Presentatie van gegevens

Het zal geen verrassing zijn dat HTMX uitstekend geschikt is voor het presenteren van informatie op het scherm met behulp van interactieve of anderszins dynamische elementen.

Je kunt bijvoorbeeld alle soorten inhoud filteren, zoals waardeselecties. Hierbij worden de opties in een lijst ingevuld op basis van die in een andere lijst:

Je kunt zelfs met evenveel gemak modale dialoogvensters of interface-tabbladen instellen. Dit laat ook zien hoe HTMX werkt naast andere bibliotheken en frameworks, zoals Bootstrap:

Deze flexibiliteit geldt ook voor het implementeren van tabbladen. Er zijn twee manieren om dit te doen: door vanilla JavaScript en HTMX te combineren of door de principes van Hypertext As The Engine Of Application State (HATEOAS) te gebruiken:

Er zijn nog veel meer manieren om HTMX te gebruiken voor front-end site-elementen met de kern aan de serverkant. In het volgende gedeelte geven we je de tools om je eigen visie binnen WordPress te creëren.

Hoe HTMX integreren in WordPress

Als je HTMX wilt toevoegen aan je WordPress website, is het goede nieuws dat het snel en probleemloos gaat. We bekijken een aanpak die bestaat uit drie stappen. We behandelen niet het hele proces en de code om functionaliteit voor WordPress te ontwikkelen, maar we behandelen wel alle belangrijke punten die je moet volgen.

Bovendien zou een groot deel van het proces, vooral de eerste stap, typerend moeten zijn als je al eerder voor WordPress hebt ontwikkeld.

1. HTMX inschakelen in je PHP code

Zoals met alle extra scripts voor WordPress, moet je de HTMX bibliotheek opnemen in de code van je thema of plugin.

wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);

Een objectief goed idee is echter om de enqueue te wrappen in een functie die ook een Block in WordPress enqueet en registreert. Dit hangt er natuurlijk vanaf of je project vereist dat je met de Block Editor werkt.

Het laatste onderdeel voor het enqueuen van HTMX is het callen van de hele functie met add_action. Je zult later terug moeten komen op het gebruik van hooks en filters als je met AJAX requests werkt.

2. HTMX elementen toevoegen aan je WordPress templatebestanden

Uit onze use cases kun je opmaken dat HTMX de juiste opmaak in de HTML nodig heeft om AJAX verzoeken te verwerken en te triggeren. De bibliotheek gebruikt typische HTTP verzoek attributen om zijn eigen attributen te maken – GET, POST, PUSH, PATCH, en DELETE – met een hx- prefix:

hx-post

WordPress’ AJAX verzoeken gebruiken het admin-ajax.php endpoint, wat je moet onthouden! De typische elementen die je maakt met HTMX maken een AJAX verzoek, sturen het naar een doelelement en verwerken mogelijk een trigger.

Met het hx-target attribuut kun je aangeven waar het resultaat van je verzoek naartoe gaat. Dit kan een andere pagina zijn, een specifieke div, of iets anders. Zie het als HTML anchor tags:

<input type="search"
        name="search" placeholder="Search..."
        hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
        hx-target="#search-results"
        …

HTMX gebruikt “natuurlijk” en “niet-natuurlijk” om een actie te definiëren. submit activeert bijvoorbeeld een formulier en dit is een natuurlijke element event. Voor niet-natuurlijke element events gebruik je het hx-trigger attribuut. Deze triggers kunnen een van de complexere onderdelen van HTMX zijn, maar zijn toch eenvoudig te begrijpen.

Je kunt bijvoorbeeld een trigger gebruiken om een invoerveld te monitoren:

…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…

Het veranderen van wat er in een invoerveld staat, zal een update elders op de pagina triggeren. Een ander voorbeeld is dat je misschien eenmalig een gebeurtenis wilt triggeren op basis van een niet-typische actie, zoals het invoeren van de cursor in een deel van het scherm:

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [Here Mouse, Mouse!]
</div>

Dit kan je inspireren tot het maken van toepassingen zoals pop-ups of andere modale vakken. Maar voordat je deze in actie kunt zien, moet je het AJAX-verzoek verwerken.

3. De AJAX verzoeken verwerken

Tot slot moet je het AJAX-verzoek aan de serverkant afhandelen. Voor WordPress is het handig om dit allemaal in een apart bestand op te slaan. Je kunt het noemen zoals je wilt, maar ajax-functions.php is beschrijvend en duidelijk genoeg.

Dit deel van het gebruik van HTMX vereist dat je je PHP vaardigheden gebruikt. Het verwerken van je AJAX verzoeken is uniek voor jouw specifieke project. Hier koppel je de attributen die je noemt in je templatebestanden aan server-side verwerking.

Natuurlijk doe je dit sowieso, of je nu codeert met HTMX, vanilla JavaScript of iets anders. Hier is wat pseudocode om te laten zien hoe dit eruit zou kunnen zien:

function my_search_action() {
    $search_term = sanitize_text_field( $_POST['search'] );

    $args = array(
        's' => $search_term,
        'post_type' => 'post',
        'posts_per_page' => 5
    );

    $query = new WP_Query( $args );

    if ( $query->have_posts() ) :
        while ( $query->have_posts() ) : $query->the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<p>' . get_the_excerpt() . '</p>';
        endwhile;
    else:
        echo 'No results found.';
    endif;

    wp_reset_postdata();

    wp_die();
}

Desondanks is dit misschien niet relevant of lijkt het zelfs niet op de AJAX afhandeling van je eigen project. Dezelfde vaardigheden die je gebruikt voor het bouwen van Block templates, het uitbreiden van plugins met PHP en meer, helpen je bij het maken van je eigen AJAX request handlers en functies.

Tips voor het gebruik van HTMX met WordPress

Hoewel het gebruik van HTMX een van de eenvoudigste manieren is om dynamische inhoud met WordPress te implementeren, moet het nog steeds zorgvuldig worden beheerd en overwogen. Er zijn ook een paar manieren om je ontwikkelervaring te verbeteren.

De eerste tip heeft te maken met de ‘volwassenheid’ van HTMX. Op dit moment is het een nieuwe bibliotheek voor het platform, dus het heeft niet hetzelfde integratieniveau als bijvoorbeeld jQuery.

HTMX heeft goede documentatie, maar er zijn niet zoveel bronnen voor het combineren van de bibliotheek met WordPress. Dit betekent dat je zelf het nodige werk moet verzetten om dingen te laten werken zonder het vangnet van een kant-en-klare community.

Een van de belangrijkste adviezen die we kunnen geven is om je functionaliteit voorlopig in een plugin te bouwen. Dit geeft je structuur en eenvoudiger beheer terwijl je controleert op bugs en andere integratiefouten.

Nu we het toch over WordPress hebben, probeer te begrijpen hoe het admin-ajax.php bestand verbonden is met de rest van het ecosysteem, omdat veel interacties hiermee te maken hebben.

Hoewel HTMX geweldige prestaties levert, moet je ervoor zorgen dat het AJAX gebruik laag genoeg is om de laadsnelheid of SEO van je site niet te beïnvloeden. Het debuggen van requests moet ook een vast onderdeel zijn van je workflow, vooral de XMLHttpRequest (XHR) metriek binnen de devtools van je browser.

Dit is de registratie van verzoek- en responsgegevens, die je zult gebruiken om AJAX-verzoeken en API-calls (Application Programming Interface) te debuggen. Gezien het feit dat HTMX nog geen hechte integratie heeft met WordPress, kan het debuggen een meer relevante taak zijn dan het zou zijn met andere JavaScript frameworks.

Samenvatting

Voor WordPress ontwikkelaars die dynamische, interactieve site-elementen willen maken zonder dat ingewikkelde JavaScript frameworks je tijd domineren, biedt HTMX prachtige mogelijkheden. Het laat je bouwen binnen HTML en biedt een lean alternatief voor jQuery en React, terwijl het je toch moderne interactiviteit biedt.

In de praktijk zul je HTMX naast die andere frameworks gebruiken, omdat het niet voor alle taken geschikt is. Desondanks is het eenvoudig te implementeren en biedt het je een snelle manier om een prototype te maken van de interactieve elementen van je site – en het zou zelfs je productieversie kunnen worden.

Lijkt HTMX en WordPress jou een aantrekkelijke combinatie? Laat ons weten wat je ervan vindt in de comments hieronder!

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).

• LinkedIn