Snarveier
Viktige punkter
- htmx er et JavaScript-bibliotek som forenkler håndteringen av HTTP-forespørsler ved å tilgjengeliggjøre vanlige funksjoner gjennom HTML-attributter.
- Det er enkelt å inkludere i din webapplikasjon via en lenke til htmx-skriptet på et CDN.
- Du kan bruke htmx for interaksjoner som sideinndeling, skjemavalidering og redigering på stedet uten å skrive JavaScript.
Det har vært mye snakk om htmx i webutviklingsmiljøet den siste tiden, men hva er egentlig denne spennende nye teknologien? Det viser seg at det er langt enklere enn man skulle tro, men bruken av htmx kan absolutt rettferdiggjøre all oppmerksomheten.
Hva er htmx?
htmx er et lite JavaScript-bibliotek med et spesifikt fokus. Det gjør vanlig JavaScript-funksjonalitet tilgjengelig via HTML-attributter. Her er et enkelt eksempel:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">Om</a>
Denne koden viser et tilpasset HTML-attributt, `hx-get`. Hvis du klikker på denne lenken, vil htmx-biblioteket sende en AJAX-forespørsel og laste inn destinasjonssiden uten at nettleseren oppdateres fullstendig.
htmx har tilleggsfunksjonalitet som tillater deg å sende forespørsler:
- Fra elementer som ikke er `a` eller `form`.
- Ved andre hendelser enn klikk eller sending.
- Ved bruk av andre HTTP-metoder enn GET og POST.
- Som kan erstatte alle deler av en side, ikke bare hele.
Selv om htmx støtter teknologier som CSS-animasjon og WebSockets, er hovedmålet å forenkle håndteringen av HTTP-forespørsler.
Slik bruker du htmx i en enkel webapplikasjon
htmx tar for seg spesifikk funksjonalitet i webapplikasjoner eller nettsteder, i stedet for oppførselen til en hel app.
En stor fordel med biblioteket er hvor enkelt det er å komme i gang med det. Du kan laste ned og installere en kopi om du vil, men siden det ikke har noen avhengigheter, er alt du trenger å gjøre for å starte, å legge til en lenke til skriptet på et CDN:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
For lokal utvikling og testing må du sette opp en webserver, som Apache, hvis du ikke allerede har en i gang. Dette er nødvendig, selv om du bare eksperimenterer med statiske filer, siden `file:`-protokollen ikke tillater AJAX-forespørsler.
Et enkelt eksempel med uendelig rulling
Uendelig rulling er en vanlig teknikk som nettsider som Twitter bruker for sine feeds. Når du når bunnen av en liste, lastes flere elementer inn, slik at du kan fortsette å lese.
Denne funksjonen krever vanligvis JavaScript for å sjekke posisjonen for rulling og laste inn de nye elementene uten å oppdatere siden. Men htmx kan gjøre alt dette for deg.
Ta utgangspunkt i følgende kode som representerer en liste over innlegg, med et bilde for hver:
<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>
Se for deg at disse elementene finnes i en fil, `feed1.html`, med flere elementer i `feed2.html`, og så videre. Hver side vil da vise et lite utvalg av elementer som du kan bla gjennom:
Nå kan du bruke «neste side»-lenker for å gå fra en side til en annen, men du kan også implementere uendelig rulling. Bare endre det siste elementet til:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Ved å legge til disse fire attributtene til det siste listeelementet implementerer du uendelig rulling. Her er hva hvert attributt betyr:
|
Egenskap |
Verdi |
Betydning |
|---|---|---|
|
hx-trigger |
revealed |
Når dette elementet først vises på skjermen… |
|
hx-get |
feed2.html |
… send en GET-forespørsel til `feed2.html`, … |
|
hx-select |
li |
… velg `li`-elementene fra svaret, … |
|
hx-swap |
afterend |
… og legg dem til etter dette elementet. |
Når du ruller til bunnen av listen, ser du hvordan siden laster inn nytt innhold automatisk. Du kan bekrefte dette ved å se på rullefeltet og sjekke nettleserens utviklerverktøy:
Merk at i dette enkle statiske sideoppsettet inneholder `feed2.html`-siden et siste element med et `hx-get`-attributt satt til `feed3.html`, og så videre. Legg også merke til hvordan htmx har lagt til en lytter for rullehendelsen.
Andre potensielle bruksområder for htmx
Du kan bruke htmx for mange andre vanlige interaksjoner, inkludert:
- Sideinndeling: Last inn og erstatt elementer når den besøkende klikker på en sideinndelingslenke.
- Skjemavalidering: Ved innsending, erstatt et skjema med enten en bekreftelsesmelding eller et utvalg av skjemaet.
- Fremdriftslinjer: Oppdater med jevne mellomrom verdien på en fremdriftslinje basert på et ping-svar.
- Redigering på stedet: Bytt ut et element med et tekstområde som inneholder elementets verdi.
Det er mulig å lage alle disse eksemplene ved å bruke standard JavaScript, men htmx gjør prosessen mye enklere.
Fordeler og ulemper med htmx
Fordeler
htmx kan i stor grad forenkle vanlige interaksjoner, noe som kan være fordelaktig for mange webapplikasjoner og til og med mange nettsteder. Det gjør det mulig for designere og andre som jobber med front-end-websider å legge til funksjonalitet uten å måtte lære JavaScript.
Ved å abstrahere vanlig atferd sikrer htmx konsistens på tvers av og mellom prosjektene dine. Uendelig rulling vil fungere på samme måte fra side til side, uavhengig av hvem som har implementert den.
Siden det fokuserer på en deklarativ (hva) tilnærming i stedet for en imperativ (hvordan), er htmx-funksjonalitet vanligvis lettere å forstå og forholde seg til.
Ulemper
Selv om htmx kan la deg glemme JavaScript i mange situasjoner, kan det ikke løse alle problemer for deg! Du må fortsatt skrive kode for å håndtere spesifikk forretningslogikk og lavnivåfunksjonalitet.
Fordi htmx gjør mye av arbeidet for deg, er det mindre potensial for å tilpasse oppførsel. Dette vil ofte være en positiv avveining, men du må være forberedt på å overlate noe av kontrollen.
htmx lar deg kanskje unngå å skrive JavaScript, men du bør fortsatt være klar over at JavaScript-kode kjører i bakgrunnen. Du kan bli fristet til å bruke `hx-get`-attributtet på hver lenke, i stedet for et `href`-attributt. Men dette skaper en avhengighet av JavaScript; hvis koden ikke kjører av en eller annen grunn, vil brukerne dine sitte igjen med en lenke som ikke gjør noe. Du bør alltid praktisere progressiv forbedring for å unngå dette.