Webentwicklung: Was HTMX in der Praxis taugt
HTMX bietet sich als leichtgewichtige Alternative zu Single-Page-Anwendungen mit React oder Angular an. Die Einfachheit täuscht jedoch in vielen Fällen.
- Nils Hartmann
Kaum eine Frontend-Technik gewinnt derzeit so schnell an Popularität wie HTMX, das eine weitgehend JavaScript-freie Frontend-Entwicklung für interaktive Anwendungen verspricht. Einerseits hat die Komplexität im JavaScript-Ökosystem stetig zugenommen und Single-Page-Anwendungen wie die auf Basis von React oder Angular arbeiten komplett mit JavaScript.
JavaScript-basierte Fullstack-Frameworks andererseits verlagern Teile der Anwendung verstärkt ins Backend. Doch gerade in der Backend-Szene gibt es oft ein gewisses Unbehagen gegenüber JavaScript. Das könnten die Gründe für die wachsende Beliebtheit von HTMX sein, obwohl die ersten Commits bereits über vier Jahre zurückliegen.
Die Idee dahinter ist simpel: HTMX selbst ist eine JavaScript-Bibliothek, die durch die Auszeichnung von HTML-Elementen mit HTMX-spezifischen Attributen weiß, welche Daten zu welchem Zeitpunkt von welchen Endpunkten abgefragt werden sollen. HTMX lädt dann diese Daten und fügt diese fertig gerenderten HTML-Schnipsel an einer festgelegten Stelle im DOM ein. Das Beispiel im folgenden Listing führt einen HTTP-GET-Request aus, sobald Anwender auf das button
-Element klicken. Das Ergebnis wird – so wie es vom Server kommt – in das div
mit der ID confirm
eingefĂĽgt.