Was macht htmx?
HTMX-Entwicklungsrichtlinien zum Erstellen dynamischer Webanwendungen mit minimalem JavaScript-Einsatz durch HTML-Attribute.
Einführung
HTMX erweitert HTML um Attribute, die HTTP-Anfragen auslösen und Antwortinhalte direkt in die Seite einfügen – ohne dass Sie JavaScript schreiben müssen. Diese Fähigkeit beschreibt, wie Sie HTMX effektiv nutzen, um interaktive, reaktionsschnelle Benutzeroberflächen zu bauen.
Kernkonzepte
- Serverzentriert: Die meiste Logik verbleibt auf dem Server; HTMX ersetzt lediglich HTML-Fragmente.
- Progressive Verbesserung: Ihre Anwendung funktioniert auch ohne JavaScript, wird aber mit HTMX interaktiver.
- Weniger Code: Reduzieren Sie die JavaScript-Menge drastisch, indem Sie deklarative Attribute verwenden.
Wichtige HTMX-Attribute
| Attribut | Beschreibung |
|---|---|
hx-get | Führt eine GET-Anfrage aus. |
hx-post | Sendet eine POST-Anfrage. |
hx-put | Sendet eine PUT-Anfrage. |
hx-delete | Sendet eine DELETE-Anfrage. |
hx-swap | Legt fest, wie die Antwort in das DOM eingefügt wird (z. B. innerHTML, outerHTML, afterend). |
hx-trigger | Definiert das Ereignis, das die Anfrage auslöst (z. B. click, change, load). |
hx-target | Gibt das Ziel-Element für die aktualisierte Antwort an. |
Beispiel
<button hx-get="/api/neue-daten" hx-trigger="click" hx-target="#ergebnis">
Daten laden
</button>
<div id="ergebnis">
<!-- Antwort wird hier eingesetzt -->
</div>
Best Practices
- Antworten beschränken: Senden Sie nur das nötige HTML-Fragment, nicht die gesamte Seite.
- HX-Trigger-Header nutzen: Verwenden Sie den
HX-Trigger-Response-Header, um clientseitige Ereignisse auszulösen (z. B. für Benachrichtigungen). - Wiederverwendbare Komponenten: Erstellen Sie modulare Vorlagen für Fragmente, die häufig aktualisiert werden.
- Fehlerbehandlung: Implementieren Sie serverseitige Validierung und senden Sie geeignete HTTP-Statuscodes (z. B.
422für Validierungsfehler).
Integration mit serverseitigen Frameworks
HTMX funktioniert mit jeder serverseitigen Technologie, die HTML zurückgibt. Beliebte Kombinationen:
- Django: Fügen Sie HTMX via CDN ein und nutzen Sie Django-Vorlagen für Fragmente. Paket:
django-htmx. - Flask: Nutzen Sie
render_templatefür Fragmente – ganz einfach. - Node.js (Express): Verwenden Sie View-Engines wie Pug, um dynamische Fragmente zu erzeugen.
Lizenz
Dieses Projekt ist unter der MIT-Lizenz lizenziert.