HTMX guide på norsk — interaktive nettsider uten tunge JavaScript-rammeverk

Hva er HTMX?

HTMX er et JavaScript-bibliotek som lar deg få tilgang til moderne nettleserfunksjoner direkte fra HTML, ved hjelp av attributter. På serversiden svarer du typisk med HTML, ikke JSON, ifølge htmx-dokumentasjonen.

HTMX forventer at svar på AJAX-forespørsler er HTML, gjerne HTML-fragmenter. HTMX-baserte applikasjoner ligner på normale nettsider uten AJAX fordi de er HTML-orienterte, som beskrevet i htmx-dokumentasjonen.

HTMXs kjernekonsepter

HTMX bygger på enkle attributter for AJAX:

• Attributter som hx-post brukes til å gjøre AJAX-forespørsler direkte fra HTML, ifølge htmx-dokumentasjonen og GitHub-repositoriet.
• hx-swap bestemmer hvordan svaret settes inn. Standardverdien er innerHTML, og outerHTML er også støttet, ifølge dokumentasjonen for hx-swap.
• hx-boost gjør at normale lenker og skjemaer bruker AJAX i stedet, og nettstedet fortsetter å fungere selv uten JavaScript, ifølge dokumentasjonen for hx-boost.
• hx-push-url lar deg skyve en URL inn i nettleserens historie, og HTMX lagrer et øyeblikksbilde av DOM-en i localStorage, ifølge dokumentasjonen for hx-push-url.

Et praktisk eksempel

Med HTMX kan du for eksempel lage en knapp som gjør en AJAX-forespørsel: <button hx-post="/clicked" hx-swap="outerHTML">. Når en bruker klikker på knappen, sendes det en POST-forespørsel, og hele knappen byttes ut med svaret, som vist i GitHub-repositoriet.

Serveren mottar forespørselen og returnerer HTML. HTMX setter inn HTML-fragmentet uten at hele siden lastes på nytt, i tråd med htmx-dokumentasjonen.

HTMX med backend

HTMX fungerer sammen med backend som returnerer HTML.

Serveren mottar en forespørsel, genererer HTML, og returnerer det. HTMX forventer HTML-fragmenter som svar på AJAX-forespørsler, som beskrevet i htmx-dokumentasjonen.

Server-Sent Events (SSE)

HTMX har en utvidelse for Server-Sent Events, som er et lettvektsalternativ til WebSockets over eksisterende HTTP-tilkoblinger. Du installerer utvidelsen med hx-ext="sse", og barneelementer kan lytte på hendelser med hx-trigger prefikset med sse:, ifølge dokumentasjonen for SSE-utvidelsen.

Utvidelsen håndterer tilkoblingen til webserveren, lytter på serverhendelser og bytter innholdet inn i DOM-en. HTMX inkluderer også en demo SSE-server skrevet i Node.js, som nevnt i dokumentasjonen for SSE-utvidelsen.

HTMX-applikasjoner og HTML

HTMX-applikasjoner er HTML-orienterte og ligner på normale nettsider uten AJAX, ifølge htmx-dokumentasjonen.

Når passer HTMX og når passer det ikke?

HTMX passer godt når du vil bruke HTML-attributter for å gjøre AJAX-forespørsler direkte fra HTML, og når serveren kan returnere HTML-fragmenter.

Vurder andre løsninger hvis du trenger kompleks klientsidetilstand som ikke lar seg uttrykke via HTML.

Filosofien bak HTMX

HTMX lar deg få tilgang til moderne nettleserfunksjoner direkte fra HTML. På serversiden svarer du typisk med HTML i stedet for JSON, ifølge htmx-dokumentasjonen.