Frameworks wie Next.js und Nuxt versuchen, Client und Server wieder näher zusammenzubringen und setzen dabei auf die großen SPA-Frameworks React und Vue. Die leichtgewichtige Bibliothek htmx dagegen versucht, das gleiche Ziel auf ganz andere Weise zu erreichen. Muss es denn immer eine SPA sein? Reicht nicht auch in vielen Fällen deutlich weniger Overhead? Wir haben schließlich HTML als Strukturelement und CSS für das gute Aussehen. Genau diesen Ansatz greift htmx auf und erweitert die Fähigkeiten der HTML-Struktur. Serverkommunikation und Eventhandling erreichen mit dieser Bibliothek eine ganz neue Dimension. Aber was bedeutet das für unsere tägliche Arbeit? Setzen wir in Zukunft alle neuen Applikationen nur noch mit htmx um, oder migrieren wir unsere Vue-Codebasis auf htmx? Diesen und vielen weiteren Fragen widmen wir uns in diesem Vortrag, nicht nur in der Theorie, sondern auch am praktischen Beispiel.

2. Über mich
Hallo, ich bin der Basti
JavaScript Entwickler
aus München
https://github.com/sspringer82
@basti_springer
Techstack: Node & React

4. HTMX
https://htmx.org/
• Mehr HTML, weniger große JavaScript SPAs
• Requests von jedem Element
• Events von jedem Element
• Alle HTTP-Methoden
• Selektive Updates

5. JSON

6. Wisst ihr noch? Damals…
https://web.archive.org/web/19990117033828/http://www2.microsoft.com/

7. Damals…
Als die Welt noch in Ordnung war
• Internet Explorer
• Serverseitiges Rendern von (dynamischen) HTML-Templates
• Keine Aufgeblasenen JavaScript-Applikationen
• Konzentration auf das Wesentliche
• …und die Web-Standards

8. HTML
Und seine Limitierungen
• Requests nur über <a> und <form>
• Requests nur über click und submit
• Nur GET und POST verfügbar
• Full Screen load nach Request

9. HTMX
Installation/Integration
• CDN
• <script src="https://unpkg.com/htmx.org@1.9.12" …></script>
• htmx.min.js
• https://unpkg.com/htmx.org/dist/htmx.min.js
• NPM
• npm add htmx.org

10. Anatomie eines Elements
<button
hx-delete="/bakery/42"
hx-trigger="click"
hx-target="closest tr"
hx-swap="outerHTML"
>
löschen
</button>
Methode und Pfad
Was löst den Request aus
Worauf wirkt er sich aus
Was wird ausgetauscht

11. Demo

12. Methods
Mehr Semantik in der Kommunikation
• hx-get, hx-post, hx-put, hx-delete
• Mit Pfadangabe
• hx-vals für zusätzliche Daten als Body oder Query String
<button
hx-post="/vals"
hx-trigger="click"
hx-vals='{"name": "Klaus", "age": 42}'
hx-target="#result"
hx-swap="innerHTML"
>
do it
</button>

13. Trigger
Was löst die Aktion aus?
• Standardevents: click, submit, change
• Modi
fi
er: change, delay:<time>, throttle:<time>, from:<Selector>
• Einmalig: once
• Filter: click[ctrlKey]
• Special Events: load, revealed, intersect

14. Target
Worauf wirkt sich die Aktion aus?
• <Selector>: der angegebene Selektor
• this: das aktuelle Element
• closest <Selector>: das Element mit dem Kürzesten Pfad
• next <Selector>: das Element, dem aktuellen folgt
• previous <Selector>: das Element, vor dem aktuellen
•
fi
nd <Selector>: das erste passende Kind

15. Swap
Was wird ausgetauscht?
• innerHTML (Standard): Inhalt wird ausgetauscht
• outerHTML: Ziel wird ersetzt
• afterbegin: Vor dem ersten Kind im Target
• beforebegin: Vor dem Ziel
• beforeend: Als letztes Kind
• afterend: Nach dem Ziel
• delete: Ziel wird gelöscht
• none: es passiert nichts

16. hx-on*
Inline scripting
• Standard-Events:
• hx-on:click=“”
• HTMX-Events
• hx-on:htmx:before-request=“”

17. Validierung

18. Validierung
• Clientseitige Validieriung
• Fehlschlagende Validieren verhindert Requests
• Custom Fehleranzeige
• Einfache Integration
• Kompatibel zum Standard

19. Validierung
document.body.addEventListener(‘htmx:validation:validate', (event) => {});
<input name="input1"
onkeyup="this.setCustomValidity('')"
hx-on:htmx:validation:validate="" />

20. Ein aufwändigeres Beispiel

21. Anderes Mindset
• Mehr Verantwortung für den Server:
• Server sendet geändertes HTML
• Mehr Logik auf dem Server
• Der Client macht weniger
• Mehr Fullstack und direktere Abstimmungen
• Aufteilung Backend/Frontend macht deutlich weniger Sinn

22. Was taugt htmx?

23. Wo setzt man HTMX ein?
• Eher kleinere Applikationen
• Moderne dynamische Web-Applikationen
• Ohne umfangreiche JavaScript-Frameworks
• Logik eher serverseitig
• HTML besser nutzbar machen

24. Die Grenzen von HTMX
• Keine komplexe client-seitige Logik
• Kein State Management
• Skaliert nur bedingt
• Codeorganisation kann zur Herausforderung werden
• Enge Kopplung zwischen Client und Server

25. Fragen?
GitHub.c
Rainer Sturm / pixelio.de