- Migrace z XMLHttpRequest na nativní API fetch() pro lepší výkon a možnosti streamování.
- Posun směrem k explicitní dědičnosti atributů a standardizované konvenci pojmenování událostí.
- Zavedení změn morfu a tagu hx-partial pro komplexní aktualizace DOMu.
- Generální oprava správy historie nahrazením lokálních snapshotů skutečnými požadavky serveru.
Pokud se už nějakou dobu pohybujete ve světě webového vývoje, pravděpodobně víte, že htmx je v podstatě kouzelnický trik pro váš HTML. Umožňuje vám dělat věci, které obvykle vyžadují masivní JavaScriptový framework – například aktualizovat stránku bez úplného opětovného načtení – pouhým přidáním několika atributů do vašich tagů. Vydání htmx 4 je velká věc, protože nepřidává jen pár vychytávek; v podstatě přepracovává engine, aby vaše aplikace působily rychleji a mnohem spolehlivěji.
Základní filozofie zůstává stejná: logiku ponechat na serveru a použít hypertext jako engine pro správu stavu aplikace (HATEOAS) . Místo vzájemného přepínání JSON kódu se htmx 4 ptá serveru na fragmenty HTML a vkládá je přímo do DOMu. Je to závan čerstvého vzduchu pro každého, koho unavuje složitost moderních frontendových nástrojů, zaměřených na lokálnost chování , takže můžete skutečně pochopit, co váš kód dělá, pouhým pohledem na HTML.
Velké načtení
Nejvýznamnější interní změnou je, že htmx konečně opustil XMLHttpRequest ve prospěch nativního API fetch() . I když se to může zdát jako nudný detail, ve skutečnosti je to zásadní změna. Použití fetch zeštíhluje knihovnu a otevírá dveře pro pokročilé streamování HTML . To však znamená, že události specifické pro XHR zmizely a všimnete si, že časové limity požadavků jsou nyní standardně nastaveny na 60 sekund, místo aby se zasekávaly donekonečna.
Zbavení se zvyku dědictví
Jednou z největších překážek při přechodu z verze 2 na 4 je způsob, jakým se atributy předávají podřízeným elementům. V minulosti byla dědičnost implicitní – pokud jste na div umístili potvrzovací dialog, každé tlačítko uvnitř něj tento dialog dostalo. Nyní musíte být explicitní přidáním modifikátoru :inherited k atributu. Například použití hx-confirm:inherited říká htmx, že toto chování by mělo probíhat dále v DOM stromu. Tím se zabrání otravnému pocitu „akce na dálku“ a ladění uživatelského rozhraní se výrazně zjednoduší.
Chytřejší swapy a vícenásobné cílení
Výměna obsahu je to, kde htmlx skutečně září, a verze 4 zavádí Morph Swaps (innerMorph a outerMorph). Místo pouhého vytrhávání části stránky a nahrání nového HTML kódu používá morphing ke sloučení změn algoritmus idiomorph. To je záchrana pro zachování vstupního fokusu nebo pro udržení přehrávání videa, zatímco se zbytek obsahu aktualizuje. Nový tag <hx-partial> navíc umožňuje jediné odpovědi serveru aktualizovat více různých částí stránky, což vám dává větší kontrolu než staré out-of-band (OOB) swapy.
Zpracování chyb a historie
V předchozích verzích knihovna htmx často ignorovala chybové odpovědi 400 nebo 500. Nyní ne. Verze htmx 4 ve výchozím nastavení ignoruje chybové odpovědi , což je skvělé pro zobrazení chyb validace na straně serveru. Pro správu tohoto problému můžete použít atribut hx-status k přesměrování specifických kódů (například 422) do vyhrazeného chybového divu. Co se týče historie, knihovna přestala pořizovat snímky DOM v localStorage. Nyní, když uživatel stiskne tlačítko Zpět, htmx jednoduše znovu načte stránku ze serveru , čímž zajistí, že stav bude vždy aktuální a nebudou jen zastaralým pozůstatkem předchozí relace.
Události, rozšíření a skriptování
Systém událostí byl kompletně vyčištěn a nyní sleduje vzor htmx:phase:action . Tato konzistence výrazně usnadňuje napojení na životní cyklus požadavku. Co se týče rozšíření, máme nyní prvotřídní podporu pro SSE (Server-Sent Events), WebSockets a vícedílné/smíšené odpovědi , což usnadňuje vytváření dashboardů v reálném čase. Pro ty, kteří potřebují trochu reaktivity na straně klienta, hx-live nabízí skriptovací řešení založené na DOM, které působí jako mix Alpine.js a jQuery a umožňuje manipulovat s prvky pomocí jednoduchého selektoru q().
Instalace a upgrade
Pokud začínáte nový projekt, stačí si stáhnout nejnovější verzi 4 přes CDN nebo NPM. Pro stávající aplikace tým poskytl nástroj pro upgrade z příkazového řádku (prostřednictvím npx), který prohledá vaše šablony a vyhledá zastaralé atributy a staré názvy událostí. Pokud ještě nejste připraveni na úplný skok, rozšíření htmx-2-compat může dočasně obnovit staré chování. Za zmínku stojí, že verze 2 zůstává podporována a zůstane na NPM označením „nejnovější“ až do začátku roku 2027, aby se zabránilo náhodnému narušení milionů webů, které používají odkazy CDN bez verzí.
Zabezpečení a osvědčené postupy
Protože htmx umožňuje přímo vkládat HTML, je escapování uživatelského obsahu nezbytné pro prevenci XSS útoků. Atribut hx-ignore je v tomto případě skvělým nástrojem; říká htmx, aby zcela přeskočil zpracování jakýchkoli atributů uvnitř konkrétního kontejneru, což je ideální pro bezpečné vykreslování nezpracovaného uživatelsky generovaného obsahu. Pro prostředí s vysokým zabezpečením pomáhá rozšíření hx-csp integrovat se s přísnými zásadami zabezpečení obsahu (Content Security Policies) správou nonce a omezením, kam lze požadavky odesílat.
Tato evoluce knihovny htmlx transformuje knihovnu z chytré utility na robustní základ pro dlouhodobé webové služby. Díky využití fetch API, objasnění dědění atributů a zavedení sofistikovaného morfingu a částečných aktualizací odstraňuje tření mezi serverem a prohlížečem. Ať už vytváříte jednoduchou CRUD aplikaci nebo komplexní rozhraní v reálném čase, kombinace zjednodušeného systému událostí a výkonných streamovacích rozšíření usnadňuje více než kdy jindy vytváření dynamických prostředí, aniž byste museli opustit pohodlí HTML.
