Wat HTMX is<\/h2>\n![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
Het HTMX-logo.<\/figcaption><\/figure>\nIn een notendop is HTMX<\/a> een JavaScript bibliotheek die de standaard HyperText Markup Language (HTML)<\/a> uitbreidt zonder dat je vanilla of framework JavaScript<\/a> hoeft te schrijven. Met deze uitbreidingen heb je ook toegang tot andere technologie\u00ebn:<\/p>\n\n- Asynchrone JavaScript en XML (AJAX).<\/strong> 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.<\/li>\n
- WebSockets.<\/strong> Je kunt WebSocket verbindingen tot stand brengen en realtime tweerichtingscommunicatie tussen de browser en de server mogelijk maken.<\/li>\n
- Server-sent events (SSE).<\/strong> 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.<\/li>\n
- CSS transitions.<\/strong> Je kunt integreren met CSS transitions<\/a>, waarmee je vloeiende en geanimeerde updates op je site kunt implementeren.<\/li>\n<\/ul>\n
Het idee achter HTMX is om de manier waarop je dynamische, interactieve webapps maakt, te vereenvoudigen. De belangrijkste functionaliteit is hoe het GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, en DELETE<\/code> HTTP-verzoeken<\/a> 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\u00ebren zonder dat je massa’s JavaScript-code nodig hebt.<\/p>\nWaarom we het allemaal over HTMX hebben<\/h2>\n
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<\/a> explosief zijn gestegen.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
De Google Trends grafiek toont een stijging in zoekopdrachten naar HTMX over een periode van vijf jaar.<\/figcaption><\/figure>\nDeze 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.<\/p>\n
\n- Eenvoud.<\/strong> 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<\/a>.<\/li>\n
- Prestaties.<\/strong> Door de hoeveelheid benodigde JavaScript te minimaliseren, kan HTMX snellere laadtijden<\/a> en betere prestaties leveren dan andere frameworks, vooral voor mobiele apparaten.<\/li>\n
- Rendering aan de serverkant.<\/strong> Server-side rendering is geweldig als je de eerste laadtijden van pagina’s en zoekmachineoptimalisatie (SEO)<\/a> wilt verbeteren. HTMX heeft dit ge\u00efntegreerd in zijn functieset.<\/li>\n
- Progressieve verbetering.<\/strong> 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.<\/li>\n<\/ul>\n
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.<\/p>\n
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.<\/p>\n
WordPress’ architectuur in relatie tot JavaScript<\/h2>\n
De geschiedenis van WordPress met JavaScript kwam in een stroomversnelling vanaf de State of the Word 2015<\/a>, toen Matt Mullenweg afsloot met de zin: “Leer JavaScript goed.”<\/p>\nDe typische route voor WordPress developers was om flink te investeren in interactieve en dynamische onderdelen op een website. In de meeste gevallen was jQuery<\/a> het WordPress JavaScript framework. Zelfs de uberpopulaire Harvard Gazette website<\/a> bouwt bovenop jQuery:<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
De Harvard Gazette website maakt gebruik van WordPress en jQuery.<\/figcaption><\/figure>\nWordPress maakt daarom standaard gebruik van jQuery<\/a>. Daarnaast worden veel kernfuncties, plugins en thema’s uitgebreid gebruikt. Deze aanpak is consistent en wordt breed ondersteund.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
Het tonen van de Blocks zijbalk in de WordPress Block Editor.<\/figcaption><\/figure>\nMaar naarmate webontwikkeling zich ontwikkelde, ontwikkelde ook WordPress’ benadering van JavaScript zich. De introductie van de Block Editor<\/a> ging gepaard met een verschuiving naar het gebruik van het React framework<\/a> voor het bouwen van gebruikersinterfaces, vooral binnen het WordPress dashboard.<\/p>\nDe voor- en nadelen van de huidige JavaScript implementatie van WordPress<\/h3>\n
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:<\/p>\n
\n- 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.<\/li>\n
- 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.<\/li>\n
- WordPress biedt ingebouwde ondersteuning voor AJAX via
wp_ajax<\/code>.<\/li>\n<\/ul>\nDeze voordelen gaan echter ook gepaard met een aantal nadelen:<\/p>\n
\n- Gebruik van jQuery<\/a> geeft een aanslag op de prestaties van je site, en voor sommige toepassingen heb je het framework helemaal niet nodig.<\/li>\n
- Niet alle ‘moderne’ features en functionaliteit van JavaScript zijn ge\u00efmplementeerd in WordPress vanwege compatibiliteit en beveiliging. Dit kan een probleem zijn als je iets speciaals wilt bouwen.<\/li>\n
- Met de toevoeging van React aan delen van WordPress (zoals de Block en Site Editors) heb je een nog grotere leercurve dan ooit tevoren.<\/li>\n<\/ul>\n
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.<\/p>\n
Waarom HTMX beter geschikt zou kunnen zijn voor sommige WordPress ontwikkelingstaken<\/h2>\n
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.<\/p>\n
Over sommige van deze aspecten hebben we het al gehad, maar laten we ze nog eens kort samenvatten:<\/p>\n
\n- Het ‘gewicht’ van HTMX kan een grote invloed hebben op de prestaties in vergelijking met jQuery en React.<\/li>\n
- 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.<\/li>\n
- PHP en HTMX werken ook goed samen dankzij de server-side rendering, wat weer een positief effect kan hebben op de prestaties.<\/li>\n
- 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.<\/li>\n<\/ul>\n
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.<\/p>\n
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.<\/p>\n
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<\/a>.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
De Kinsta startpagina met het MyKinsta dashboard.<\/figcaption><\/figure>\nGezien 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.<\/p>\n
Typische gebruikssituaties voor HTMX<\/h2>\n
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.<\/p>\n
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.<\/p>\n
<\/div><\/kinsta-auto-toc>\nGedeeltelijke pagina herladen<\/h3>\n
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.<\/p>\n
Het kan je bijvoorbeeld helpen bij het implementeren van live zoekfunctionaliteit op je site:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Een live, dynamische zoekinterface met HTMX.<\/figcaption><\/figure>\nDe HTMX voorbeeldbibliotheek<\/a> gaat ook in op de methodologie voor het uitvoeren van realtime updates op andere inhoudsgebieden binnen de pagina. Hun voorbeeld<\/a> 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:<\/p>\n<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nHet formulier gebruikt de attributen hx-post<\/code> en hx-target<\/code> om het doel uit te breiden. Je zou ook HTMX attributen kunnen gebruiken om formulierinvoer te behouden<\/a> na een foutmelding of een andere validatiepoging waarbij verversen wordt gebruikt:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nHier plaats je de invoer voor het binaire bestand buiten het primaire formulierelement en gebruik je de attributen hx-swap<\/code> en hx-target<\/code>.<\/p>\nDynamisch laden<\/h3>\n
Deze benadering van dynamisch verversen en laden kan ook geschikt zijn voor meer algemene taken. Neem bijvoorbeeld oneindig scrollen<\/a>:<\/p>\n<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nHet hx-swap<\/code> attribuut fungeert als een ‘listener’ voor het hx-trigger<\/code> attribuut. Zodra een gebruiker het einde van de lijst bereikt, laadt HTMX oneindig de tweede pagina met contactpersonen in.<\/p>\nJe zou dezelfde methode ook kunnen toepassen op de feature voor lazyloaden<\/a>:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
HTMX gebruiken om lazyloaden te implementeren.<\/figcaption><\/figure>\nDit gebruikt opnieuw de attributen hx-get<\/code> en hx-trigger<\/code> om een htmx-settling transition te starten om de grafiek te laden met behulp van een langzame fade-in.<\/p>\nPresentatie van gegevens<\/h3>\n
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.<\/p>\n
Je kunt bijvoorbeeld alle soorten inhoud filteren, zoals waardeselecties<\/a>. Hierbij worden de opties in een lijst ingevuld op basis van die in een andere lijst:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
HTMX gebruiken om waardeselecties toe te wijzen aan site-elementen.<\/figcaption><\/figure>\nJe kunt zelfs met evenveel gemak modale dialoogvensters<\/a> of interface-tabbladen instellen. Dit laat ook zien hoe HTMX werkt naast andere bibliotheken en frameworks, zoals Bootstrap:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
Een modaal dialoogvenster openen met HTMX.<\/figcaption><\/figure>\nDeze flexibiliteit geldt ook voor het implementeren van tabbladen. Er zijn twee manieren om dit te doen: door vanilla JavaScript<\/a> en HTMX te combineren of door de principes van Hypertext As The Engine Of Application State (HATEOAS)<\/a> te gebruiken:<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
Een GIF van een interface met tabbladen met HTMX.<\/figcaption><\/figure>\nEr 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\u00ebren.<\/p>\n
Hoe HTMX integreren in WordPress<\/h2>\n
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.<\/p>\n
Bovendien zou een groot deel van het proces, vooral de eerste stap, typerend moeten zijn als je al eerder voor WordPress hebt ontwikkeld.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. HTMX inschakelen in je PHP code<\/h3>\n
Zoals met alle extra scripts voor WordPress, moet je de HTMX bibliotheek opnemen in de code van je thema of plugin.<\/p>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n
In een notendop is HTMX<\/a> een JavaScript bibliotheek die de standaard HyperText Markup Language (HTML)<\/a> uitbreidt zonder dat je vanilla of framework JavaScript<\/a> hoeft te schrijven. Met deze uitbreidingen heb je ook toegang tot andere technologie\u00ebn:<\/p>\n Het idee achter HTMX is om de manier waarop je dynamische, interactieve webapps maakt, te vereenvoudigen. De belangrijkste functionaliteit is hoe het 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<\/a> explosief zijn gestegen.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n De geschiedenis van WordPress met JavaScript kwam in een stroomversnelling vanaf de State of the Word 2015<\/a>, toen Matt Mullenweg afsloot met de zin: “Leer JavaScript goed.”<\/p>\n 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<\/a> het WordPress JavaScript framework. Zelfs de uberpopulaire Harvard Gazette website<\/a> bouwt bovenop jQuery:<\/p>\n WordPress maakt daarom standaard gebruik van jQuery<\/a>. Daarnaast worden veel kernfuncties, plugins en thema’s uitgebreid gebruikt. Deze aanpak is consistent en wordt breed ondersteund.<\/p>\n Maar naarmate webontwikkeling zich ontwikkelde, ontwikkelde ook WordPress’ benadering van JavaScript zich. De introductie van de Block Editor<\/a> ging gepaard met een verschuiving naar het gebruik van het React framework<\/a> voor het bouwen van gebruikersinterfaces, vooral binnen het WordPress dashboard.<\/p>\n 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:<\/p>\n Deze voordelen gaan echter ook gepaard met een aantal nadelen:<\/p>\n 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.<\/p>\n 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.<\/p>\n Over sommige van deze aspecten hebben we het al gehad, maar laten we ze nog eens kort samenvatten:<\/p>\n 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.<\/p>\n 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.<\/p>\n 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<\/a>.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Het kan je bijvoorbeeld helpen bij het implementeren van live zoekfunctionaliteit op je site:<\/p>\n De HTMX voorbeeldbibliotheek<\/a> gaat ook in op de methodologie voor het uitvoeren van realtime updates op andere inhoudsgebieden binnen de pagina. Hun voorbeeld<\/a> 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:<\/p>\n Het formulier gebruikt de attributen Hier plaats je de invoer voor het binaire bestand buiten het primaire formulierelement en gebruik je de attributen Deze benadering van dynamisch verversen en laden kan ook geschikt zijn voor meer algemene taken. Neem bijvoorbeeld oneindig scrollen<\/a>:<\/p>\n Het Je zou dezelfde methode ook kunnen toepassen op de feature voor lazyloaden<\/a>:<\/p>\n Dit gebruikt opnieuw de attributen 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.<\/p>\n Je kunt bijvoorbeeld alle soorten inhoud filteren, zoals waardeselecties<\/a>. Hierbij worden de opties in een lijst ingevuld op basis van die in een andere lijst:<\/p>\n Je kunt zelfs met evenveel gemak modale dialoogvensters<\/a> of interface-tabbladen instellen. Dit laat ook zien hoe HTMX werkt naast andere bibliotheken en frameworks, zoals Bootstrap:<\/p>\n Deze flexibiliteit geldt ook voor het implementeren van tabbladen. Er zijn twee manieren om dit te doen: door vanilla JavaScript<\/a> en HTMX te combineren of door de principes van Hypertext As The Engine Of Application State (HATEOAS)<\/a> te gebruiken:<\/p>\n 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\u00ebren.<\/p>\n 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.<\/p>\n Bovendien zou een groot deel van het proces, vooral de eerste stap, typerend moeten zijn als je al eerder voor WordPress hebt ontwikkeld.<\/p>\n Zoals met alle extra scripts voor WordPress, moet je de HTMX bibliotheek opnemen in de code van je thema of plugin.<\/p>\n\n
GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, en DELETE<\/code> HTTP-verzoeken<\/a> 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\u00ebren zonder dat je massa’s JavaScript-code nodig hebt.<\/p>\nWaarom we het allemaal over HTMX hebben<\/h2>\n
\n
WordPress’ architectuur in relatie tot JavaScript<\/h2>\n
De voor- en nadelen van de huidige JavaScript implementatie van WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Waarom HTMX beter geschikt zou kunnen zijn voor sommige WordPress ontwikkelingstaken<\/h2>\n
\n
Typische gebruikssituaties voor HTMX<\/h2>\n
Gedeeltelijke pagina herladen<\/h3>\n
<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nhx-post<\/code> en hx-target<\/code> om het doel uit te breiden. Je zou ook HTMX attributen kunnen gebruiken om formulierinvoer te behouden<\/a> na een foutmelding of een andere validatiepoging waarbij verversen wordt gebruikt:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nhx-swap<\/code> en hx-target<\/code>.<\/p>\nDynamisch laden<\/h3>\n
<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nhx-swap<\/code> attribuut fungeert als een ‘listener’ voor het hx-trigger<\/code> attribuut. Zodra een gebruiker het einde van de lijst bereikt, laadt HTMX oneindig de tweede pagina met contactpersonen in.<\/p>\nhx-get<\/code> en hx-trigger<\/code> om een htmx-settling transition te starten om de grafiek te laden met behulp van een langzame fade-in.<\/p>\nPresentatie van gegevens<\/h3>\n
Hoe HTMX integreren in WordPress<\/h2>\n
1. HTMX inschakelen in je PHP code<\/h3>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n