HTMX vs. Alpine.js: Die Rückkehr zu einfachem Web-Development

Die Frontend-Welt ist seit Jahren von React, Vue und Angular dominiert. Doch eine neue Bewegung gewinnt an Fahrt: Entwickler, die die Komplexität von SPAs hinterfragen und nach einfacheren Ansätzen suchen. HTMX und Alpine.js sind die populärsten Vertreter dieser Bewegung — beide extrem leichtgewichtig, beide ohne Build-Step nutzbar.

Was ist HTMX?

HTMX erweitert HTML um Attribute, die HTTP-Requests und DOM-Updates direkt aus dem Markup heraus ermöglichen. Statt JavaScript-Code zu schreiben, fügt man hx-get, hx-post, hx-trigger und hx-target zu HTML-Elementen hinzu. Der Server gibt fertiges HTML zurück, HTMX tauscht den entsprechenden DOM-Bereich aus — kein JSON, kein Client-seitiges State-Management.

Kernprinzipien von HTMX:

  • Hypermedia as the Engine of Application State (HATEOAS)
  • Server rendert HTML, nicht JSON
  • Partielles DOM-Update ohne Page Reload
  • Progressive Enhancement aus dem Markup heraus
  • Keine Build-Pipeline, keine node_modules

Stärken von HTMX:

  • Extrem kleine Bundle-Size (~14kb)
  • Kein JavaScript-Wissen für Basis-Interaktivität nötig
  • Einfache Integration in bestehende Server-seitige Apps (PHP, Django, Rails)
  • Skaliert gut mit Server-Caching (da HTML, kein JSON)
  • Server-Logik bleibt zentralisiert

Schwächen von HTMX:

  • Weniger geeignet für hochdynamische UIs
  • Mehr Server-Last durch HTML-Rendering
  • Komplexe Client-seitige Interaktionen schwieriger

Was ist Alpine.js?

Alpine.js ist ein minimales JavaScript-Framework, das Vue.js-ähnliche Reaktivität direkt im Markup ermöglicht. Mit x-data, x-bind, x-on und x-show lässt sich Client-seitiges State-Management ohne Build-Step realisieren.

Stärken von Alpine.js:

  • Vue-ähnliche Syntax, sofort vertraut für Vue-Entwickler
  • ~15kb, kein Build-Step nötig
  • Ideal für Interaktivität auf Server-gerenderten Seiten
  • Dropdowns, Modals, Tabs ohne React-Overhead
  • Gut kombinierbar mit Livewire (Laravel)

Schwächen von Alpine.js:

  • Nur Client-seitiges State-Management (kein Server-Roundtrip)
  • Kein Routing, keine komplexen Formulare out of the box
  • Für komplexe SPAs nicht geeignet

Der Entscheidungsbaum

HTMX wählen, wenn:

  • Die App primär server-side gerendert wird (PHP, Python, Go)
  • Formular-Submissions und Listen-Updates die Hauptanwendungsfälle sind
  • Caching wichtig ist
  • Das Team wenig JavaScript-Erfahrung hat

Alpine.js wählen, wenn:

  • Bestehende Server-seitige App kleine interaktive Elemente braucht
  • Dropdowns, Modals, Tab-Navigationen ohne Framework-Overhead gefragt sind
  • Laravel + Livewire eingesetzt wird

React/Vue wählen, wenn:

  • Eine echte SPA mit komplexem Client-seitigem State benötigt wird
  • Offline-Fähigkeit oder PWA geplant ist
  • Echtzeit-Updates (WebSockets) eine zentrale Rolle spielen

Meine Perspektive

Für typoniels.dev nutze ich Qwik — ein Framework, das durch Resumability SSR und Client-Hydration vereint. Für einfachere Projekte oder zur Ergänzung von Django- bzw. PHP-Backends wäre HTMX meine erste Wahl. Alpine.js setze ich gelegentlich für isolierte UI-Komponenten ein.

Fazit

HTMX und Alpine.js sind keine React-Killer — sie sind die richtigen Tools für Projekte, die keine SPA brauchen. Wenn 80% der Anforderungen durch serverseitiges HTML + etwas Client-Interaktivität erfüllt werden können, spart man sich erhebliche Komplexität.