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

Maya Patel included in Programming Web Development Javascript Html

2024-01-22 1307 words 7 minutes

Contents

Snabblänkar

⭐ Vad är htmx?

⭐ Hur du kan använda htmx i en enkel webbapp

⭐ Fördelar och nackdelar med htmx

Viktiga saker

Htmx är ett innovativt JavaScript-bibliotek utformat för att effektivisera processen för hantering av HTTP-förfrågningar genom användning av praktiska HTML-attribut, vilket ger användarna förenklad tillgång till vanliga funktioner i detta avseende.

Inkorporering av htmx-skriptet i din webbapplikation underlättas av en hyperlänk som leder till den hostade versionen av skriptet på ett Content Delivery Network (CDN).

Användningen av htmx möjliggör sömlösa navigeringsfunktioner som paginering, formulärvalidering och redigering i realtid i din applikation, utan att JavaScript-kod behöver skrivas.

Den senaste tidens diskussion om htmx inom webbutvecklingsvärlden har väckt intresse, men dess sanna natur är fortfarande relativt okomplicerad. Trots sin enkelhet har htmx potentiella nytta och inverkan genererat en hel del uppmärksamhet.

Vad är htmx?

Htmx är ett invecklat JavaScript-ramverk som koncentrerar sig på en specifik uppsättning funktioner och ger bekväm åtkomst till sådana funktioner via HTML-attribut. En rudimentär illustration finns nedan:

 <a href="/about" hx-get="/about">About</a>

Den medföljande koden visar användningen av ett skräddarsytt HTML-attribut, nämligen “hx-get”. När htmx-biblioteket klickas på underlättas utförandet av en AJAX-begäran, vilket resulterar i en sömlös laddning av den aktuella webbsidan utan att webbläsarens innehåll behöver uppdateras helt och hållet.

Utöver sin primära funktion innehåller HTMX en valfri funktion som gör det möjligt för användare att skicka in förfrågningar via ett särskilt gränssnitt.

Våra skapelser är omsorgsfullt tillverkade av källor som ligger bortom de konventionella gränserna för vanlig existens och överskrider det vardagliga för att uppnå extraordinära höjder.

Vid alla tillfällen som inte innebär att klicka eller skicka är det viktigt att notera dem.

Att införliva HTTP-protokollmetoder utöver de konventionella GET- och POST-metoderna är en rekommenderad praxis för att förbättra webbapplikationens funktionalitet och säkerhet.

Istället för att ersätta en hel webbsida kan vissa verktyg uppdatera specifika delar eller element i den.

Medan HTML5 Media Extensions (HTMX) stöder avancerad teknik som CSS-animationer och WebSockets, fokuserar det främst på att effektivisera processen för hantering av HTTP-förfrågningar.

Hur du kan använda htmx i en enkel webbapp

HTMX fokuserar på särskilda funktioner som finns i webbapplikationer och webbplatser, i motsats till att omfatta det övergripande beteendet hos en komplett applikation.

En anmärkningsvärd egenskap hos detta bibliotek är dess enkelhet att initiera användning. Användare har möjlighet att ladda ner och installera en kopia efter eget gottfinnande, men eftersom det saknar externa beroenden räcker det att lägga till en referens till skriptet via ett Content Delivery Network (CDN) för att påbörja användningen:

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

Protokollet klarar inte av AJAX-förfrågningar.

Ett enkelt exempel med Infinite Scroll

Detta exempel finns tillgängligt för nedladdning i vårt GitHub-arkiv, som är en bekväm och tillgänglig plats för att hämta de filer som behövs för implementeringen.

Infinite scroll är en allmänt förekommande strategi som används av plattformar som Twitter för att underlätta kontinuerlig surfning. När man går igenom en lista och når dess kulmen, hämtar infinite scroll automatiskt ytterligare objekt för sömlös genomläsning.

JavaScript är nödvändigt för att fastställa den aktuella scrollpositionen på en webbsida och dynamiskt uppdatera innehållet utan att ladda om hela sidan, vilket är precis vad htmx är utformat för att åstadkomma för din räkning.

Tänk på en representation av en serie poster, där varje post åtföljs av ett visuellt element i form av en bild:

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

Tänk dig ett scenario där du har flera filer som innehåller information om olika ämnen, t.ex. “feed1.html”, “feed2.html” och så vidare. Dessa filer är utformade för att presentera en begränsad vy av deras respektive innehåll, så att användarna kan bläddra igenom dem för ytterligare detaljer.

Ett alternativ är att använda “nästa sida”-länkar för att navigera mellan sidor, men att implementera en oändlig scrollmekanism är också ett bra alternativ. För att uppnå detta ändrar du helt enkelt det sista elementet i kodblocket enligt följande:

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

Genom att införliva dessa fyra egenskaper får man en implementering av oändlig rullningsfunktionalitet för ett listobjekt.Låt mig förklara deras respektive betydelser:

Attribute

Value

Meaning

-|-|-

hx-trigger

revealed

När detta element först visas på skärmen…

hx-get

feed2.html

En HTTP GET-begäran kommer att skickas för att hämta innehållet i “feed2.html”.

hx-select

Hämta de elementen i svaret genom att använda en urvalsstrategi som riktar in sig på dessa specifika HTML-komponenter.

hx-swap

afterend

… och lägg till dem efter detta element.

När man går ner i lagerlistan är det värt att notera att webbsidan kommer att ladda om ytterligare data sömlöst. Detta kan verifieras genom att undersöka rullningslisten och inspektera webbläsarens utvecklingsverktyg för ytterligare inspektion.

Det är värt att notera att i denna grundläggande webbsidekonfiguration innehåller filen “feed2.html” ett avslutande element med ett “hx-get”-attribut som pekar mot “feed3.html”, och på samma sätt resulterar efterföljande iterationer i motsvarande länkar som pekar mot efterföljande sidor. Dessutom är det värt att nämna att HTMX har implementerat en lyssnare för scroll-händelsen för att förbättra användarupplevelsen.

Andra potentiella användningsområden för htmx

HTMX är användbart och mångsidigt för en mängd olika standardinteraktioner, t.ex. sådana som man vanligtvis stöter på i vardagslivet.

Processen att uppdatera innehåll med hjälp av paginering innebär att sidelement laddas och ersätts när användaren interagerar med pagineringslänkar, vilket säkerställer sömlös navigering mellan olika sidor samtidigt som en konsekvent visuell presentation och funktionalitet bibehålls i alla instanser av webbplatsen.

När ett formulär skickas in rekommenderas att man antingen visar ett bekräftelsemeddelande eller en förkortad version av det ursprungliga formuläret. Denna process kallas för “formulärvalidering”.

Periodiska uppdateringar av en förloppsindikators värde kan göras genom att använda ping-svar som grund för att fastställa dess förloppsstatus.

Inline-redigering innebär att ett specifikt HTML-element på en webbsida ersätts med ett textarea-inmatningsfält, som innehåller innehållet eller värdet för det ersatta elementet. Detta gör det möjligt för användare att redigera och ändra innehållet direkt inom ramen för webbsidan utan att behöva navigera bort från den.

Med hjälp av standard JavaScript är det möjligt att konstruera alla dessa instanser. htmx förenklar dock denna process avsevärt.

Fördelar och nackdelar med htmx

Fördelar

HTMX har potential att avsevärt effektivisera återkommande uppgifter i olika webbapplikationer och webbplatser genom att tillhandahålla ett förenklat sätt att lägga till funktionalitet utan att kräva omfattande kunskaper om JavaScript. Denna funktion är särskilt fördelaktig för dem som arbetar med att skapa eller hantera front-end webbsidor, eftersom det minskar behovet av att bli skicklig i detta programmeringsspråk.

Genom generaliseringsprocessen underlättar HTMX enhetlighet mellan olika företag och även mellan dem. Funktionen med oändlig scrollning är konsekvent på alla sidor, oavsett vilken utvecklare som introducerade den.

HTMX:s funktionalitet är främst inriktad på att främja ett deklarativt tillvägagångssätt, i motsats till ett imperativt, vilket följaktligen leder till större begriplighet och logiska resonemang.

Nackdelar

Även om HTMX erbjuder ett bekvämt sätt att kringgå användningen av JavaScript i olika scenarier, är det inte ett universalmedel som löser alla problem. Det är viktigt att inse att det kommer att finnas fall där anpassad programmering krävs för att hantera särskilda affärsregler och funktioner på lägre nivå.

Användningen av HTMX för olika uppgifter innebär att den hanterar de flesta aspekter av funktionalitet, vilket i sin tur begränsar i vilken utsträckning användare kan skräddarsy dess beteende enligt deras specifika krav. Även om detta kan ses som en fördelaktig kompromiss i många fall, är det viktigt att inse att man måste ge upp kontrollen över vissa element för att kunna använda sådana strömlinjeformade lösningar.

HTML ger möjlighet att använda JavaScript utan att uttryckligen skriva det, men det är viktigt att känna till att JavaScript-kod fungerar dolt i bakgrunden. Man kan lockas att använda “hx-get”-attributet på varje hyperlänk i stället för att använda det konventionella “href”-attributet. Detta tillvägagångssätt innebär dock att man förlitar sig på JavaScript; om skriptet inte körs kommer användarna att få en länk som inte fungerar. För att undvika sådana problem rekommenderas det starkt att använda progressiv förbättring.