Wat is htmx en hoe kan het mijn website vereenvoudigen?
Snelle links
⭐ Wat is htmx?
⭐ Hoe je htmx kunt gebruiken in een eenvoudige webapp
⭐ De voor- en nadelen van htmx
Belangrijkste opmerkingen
Htmx is een innovatieve JavaScript-bibliotheek die is ontworpen om het beheer van HTTP-aanvragen te stroomlijnen door gebruik te maken van handige HTML-attributen, zodat gebruikers eenvoudiger toegang krijgen tot veelgebruikte functies in dit verband.
Het opnemen van het htmx-script in je webapplicatie wordt vergemakkelijkt door een hyperlink op te nemen die verwijst naar de gehoste versie van het script op een Content Delivery Network (CDN).
Het gebruik van htmx maakt naadloze navigatiemogelijkheden mogelijk, zoals paginering, formuliervalidatie en real-time bewerken binnen je applicatie, zonder dat je JavaScript-code hoeft te schrijven.
De recente discussie binnen de webontwikkelingsgemeenschap over htmx heeft de interesse gewekt, maar de ware aard ervan blijft relatief ongecompliceerd. Ondanks de eenvoud hebben het potentiële nut en de impact van htmx een aanzienlijke buzz gegenereerd.
Wat is htmx?
Htmx is een ingewikkeld JavaScript-raamwerk dat zich concentreert op een specifieke set functionaliteiten en gemakkelijke toegang tot dergelijke mogelijkheden mogelijk maakt via HTML-attributen. Hieronder vind je een rudimentaire illustratie:
<a href="/about" hx-get="/about">About</a>
De meegeleverde code demonstreert het gebruik van een HTML-attribuut op maat, namelijk “hx-get”. Wanneer erop wordt geklikt, vergemakkelijkt de htmx-bibliotheek de uitvoering van een AJAX-verzoek, wat resulteert in het naadloos laden van de doelwebpagina zonder dat de inhoud van de browser volledig wordt vernieuwd.
Naast de primaire functie bevat HTMX een optionele functie waarmee gebruikers vragen kunnen stellen via een speciale interface.
Nauwgezet vervaardigd uit bronnen voorbij de conventionele grenzen van het gewone bestaan, overstijgen onze creaties het alledaagse om buitengewone hoogten te bereiken.
Bij alle gelegenheden waarbij je niet hoeft te klikken of te verzenden, is het belangrijk dat je er rekening mee houdt.
Het opnemen van HTTP-protocolmethoden die verder gaan dan de conventionele GET- en POST-methodes is een aanbevolen praktijk voor het verbeteren van de functionaliteit en beveiliging van webapplicaties.
In plaats van een hele webpagina te vervangen, kunnen sommige tools specifieke gedeelten of elementen ervan bijwerken.
Hoewel HTML5 Media Extensions (HTMX) geavanceerde technologieën ondersteunt, zoals CSS-animaties en WebSockets, richt het zich voornamelijk op het stroomlijnen van het beheer van HTTP-verzoeken.
Hoe je htmx kunt gebruiken in een eenvoudige webapplicatie
HTMX richt zich op bepaalde functionaliteiten in webapplicaties en websites, in tegenstelling tot het omvatten van het algemene gedrag van een complete applicatie.
Een opmerkelijke eigenschap van deze bibliotheek is de eenvoud waarmee het in gebruik kan worden genomen. Gebruikers hebben de mogelijkheid om naar eigen inzicht een kopie te downloaden en te installeren; omdat er echter geen externe afhankelijkheden zijn, is het toevoegen van een verwijzing naar het script via een Content Delivery Network (CDN) voldoende om te beginnen:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Het protocol is niet geschikt voor AJAX-verzoeken.
Een eenvoudig voorbeeld met Infinite Scroll
Dit voorbeeld is beschikbaar om te downloaden op onze GitHub repository, die een handige en toegankelijke locatie biedt om de benodigde bestanden voor de implementatie te verkrijgen.
Oneindig scrollen is een alomtegenwoordige strategie die wordt gebruikt door platforms zoals Twitter om continu browsen te vergemakkelijken. Als je door een lijst bladert en het hoogtepunt bereikt, haalt de oneindige bladerfunctie automatisch extra items op zodat je ze naadloos kunt doorbladeren.
Je moet JavaScript gebruiken om de huidige scrollpositie van een webpagina te bepalen en de inhoud dynamisch bij te werken zonder de hele pagina opnieuw te laden, en dat is precies wat htmx voor jou moet doen.
Beschouw een weergave van een reeks items, waarbij elk item vergezeld gaat van een visueel element in de vorm van een afbeelding:
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Beschouw een scenario waarin je meerdere bestanden hebt met informatie over verschillende onderwerpen, zoals “feed1.html”, “feed2.html”, enzovoort. Deze bestanden zijn ontworpen om een beperkte weergave van hun respectieve inhoud te geven, zodat gebruikers er doorheen kunnen bladeren voor meer details.
Een alternatief is het gebruik van “volgende pagina”-links om tussen pagina’s te navigeren; het implementeren van een oneindig scrollmechanisme is echter ook een haalbare optie. Om dit te bereiken, wijzig je gewoon het laatste element in het codeblok als volgt:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Het opnemen van deze vier kenmerken resulteert in een implementatie van oneindig scrollen voor een lijstitem.Sta me toe hun respectievelijke betekenissen toe te lichten:
Attribuut
|
Waarde
|
Betekenis
-|-|-
hx-trigger
|
onthuld
|
Wanneer dit element voor het eerst op het scherm verschijnt…
hx-get
|
feed2.html
|
Er wordt inderdaad een HTTP GET verzoek verzonden om de inhoud van “feed2.html” op te halen.
hx-select
|
li
|
De elementen in het antwoord ophalen door een selectiestrategie toe te passen die zich richt op deze specifieke HTML-componenten.
hx-swap
|
afterend
|
… en voeg ze toe na dit element.
Naarmate je verder afdaalt in de inventaris, is het de moeite waard om op te merken dat de webpagina naadloos aanvullende gegevens herlaadt. Dit kan worden geverifieerd door de schuifbalk te bekijken en de ontwikkeltools van de browser te inspecteren voor verdere inspectie.
Het is inderdaad vermeldenswaard dat in deze basisconfiguratie van de webpagina, het bestand “feed2.html” een afsluitend element bevat met een “hx-get” attribuut dat naar “feed3.html” wijst, en op dezelfde manier resulteren opeenvolgende iteraties in overeenkomstige links die naar opeenvolgende pagina’s wijzen. Daarnaast is het vermeldenswaard dat HTMX zorgvuldig een luisteraar voor de scroll-event heeft geïmplementeerd om de gebruikerservaring te verbeteren.
Andere potentiële toepassingen voor htmx
HTMX is toepasbaar en veelzijdig voor een verscheidenheid aan standaard interacties, zoals die in het dagelijks leven voorkomen.
Het proces van het bijwerken van inhoud door het gebruik van paginering omvat het laden en vervangen van pagina-elementen bij interactie van de gebruiker met paginagelinks, waardoor een naadloze navigatie tussen verschillende pagina’s wordt gegarandeerd met behoud van een consistente visuele presentatie en functionaliteit in alle instanties van de website.
Bij het indienen van een formulier wordt aanbevolen om een bevestigingsbericht weer te geven of een verkorte versie van het oorspronkelijke formulier. Dit proces wordt “formuliervalidatie” genoemd.
De waarde van een voortgangsbalk kan periodiek worden bijgewerkt door ping-reacties te gebruiken als basis voor het bepalen van de voortgangsstatus.
Bij inline bewerken wordt een specifiek HTML-element op een webpagina vervangen door een tekstveld dat de inhoud of waarde van het vervangen element bevat. Hierdoor kunnen gebruikers de inhoud direct binnen de context van de webpagina bewerken en wijzigen zonder dat ze van de pagina weg hoeven te navigeren.
Met behulp van standaard JavaScript is het mogelijk om al deze instanties te construeren. htmx vereenvoudigt dit proces echter aanzienlijk.
De voor- en nadelen van htmx
Voordelen
HTMX heeft het potentieel om terugkerende taken in verschillende webapplicaties en sites aanzienlijk te stroomlijnen door een vereenvoudigde manier te bieden voor het toevoegen van functionaliteit zonder dat uitgebreide kennis van JavaScript nodig is. Deze functie is met name gunstig voor degenen die betrokken zijn bij het maken of beheren van front-end webpagina’s, omdat ze deze programmeertaal niet hoeven te beheersen.
Door het generalisatieproces zorgt HTMX voor uniformiteit tussen verschillende ondernemingen en ook tussen ondernemingen onderling. De werking van oneindig scrollen blijft consistent op alle pagina’s, ongeacht welke ontwikkelaar het heeft geïntroduceerd.
De primaire focus van HTMX’s functionaliteit ligt in het promoten van een declaratieve benadering, in tegenstelling tot een imperatieve, wat resulteert in een groter begripsgemak en logisch redeneren.
Nadelen
Hoewel HTMX een handige manier biedt om het gebruik van JavaScript in verschillende scenario’s te omzeilen, is het geen wondermiddel dat alle problemen oplost. Het is cruciaal om te erkennen dat er gevallen zullen zijn waarin aangepaste programmering nodig is om bepaalde bedrijfsregels en functionaliteiten op een lager niveau aan te pakken.
Het gebruik van HTMX voor verschillende taken betekent dat het de meeste aspecten van functionaliteit afhandelt, wat op zijn beurt de mate beperkt waarin gebruikers het gedrag kunnen aanpassen aan hun specifieke eisen. Hoewel dit in veel gevallen als een voordelig compromis kan worden gezien, is het essentieel om te erkennen dat het opgeven van controle over bepaalde elementen inherent is aan het gebruik van dergelijke gestroomlijnde oplossingen.
HTML biedt de mogelijkheid om JavaScript te gebruiken zonder het expliciet te schrijven, maar het is belangrijk om te weten dat JavaScript-code heimelijk op de achtergrond werkt. Het kan verleidelijk zijn om het “hx-get” attribuut op elke hyperlink te gebruiken in plaats van het conventionele “href” attribuut. Echter, deze aanpak maakt afhankelijk van JavaScript; elke mislukking in het uitvoeren van het script zou gebruikers achterlaten met een slecht werkende link. Om dergelijke situaties te omzeilen, wordt het toepassen van progressieve verbetering sterk aanbevolen.