Přejít na obsah|Přejít k hlavnímu menu|Přejít k vyhledávání
Moderní webový vývoj se často spoléhá na javascriptové frameworky, jako jsou React, Vue nebo Angular. Jsou to sice mocné nástroje, ale často s sebou přinášejí zbytečnou složitost. Což je cena, kterou si ne každý projekt může dovolit.
Existuje určitá skupina projektů, které jsou pro tyto frameworky příliš malé, ať už svým rozsahem nebo prostředky. A zároveň by mohly těžit ze zlepšení svého webového UX špetkou interaktivity. Typicky se jedná o server-side rendered (SSR) aplikace, jako jsou interní nástroje, administrační rozhraní nebo různé prototypy či MVP.
Jako řešení se nám nabízí HTMX. Jednoduchý nástroj, který umožňuje pracovat s AJAXem, WebSockets a dalšími technologiemi pouze pomocí HTML atributů. A tedy i backendový vývojář může na chvíli předstírat, že je full-stack vývojářem, aniž by sáhl na JavaScript.
Nejdřív si ukážeme, jak takové použití HTMX může vypadat:
<button hx-get="/data" hx-target="#result">Načíst data</button>
<div id="result"></div>
Po kliknutí na tlačítko se provede AJAX request na /data a výsledek se zobrazí v <div> s ID "result".
Na výsledné odpovědi se neprovádí žádná transformace, ta již musí být ve své výsledné hypertextové podobě. A tedy místo toho, aby frontend sám rozhodoval o stavu aplikace, rozhoduje o všem server, který klientovi poskytuje příslušná data a odkazy pro přechod do dalších stavů.
Velkou předností HTMX je jednoduchost nasazení. Není potřeba kompilovat kód nebo dotahovat npm balíčky. Stačí přídat <script> tag:
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
A hned můžeme začít experimentovat a přidávat nové interaktivní prvky, a to i do již existujicí aplikace.
Navíc se není třeba obávat o integraci se stávajicím backendem. Jediným požadavkem je, aby podporoval HTTP protokol a vracel HTML. Máme-li SSR aplikaci, nemusíme nic měnit ani připravovat, stačí přidat end-point, který vrátí fragment HTML. Například v Pythonu (Flask framework) by to mohlo vypadat takhle:
@app.route("/data")
def data():
return "<p>Ahoj světe!</p>"
Pokud poskládáme výše uvedené kousky kódu do sebe, máme jednoduché tlačítko, po jehož zmáčknutí se pod ním zobrazí text “Ahoj světe!” Velice podobně můžeme vytvořit formulář:
<!-- frontend: -->
<form hx-post="/submit" hx-target="#response">
<input type="text" name="name" placeholder="Zadejte jméno">
<button type="submit">Odeslat</button>
</form>
<div id="response"></div>
# backend:
@app.route("/submit", methods=["POST"])
def submit_form():
name = request.form.get("name", "Neznámý")
return f"<p>Ahoj, {name}!</p>"
Už jenom s tímhle si vystačíme na spoustu věcí, ale HTMX umí i další kouzla, jako je nekonečné scrollování, interaktivní nápověda při vyhledávání, progress bar nebo lazy loading s indikátorem načítání. Spoustu z toho najdete v příkladech přímo na oficiálních stránkách HTMX, kde si to můžete i vyzkoušet.
HTMX bez problémů zvládá dynamické načítání obsahu a interaktivitu založenou na komunikaci se serverem, ale můžeme narazit na situace, kde už stačit nebude. Zejména to může nastat, když potřebujeme interakce na straně klienta bez komunikace se serverem. V takovém případě se můžeme začít “hrabat” přimo v JavaScriptu nebo použít nějaký z minimalistických JS frameworků, jako je Alpine.js. A nebo, pokud se cítíme odvážně, ezoterický HyperScript, za kterým stojí stejní lidé jako za HTMX.
HTMX může být zajímavou alternativou k JavaScriptovým frameworkům, pokud chceme udržet jednoduchý server-side rendered web s minimem závislostí, ale přitom získat interaktivitu moderního webu. A díky jednoduchému napojení přímo do HTML si ho můžete hned vyzkoušet a posoudit, jestli je to ta správna volba!
Děkujeme za váš zájem o odběr našeho newsletteru! Pro dokončení registrace je potřeba potvrdit vaše přihlášení. Na zadaný e-mail jsme vám právě zaslali potvrzovací odkaz. Klikněte prosím na tento odkaz, aby bylo vaše přihlášení dokončeno. Pokud e-mail nenajdete, zkontrolujte prosím složku nevyžádané pošty (spam) nebo složku hromadné pošty.
