SlideShare a Scribd company logo
Über mich
Hallo, ich bin der Basti
JavaScript Entwickler
aus München
https://github.com/sspringer82
@basti_springer
Techstack: Node & React
HTMX
https://htmx.org/
• Mehr HTML, weniger große JavaScript SPAs
• Requests von jedem Element
• Events von jedem Element
• Alle HTTP-Methoden
• Selektive Updates
JSON
Wisst ihr noch? Damals…
https://web.archive.org/web/19990117033828/http://www2.microsoft.com/
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
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
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
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
Demo
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>
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
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
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
hx-on*
Inline scripting
• Standard-Events:
• hx-on:click=“”
• HTMX-Events
• hx-on:htmx:before-request=“”
Validierung
Validierung
• Clientseitige Validieriung
• Fehlschlagende Validieren verhindert Requests
• Custom Fehleranzeige
• Einfache Integration
• Kompatibel zum Standard
Validierung
document.body.addEventListener(‘htmx:validation:validate', (event) => {});
<input name="input1"
onkeyup="this.setCustomValidity('')"
hx-on:htmx:validation:validate="" />
Ein aufwändigeres Beispiel
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
Was taugt htmx?
Wo setzt man HTMX ein?
• Eher kleinere Applikationen
• Moderne dynamische Web-Applikationen
• Ohne umfangreiche JavaScript-Frameworks
• Logik eher serverseitig
• HTML besser nutzbar machen
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
Fragen?
GitHub.c
Rainer Sturm / pixelio.de

More Related Content

Similar to HTMX - ist das die nächste Revolution im Web?

Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
Jan Berens
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
Kai Donato
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
Oliver Lemm
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
 
Googlebot Analyse mit Elasticsearch
Googlebot Analyse mit ElasticsearchGooglebot Analyse mit Elasticsearch
Googlebot Analyse mit Elasticsearch
Valentin Pletzer
 
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
e-dialog GmbH
 
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
e-dialog GmbH
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEARCH ONE
 
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
OPEN KNOWLEDGE GmbH
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
predic8
 
Effiziente datenpersistierung mit JPA 2.1 und Hibernate
Effiziente datenpersistierung mit JPA 2.1 und HibernateEffiziente datenpersistierung mit JPA 2.1 und Hibernate
Effiziente datenpersistierung mit JPA 2.1 und Hibernate
Thorben Janssen
 
Architecture challenges of search
Architecture challenges of searchArchitecture challenges of search
Architecture challenges of searchTorsten Köster
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 

Similar to HTMX - ist das die nächste Revolution im Web? (20)

Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
 
Googlebot Analyse mit Elasticsearch
Googlebot Analyse mit ElasticsearchGooglebot Analyse mit Elasticsearch
Googlebot Analyse mit Elasticsearch
 
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
Google Analytics Konferenz 2019_Google Tag Manager Hacks - für jeden etwas da...
 
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
GMP-Con 2019 - GTM Hacks - Maik Bruns (Metrika)
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
 
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
REST: Versprechen, Wirklichkeit & Alternativen: GraphQL, GRPC, JSON RPC...
 
Effiziente datenpersistierung mit JPA 2.1 und Hibernate
Effiziente datenpersistierung mit JPA 2.1 und HibernateEffiziente datenpersistierung mit JPA 2.1 und Hibernate
Effiziente datenpersistierung mit JPA 2.1 und Hibernate
 
Architecture challenges of search
Architecture challenges of searchArchitecture challenges of search
Architecture challenges of search
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 

More from Sebastian Springer

Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
Sebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
Sebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
Sebastian Springer
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
Sebastian Springer
 
Angular2
Angular2Angular2
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
Sebastian Springer
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
Sebastian Springer
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
Sebastian Springer
 
Typescript
TypescriptTypescript
Typescript
Sebastian Springer
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
Sebastian Springer
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
Sebastian Springer
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Sebastian Springer
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
Sebastian Springer
 

More from Sebastian Springer (20)

Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typescript
TypescriptTypescript
Typescript
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 

HTMX - ist das die nächste Revolution im Web?

  • 1.
  • 2. Über mich Hallo, ich bin der Basti JavaScript Entwickler aus München https://github.com/sspringer82 @basti_springer Techstack: Node & React
  • 3.
  • 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
  • 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=“”
  • 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="" />
  • 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
  • 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