- In der modernen Webentwicklung treibt die falsche Gegenüberstellung von HTML und großen JavaScript-Frameworks Entwickler in unnötige Komplexität
- HTMX verarbeitet AJAX-Anfragen, partielle Updates und Animationsübergänge allein mit HTML-Attributen und bietet damit einen Ansatz, bei dem vom Server zurückgegebenes HTML direkt in die Oberfläche übernommen wird
- Es lässt sich schrittweise einführen, ohne die bestehende Codebasis grundlegend zu verändern, reduziert die Frontend-Komplexität und erhöht Produktivität und Wartbarkeit
- Gegenüber React-basierten SPAs wurden in echter Produktion deutliche Verbesserungen bei Codeumfang, Abhängigkeiten, Build-Zeit und Ladegeschwindigkeit bestätigt
- Statt übermäßig komplexe Frameworks zu wählen, ist ein einfacher hypermedienbasierter Ansatz langfristig vorteilhafter für Produktivität und Wartbarkeit
Das Problem: die falsche Wahl in der Webentwicklung
- In Diskussionen zur Webentwicklung werden immer wieder nur extreme Alternativen präsentiert: entweder nur HTML oder ein großes Framework wie React
- Reines HTML ist bei Grundfunktionen wie Links, Formularen und
dialog stark, hat aber Grenzen bei partiellen Updates und unmittelbarer Reaktivität
- Wer sich für React, Vue oder Angular entscheidet, bekommt Hunderte von Abhängigkeiten, langsame Builds und endlose Debatten über komplexes State Management dazu
- Selbst auf einfache CRUD-, Dashboard- oder formularzentrierte Apps wird in der Praxis oft ein überdimensionierter Tool-Stack angewendet
Das Kernkonzept von HTMX
- HTMX ist ein Werkzeug, das durch spezielle Attribute auf HTML-Elementen asynchrone Kommunikation mit dem Server ermöglicht
- Mit Attributen wie
hx-get und hx-post können etwa Anfragen gesendet und Antworten in einen bestimmten DOM-Bereich eingefügt werden
- Es erweitert HTML so, dass jedes HTML-Element ein Auslöser für HTTP-Anfragen sein kann
- Der Server gibt kein JSON zurück, sondern direkt HTML-Fragmente, die an der angegebenen Stelle automatisch ersetzt oder eingefügt werden
- Das Verhalten wird allein über HTML-Attribute deklariert, ohne eigenes JavaScript zu schreiben
- Die Bibliothek ist mit rund 14 KB (gzip) sehr leichtgewichtig
- Ohne separate Build-Tools oder Framework-Konfiguration lässt sie sich direkt in bestehende HTML-Dokumente einbinden
- Die Struktur passt gut zu einem traditionellen, serverseitig gerenderten Webentwicklungsansatz
Wichtige Funktionen
- AJAX-Anfragen verarbeiten: GET- und POST-Anfragen allein über HTML-Attribute ausführen
- DOM-Updates: Vom Server zurückgegebenes HTML automatisch in das gewünschte Element übernehmen
- Event-Verarbeitung: Serveraufrufe mit Benutzerereignissen wie Klicks oder Eingaben verknüpfen
- History-Verwaltung: Mit Zurück- und Vorwärts-Navigation des Browsers integrieren
Praxisbeispiele und Kennzahlen
- Contexte hat ein React-basiertes SaaS auf Django + HTMX umgestellt
- Gesamtzahl der Codezeilen um 67 % reduziert (21.500 → 7.200)
- JavaScript-Abhängigkeiten um 96 % reduziert (255 → 9)
- Build-Zeit um 88 % verkürzt (40 Sekunden → 5 Sekunden)
- Seitenladegeschwindigkeit um 50–60 % verbessert
- Zwei Drittel der Codebasis wurden gelöscht, und die App wurde dabei besser
- Ohne Trennung zwischen Frontend und Backend können alle Entwickler Full-Stack arbeiten
Häufige Einwände kurz eingeordnet
- "Braucht man nicht komplexes clientseitiges State Management?"
- In der Praxis geht es meist nur um Formulare, Listen und bei Klick erscheinende Elemente, und dafür reicht HTMX völlig aus
- Echtzeit-Kollaboration wie in Google Docs ist eine Ausnahme, aber die meisten überschätzen die Komplexität von CRUD-Apps
- "Welche Vorteile bringt das React-Ökosystem nicht trotzdem?"
- Ein riesiges Ökosystem bedeutet oft auch mehrere GB an
node_modules, endlose Auswahlmöglichkeiten und Debatten über State Management
- Das Ökosystem von HTMX endet im Wesentlichen bei einer gewählten serverseitigen Sprache
- "Ist eine SPA gefühlt nicht trotzdem schneller?"
- Zu Beginn müssen erst große JavaScript-Bundles heruntergeladen, geparst, ausgeführt und hydratisiert werden
- HTMX ist schon beim initialen Laden schnell und tauscht danach nur noch die tatsächlich geänderten Teile aus, wodurch die Reaktionsgeschwindigkeit erhalten bleibt
- "Was ist, wenn man bestimmte React-Funktionen wirklich braucht?"
- In manchen Fällen kann React geeignet sein
- In der Praxis wird jedoch oft gewohnheitsmäßig ein Werkzeug gewählt, das nur für einen kleinen Teil des Gesamtproblems nötig wäre
- Warum sollte man HTMX wählen?
- Teams scheitern nicht wegen des falschen Frameworks, sondern wegen der Wahl eines übermäßig komplexen Frameworks
- HTMX setzt auf Einfachheit, und langfristig bringt Einfachheit Vorteile bei Wartbarkeit und Produktivität
Wann HTMX nicht passt
- Echtzeit-Kollaborationstools (Google Docs, Figma)
- Anwendungen mit umfangreichen clientseitigen Berechnungen (Video-Editoren, CAD-Tools)
- Offline-First-Architekturen (wobei sich auch mehrere Ansätze kombinieren lassen)
- Fälle mit wirklich komplexem UI-State
- Aber baut ihr wirklich so etwas?
- Baut ihr nicht eher noch ein weiteres Dashboard, Admin-Panel, E-Commerce-Portal, Blog oder eine SaaS-App, die im Kern aus Formularen, Tabellen und Listen besteht?
- Dafür ist HTMX wirklich erstaunlich gut — so gut, dass man sich fragt: "Warum haben wir das so kompliziert gemacht?" oder "Mein Gott, wir haben all die Zeit verschwendet"
Also: probiert es einmal aus
- Ihr habt React benutzt, Vue ausprobiert und Angular vermutlich getestet und bereut, oder?
- Und wahrscheinlich habt ihr auch das Meta-Framework angerührt, das diese Woche auf Hacker News gerade im Trend ist
- Probiert HTMX einfach einmal aus
- Investiert ungefähr einen Tag am Wochenende
- Nehmt euch ein Side-Project vor oder
- sucht euch ein internes Tool aus, um das sich niemand besonders schert, oder
- holt etwas hervor, das ihr ohnehin irgendwann einmal neu bauen wolltet
- Fügt einfach ein
<script>-Tag hinzu und schreibt ein hx-get-Attribut, dann schaut euch direkt an, wie es funktioniert
- Im schlimmsten Fall verliert ihr einen Tag am Wochenende, der Schaden hält sich also in Grenzen
- Aber vermutlich wird es euch nicht missfallen
- Eher werdet ihr euch fragen, warum Webentwicklung überhaupt so kompliziert geworden ist
Noch keine Kommentare.