Průšvihy z praxe: k čemu je dobrý úplný rozklad na třídy ekvivalence
Píše se rok 2001, sedím v budově č. 9 na hlavním kampusu Microsoftu v Redmondu a můj tým usilovně pracuje na verzi .NET Framework 1.1...
HTMX Jednodušší cesta k webovým aplikacím
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.
Hypertext, hypertextové odkazy a hypermedia
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ů.
Plug-and-play
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>"Posílání dat
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.
Když HTMX nestačí
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.
Závěr
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!
