Rychlé Navigační Odkazy
Základní Informace
- htmx je knihovna v JavaScriptu, která usnadňuje HTTP požadavky. Toho dosahuje zpřístupněním běžných operací přes atributy HTML.
- Integrace do webové aplikace je snadná, stačí odkaz na htmx skript z CDN.
- htmx je vhodný pro interaktivní prvky jako stránkování, validace formulářů, nebo úpravy přímo na stránce, a to bez potřeby psát vlastní JavaScript.
V komunitě webových vývojářů se v poslední době často mluví o htmx. Co to vlastně je za novou technologii a proč je tak diskutovaná? Ukazuje se, že je to snadnější, než by se mohlo zdát. Nicméně užitečnost htmx může oprávnit veškerý ten rozruch kolem něj.
Co to je htmx?
htmx je malá, specializovaná JavaScriptová knihovna. Hlavní myšlenkou je zpřístupnění běžných funkcí JavaScriptu pomocí HTML atributů. Zde je ilustrativní příklad:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">O nás</a>
Tento fragment kódu demonstruje vlastní HTML atribut, `hx-get`. Po kliknutí na tento odkaz htmx odešle AJAX požadavek a načte požadovanou stránku, aniž by došlo k úplnému obnovení prohlížeče.
htmx nabízí i další funkcionality pro odesílání požadavků:
- Z jiných elementů než a
- Při jiných událostech než ‚kliknutí‘ nebo ‚odeslání‘.
- S použitím jiných HTTP metod než GET a POST.
- Náhrada jakýchkoli částí stránky, ne jen celku.
Přestože htmx podporuje technologie jako CSS animace a WebSockets, primárním cílem je zjednodušení zpracování HTTP požadavků.
Jak využít htmx v jednoduché webové aplikaci
htmx se zaměřuje na specifické funkce ve webových aplikacích nebo webech, nikoli na celkové chování aplikace.
Velkou výhodou této knihovny je snadnost jejího použití. I když si můžete stáhnout a nainstalovat vlastní kopii, protože nemá žádné závislosti, stačí přidat odkaz na CDN, abyste mohli začít:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Pro lokální vývoj a testování je potřeba mít nastavený webový server (například Apache). Toto je nezbytné i pokud pracujete jen se statickými soubory, protože protokol `file:` neumožňuje AJAX požadavky.
Příklad použití nekonečného posouvání
Nekonečné posouvání je běžně používaná technika, například na Twitteru. Když uživatel dosáhne konce seznamu, automaticky se načtou další položky, aby mohl pokračovat ve čtení.
Tato funkcionalita obvykle vyžaduje JavaScript k monitorování pozice posouvání a načítání nových položek, aniž by se stránka znovu načetla. S htmx to ale všechno zvládnete bez psaní kódu.
Představme si následující kód, který reprezentuje seznam příspěvků s obrázky:
<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>
Předpokládejme, že tyto položky máte v souboru `feed1.html`, s dalšími položkami v `feed2.html` atd. Na každé stránce je malá část položek, kterou si můžete prohlížet:
Nyní můžete použít odkazy ‚další stránka‘ k přesunu mezi stránkami. Ale můžete také snadno implementovat nekonečné posouvání. Stačí změnit poslední položku na:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Přidáním těchto čtyř atributů k poslední položce seznamu implementujete nekonečné posouvání. Co jednotlivé atributy znamenají:
|
Atribut |
Hodnota |
Popis |
|---|---|---|
|
hx-trigger |
revealed |
Když se tento element zobrazí na obrazovce… |
|
hx-get |
feed2.html |
… odešle se GET požadavek na feed2.html, … |
|
hx-select |
li |
… z odpovědi se vyberou prvky li, … |
|
hx-swap |
afterend |
… a přidají se za tento prvek. |
Při posouvání na konec seznamu si můžete všimnout, že se automaticky načítá nový obsah. Můžete to ověřit sledováním posuvníku a pomocí vývojářských nástrojů ve vašem prohlížeči:
V tomto jednoduchém nastavení statických stránek, obsahuje `feed2.html` poslední položku s atributem `hx-get` nastaveným na `feed3.html` atd. Důležité je také, že htmx přidá posluchače události scroll.
Další možnosti použití htmx
htmx můžete využít pro mnoho dalších běžných interakcí, včetně:
- Stránkování: načtení a náhrada položek při kliknutí na odkaz stránkování.
- Validace formuláře: po odeslání se formulář nahradí potvrzovací zprávou, nebo podmnožinou formuláře.
- Ukazatele průběhu: pravidelná aktualizace ukazatele průběhu na základě odezvy ping.
- Úpravy přímo na stránce: výměna elementu za textové pole s obsahem tohoto elementu.
Všechny tyto příklady lze vytvořit i pomocí standardního JavaScriptu, ale htmx tento proces výrazně usnadňuje.
Výhody a nevýhody htmx
Výhody
htmx může zjednodušit běžné interakce, což může být přínosné pro mnoho webových aplikací, i webových stránek. Umožňuje návrhářům a dalším, kteří pracují s front-endem, přidávat funkce bez nutnosti učit se JavaScript.
Díky abstrakci běžného chování, htmx zajišťuje konzistenci napříč projekty. Nekonečné posouvání se bude chovat stejně, bez ohledu na to, kdo ho implementuje.
Protože htmx klade důraz na deklarativní (co) přístup spíše než na imperativní (jak), je obvykle snazší pochopit a zdůvodnit jeho fungování.
Nevýhody
Přestože vám htmx může v mnoha případech umožnit zapomenout na JavaScript, nevyřeší každý problém. Pro specifickou obchodní logiku a více nízkoúrovňové operace budete stejně muset psát vlastní kód.
Vzhledem k tomu, že htmx dělá velkou část práce automaticky, je zde menší prostor pro úpravu chování. Často se jedná o pozitivní kompromis, ale je třeba být připraven vzdát se kontroly.
Ačkoli vám htmx může umožnit vyhnout se psaní JavaScriptu, měli byste si být vědomi toho, že v pozadí stejně běží JavaScriptový kód. Může se zdát lákavé používat atribut `hx-get` na každém odkazu namísto atributu `href`. Nicméně tím vytváříte závislost na JavaScriptu. Pokud se kód z nějakého důvodu nespustí, uživatelé budou mít odkaz, který nic nedělá. Abyste se tomu vyhnuli, měli byste vždy aplikovat princip progresivního vylepšování.