Hypertext Markup Extensions zkráceně HTMX je knihovna, která umožňuje vývoj dynamických webových aplikací a rozšiřuje HTML o nové atributy. Tyto atributy umožňují deklarativní definování webové stránky přímo v HTML a CSS, bez potřeby explicitního psaní JavaScriptu.[1][2] Pomáhají nastavit, jak mají elementy reagovat na různé události, jako je například kliknutí na tlačítko nebo odeslání formuláře. Knihovna podporuje komunikaci se serverem s využitím standardních HTTP metod (GET, POST, PUT, DELETE atd.[3]) a umožňuje jednoduše vložit odpovědi serveru (obvykle text nebo HTML fragmenty) do určených částí webové stránky, aniž by bylo třeba ji celou překreslovat. Poskytuje přístup k funkcím AJAX, CSS Transitions a WebSockets. Knihovna je navržena tak aby byla kompatibilní s širokou škálou prohlížečů a zařízení.[4][1]

HTMX
Logo
VývojářCarson Gross
První vydáníkvěten 2020
Aktuální verze1.9.11 (15.3. 2024)
Operační systémmultiplatformní software
Vyvíjeno vJavaScript
Typ softwaruknihovna
Licence0BSD
Webhtmx.org
Některá data mohou pocházet z datové položky.

Historie a vývoj editovat

Knihovna HTMX je nástupce a rozšíření konceptů knihovny Intercooler.js, kterou vyvinul Carson Gross v roce 2013 [5]. Přinesla odpověď na rostoucí potřebu snadnějšího způsobu, jak integrovat interaktivní prvky do webových stránek. Zkombinovala možnosti moderních frameworků s jednoduchostí serverového zpracování tradičních webových aplikací.[6]

Použití editovat

HTMX přidává do HTML atributy k definici dynamického chování jako je spouštění serverových požadavků a aktualizování obsahu. Mezi tyto přidané atributy patří:[1]

hx-trigger Určuje druh události, který vyvolá odeslání dotazu na HTTP server
hx-request Určuje parametry dotazu, který je odesílán na HTTP server
hx-target Určuje konkrétní část stránky, která se má překreslit
hx-swap, hx-swap-oob Určuje, jak se má překreslit část stránky přijetí odpovědi
hx-get, hx-post, hx-put, hx-delete, hx-patch: Určuje, jakou HTTP metodu pro dotaz použít

HTMX lze snadno integrovat do stávajícího projektu přidáním tohoto script tagu do hlavičky dokumentu:[4]

<script 
src="https://unpkg.com/htmx.org@1.9.11" 
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" 
crossorigin="anonymous">
</script

Další možností je instalace pomocí Npm nebo Yarn.[4]

Reference editovat

  1. a b c TIŠŇOVSKÝ, Pavel. HTMX: knihovna pro tvorbu stránek pomocí mírně rozšířeného HTML [online]. ROOT, 2022-11-24 [cit. 2024-04-04]. Dostupné online. 
  2. NADKARNI, Tanvi. What is HTMX? [online]. Frontendeng, 2023-10-05 [cit. 2024-04-05]. Dostupné online. 
  3. Introduction to HTMX [online]. Refine, 2023-10-26 [cit. 2024-04-04]. Dostupné online. 
  4. a b c HTMX.org [online]. [cit. 2024-04-04]. Dostupné online. 
  5. htmx 1.0.0 has been released [online]. HTMX, 2020-11-24 [cit. 2024-04-04]. Dostupné online. 
  6. HIBBARD, James. An Introduction to htmx, the HTML-focused Dynamic UI Library [online]. SitePoint, 2023-08-08 [cit. 2024-04-04]. Dostupné online.