Das Dokument stellt Basti, einen JavaScript-Entwickler aus München, vor und diskutiert die Verwendung von htmx, einer Bibliothek zur Vereinfachung von HTML-Interaktionen ohne umfangreiche JavaScript-Frameworks. Es werden verschiedene Funktionen, Möglichkeiten zur Integration sowie Anwendungsfälle und Einschränkungen von htmx behandelt. Der Fokus liegt auf serverseitiger Logik und der Verbesserung der Nutzung von HTML in modernen Webanwendungen.

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