Co je htmx a jak může zjednodušit můj web?

Table of Contents

Rychlé odkazy

Jak můžete používat htmx v jednoduché webové aplikaci

Výhody a nevýhody htmx

Klíčové věci

htmx je knihovna JavaScriptu, která zjednodušuje zpracování požadavků HTTP tím, že zpřístupňuje běžné funkce prostřednictvím atributů HTML.
Můžete jej snadno přidat do své webové aplikace pomocí odkazu na skript htmx na CDN.
Htmx můžete použít pro interakce, jako je stránkování, ověřování formulářů a vložené úpravy, aniž byste museli psát JavaScript.

Komunita webových vývojářů byla v poslední době nadšená řečmi o htmx, ale co je to za vzrušující novou technologii? Ukázalo se, že je to mnohem jednodušší, než byste čekali, ale užitečnost htmx může ospravedlnit humbuk.

Co je htmx?

htmx je malá JavaScriptová knihovna s úzkým zaměřením. Zpřístupňuje běžné funkce JavaScriptu prostřednictvím atributů HTML. Zde je jednoduchý příklad:

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

Tento kód zobrazuje vlastní atribut HTML, hx-get. Pokud kliknete na tento odkaz, knihovna htmx odešle požadavek AJAX a načte cílovou stránku bez úplného obnovení prohlížeče.

htmx má další funkce, které vám umožňují odesílat požadavky:

Z jiných prvků než a a forma.
Na jiné události než klikněte a odešlete.
Použití jiných metod HTTP než GET a POST.
To nahrazuje jakékoli části stránky, nikoli jen celek.

11 šablon prodejních plánů, které podpoří váš výkon a výsledky

Ačkoli htmx podporuje technologie jako animace CSS a WebSockets, jeho hlavním cílem je zjednodušit zpracování požadavků HTTP.

Jak můžete používat htmx v jednoduché webové aplikaci

htmx řeší konkrétní funkce ve webových aplikacích nebo webech, spíše než chování celé aplikace.

Velkou výhodou knihovny je, jak snadné je začít ji používat. Pokud chcete, můžete si stáhnout a nainstalovat kopii, ale protože nemá žádné závislosti, vše, co musíte udělat, abyste mohli začít, je přidat odkaz na skript na CDN:

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

Pro místní vývoj a testování budete muset nastavit webový server, jako je Apache, pokud jej ještě nemáte spuštěný. Toto je požadavek, i když právě experimentujete se statickými soubory, protože protokol file: neumožňuje požadavky AJAX.

Jednoduchý příklad s použitím nekonečného posouvání

Nekonečné posouvání je běžná technika, kterou weby jako Twitter používají pro svůj zdroj. Když se dostanete na konec seznamu, nekonečné posouvání načte další položky, abyste mohli pokračovat ve čtení.

Tato funkce přirozeně vyžaduje JavaScript ke kontrole pozice posouvání stránky a načtení nových položek bez obnovení stránky. Ale htmx to všechno může udělat za vás.

Vezměte si následující označení, které představuje seznam příspěvků, pro každý použijte obrázek:

 <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ředstavte si, že máte tyto položky v souboru feed1.html, s více položkami v feed2.html atd. Na každé stránce se pak zobrazí jedna malá podmnožina položek, v nichž můžete procházet:

Jaký je nejnovější iPad právě teď? [March 2022]

Nyní můžete použít odkazy „další stránka“ k přesunu z jedné stránky na druhou, 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í těchto čtyř atributů do poslední položky seznamu implementuje nekonečné posouvání. Co jednotlivé atributy znamenají:

Atribut	Hodnota	Význam
hx-spouštěč	odhaleno	Když se tento prvek poprvé objeví na obrazovce…
hx-get	feed2.html	… odeslat požadavek GET na feed2.html, …
hx-select	li	… vyberte prvky li z odpovědi, …
hx-swap	afterend	… a přidejte je za tento prvek.

Při posouvání na konec seznamu si všimněte, jak stránka automaticky načítá nový obsah. Můžete to potvrdit sledováním posuvníku a kontrolou vývojářských nástrojů vašeho prohlížeče:

Všimněte si, že s tímto jednoduchým nastavením statické stránky obsahuje stránka feed2.html poslední položku s atributem hx-get nastaveným na feed3.html a tak dále. Všimněte si také, jak htmx přidal posluchač pro událost scroll.

Další možnosti použití pro htmx

Htmx můžete použít pro mnoho dalších běžných interakcí, včetně:

Stránkování: načtení a nahrazení položek, když návštěvník klikne na stránkovací odkaz.
Ověření formuláře: při odeslání nahraďte formulář buď potvrzovací zprávou, nebo podmnožinou formuláře.
Ukazatele průběhu: pravidelně aktualizujte hodnotu ukazatele průběhu na základě odezvy ping.
Inline editace: vyměňte prvek za textovou oblast obsahující hodnotu tohoto prvku.

Jak poslat anonymní e-mail zdarma

Každý z těchto příkladů je možné sestavit pomocí standardního JavaScriptu, htmx tento proces jen značně usnadňuje.

Výhody a nevýhody htmx

Výhody

htmx může výrazně zjednodušit běžné interakce, které mohou být přínosem pro mnoho webových aplikací a dokonce i pro mnoho webových stránek. Umožňuje návrhářům a dalším, kteří pracují s předními webovými stránkami, přidávat funkce, aniž by se museli učit JavaScript.

Abstrahováním běžného chování zajišťuje htmx konzistenci napříč vašimi projekty a mezi nimi. Nekonečné posouvání se bude chovat ze stránky na stránku stejně, bez ohledu na to, kdo jej implementoval.

Protože klade důraz na deklarativní (jaký) přístup spíše než na imperativní (jak), funkci htmx je obvykle snazší pochopit a odůvodnit.

Nevýhody

Ačkoli vám htmx může v mnoha kontextech umožnit zapomenout na JavaScript, nemůže za vás vyřešit každý problém! Stále budete muset napsat kód pro zpracování specifické obchodní logiky a více nízkoúrovňových funkcí.

Protože htmx dělá spoustu práce za vás, je zde menší potenciál pro přizpůsobení chování. To bude často pozitivní kompromis, ale budete muset být připraveni předat kontrolu.

html vám možná umožní vyhnout se psaní JavaScriptu, ale přesto byste si měli být vědomi toho, že kód JavaScript běží na pozadí. Můžete být v pokušení použít atribut hx-get na každém odkazu místo atributu href. Ale to zavádí závislost na JavaScriptu; pokud se kód z jakéhokoli důvodu nespustí, vašim uživatelům zůstane odkaz, který nic nedělá. Abyste tomu zabránili, měli byste vždy cvičit progresivní vylepšování.