Vad är htmx och hur kan det förenkla min webbplats?

av

snabblänkar

Viktiga takeaways

  • htmx är ett JavaScript-bibliotek som förenklar hanteringen av HTTP-förfrågningar genom att göra gemensam funktionalitet tillgänglig via HTML-attribut.
  • Du kan enkelt lägga till den i din webbapp med en länk till htmx-skriptet på ett CDN.
  • Du kan använda htmx för interaktioner som paginering, formulärvalidering och inline-redigering, utan att skriva något JavaScript.

Webbutvecklingscommunityt har nyligen varit fullt av prat om htmx, men vad är denna spännande nya teknik? Det visar sig att det är mycket enklare än du kan förvänta dig, men htmx användbarhet kan motivera hypen.

Vad är htmx?

htmx är ett litet JavaScript-bibliotek med ett smalt fokus. Det gör vanliga JavaScript-funktioner tillgängliga via HTML-attribut. Här är ett enkelt exempel:

 <a href="https://wilku.top/about" hx-get="https://wilku.top/about">About</a>

Den här koden visar ett anpassat HTML-attribut, hx-get. Om du klickar på den här länken kommer htmx-biblioteket att skicka en AJAX-förfrågan och ladda målsidan utan en fullständig webbläsaruppdatering.

htmx har ytterligare funktionalitet som låter dig skicka förfrågningar:

  • Från andra element än a och form.
  • På andra händelser än klicka och skicka.
  • Använder andra HTTP-metoder än GET och POST.
  • Som ersätter alla delar av en sida snarare än bara hela.

Även om htmx har stöd för teknologier som CSS-animation och WebSockets, är dess kärnmål att förenkla hanteringen av HTTP-förfrågningar.

Hur du kan använda htmx i en enkel webbapp

htmx adresserar specifik funktionalitet inom webbappar eller webbplatser, snarare än beteendet hos en hel app.

En stor fördel med biblioteket är hur lätt det är att börja använda. Du kan ladda ner och installera en kopia om du vill, men eftersom den inte har några beroenden behöver du bara lägga till en länk till skriptet på ett CDN för att komma igång:

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

För lokal utveckling och testning måste du konfigurera en webbserver, som Apache, om du inte redan har en igång. Detta är ett krav, även om du bara experimenterar med statiska filer, eftersom file:-protokollet inte tillåter AJAX-förfrågningar.

Ett enkelt exempel med Infinite Scroll

Infinite scroll är en vanlig teknik som webbplatser som Twitter använder för sitt flöde. När du når botten av en lista laddar oändlig rullning in fler objekt så att du kan fortsätta läsa.

Den här funktionen kräver naturligtvis JavaScript för att kontrollera sidrullningspositionen och ladda de nya objekten utan att uppdatera sidan. Men htmx kan göra allt detta åt dig.

Ta följande markering som representerar en lista med inlägg, med en bild för varje:

 <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>

Föreställ dig att du har dessa objekt i en fil, feed1.html, med fler objekt i feed2.html, etc. Varje sida kommer sedan att visa en liten delmängd av objekt som du kan rulla inom:

Nu kan du använda ”nästa sida”-länkar för att flytta från en sida till en annan, men du kan enkelt implementera oändlig rullning också. Ändra bara det sista objektet till:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

Genom att lägga till dessa fyra attribut till det sista listobjektet implementeras oändlig rullning. Så här betyder varje attribut:

Attribut

Värde

Menande

hx-trigger

avslöjat

När det här elementet först visas på skärmen…

hx-få

feed2.html

… skicka en GET-förfrågan till feed2.html, …

hx-välj

li

… välj li-elementen från svaret, …

hx-byte

efteråt

… och lägg till dem efter detta element.

När du bläddrar till botten av listan kan du lägga märke till hur sidan laddar nytt innehåll automatiskt. Du kan bekräfta detta genom att observera rullningslisten och kontrollera webbläsarens utvecklarverktyg:

Observera att, med denna enkla statiska sidkonfiguration, innehåller feed2.html-sidan ett sista objekt med ett hx-get-attribut inställt på feed3.html, och så vidare. Notera också hur htmx har lagt till en lyssnare för scroll-händelsen.

Andra möjliga användningsområden för htmx

Du kan använda htmx för många andra vanliga interaktioner, inklusive:

  • Paginering: ladda och ersätt objekt när besökaren klickar på en sideringslänk.
  • Formulärvalidering: ersätt ett formulär vid inlämning med antingen ett bekräftelsemeddelande eller en delmängd av formuläret.
  • Förloppsindikatorer: uppdatera regelbundet en förloppsindikators värde baserat på ett pingsvar.
  • Inline-redigering: byt ut ett element mot ett textområde som innehåller det elementets värde.

Det är möjligt att bygga vart och ett av dessa exempel med standard JavaScript, htmx gör bara processen mycket enklare.

Fördelar och nackdelar med htmx

Fördelar

htmx kan avsevärt förenkla vanliga interaktioner som kan gynna många webbapplikationer och till och med många webbplatser. Det tillåter designers och andra som arbetar med front-end webbsidor att lägga till funktionalitet utan att behöva lära sig JavaScript.

Genom att abstrahera vanligt beteende säkerställer htmx konsekvens över dina projekt och mellan dem. Infinite scroll kommer att bete sig på samma sätt från sida till sida, oavsett vem som implementerade den.

Eftersom det betonar ett deklarativt (vad) tillvägagångssätt snarare än ett imperativt (hur), är htmx-funktionalitet vanligtvis lättare att förstå och resonera kring.

Nackdelar

Även om htmx kan låta dig glömma JavaScript i många sammanhang, kan det inte lösa alla problem för dig! Du behöver fortfarande skriva kod för att hantera specifik affärslogik och mer lågnivåfunktionalitet.

Eftersom htmx gör mycket arbete för dig, finns det mindre potential för att anpassa beteendet. Detta kommer ofta att vara en positiv avvägning, men du måste vara beredd att lämna kontrollen.

html kan låta dig undvika att skriva JavaScript, men du bör ändå vara medveten om att JavaScript-kod körs i bakgrunden. Du kan bli frestad att använda hx-get-attributet på varje länk, istället för ett href-attribut. Men detta introducerar ett beroende av JavaScript; om koden inte kan köras av någon anledning, kommer dina användare att lämnas med en länk som inte gör något. Du bör alltid träna progressiv förbättring för att förhindra detta.