HTMX – Hypertext auf Steroiden

Ich gebe es zu: Data-Attributes sind meine heimliche Passion – für mich klar eine der besten Errungenschaften von HTML5. Semantisch korrekt, ganz ohne Hacks und Schnick-Schnack HTML-Elemente um zusätzliche Informationen ergänzen … perfekt! Die Bibliothek die ich dazu gestern Abend entdeckt habe, bringt das Thema Data-Attributes aber noch einmal auf ein ganz anderes Level – darf ich vorstellen: HTMX. HTMX sagt über sich selbst folgendes:

introduction

htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
htmx is small (~7k min.gz'd), dependency-free, extendable & IE11 compatible

Und was soll ich sagen? Es stimmt. Einen simpleren Ajax-Call habe ich selten geschrieben. Der geistige Nachfolger von intercooler.js hört aber nicht bei simplen, asynchronen Server-Anfragen auf. Für einen Erst-Eindruck empfehle ich die Beispiel-Seite von HTMX, denn die diversen Anwendungsbeispiele dort geben einen hervorragenden Einblick in den eigentlichen Funktionsumfang.

Client Side Templating mit Mustache, Handlebars oder Nunjucks

Aber auch beim Versprechen »extendable« liefert HTMX ab. Wer in den (sehr, sehr guten) Docs etwas stöbert, der findet Extensions »that are tested against the htmx code base«; darunter auch »client-side-templates«. Wie es aussehen kann, wenn man eine JSON-Response via Mustache rendert, habe ich mal in einem Mini-Beispiel auf CodePen veröffentlicht.

Fazit: auf jeden Fall im Auge behalten

Ich werde die Library definitiv in der freien Wildbahn nutzen, spätestens wenn ich den nächsten Infinity-Scroll-Artikel-Loader bauen muss. Außerdem bin ich extrem gespannt, wie sich der aktuell noch experimentelle Bereich »Websockets und SSE« weiterentwickeln wird. Sollte ich die Zeit finden, das Ganze im jetzigen Stadium mal zu testen, gibt's auf jeden Fall ein Update hier!