htmx - chemnitzer linux-tage 2021
TRANSCRIPT
![Page 1: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/1.jpg)
HTMX
Make web development simple and fun again
![Page 2: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/2.jpg)
My opinionated Odyssey
![Page 3: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/3.jpg)
History
1999: CGI Scripting with Shell and Perl
2001: Python
2008..today: Python and Django
![Page 4: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/4.jpg)
2014: Angular
Wow, that’s the future: The server sends JSON to the browser.
But customers kept us busy doing the things we did before (Django)
![Page 5: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/5.jpg)
2020: React / Vue
I am glad, that I sticked to Django,
and did not chose Angular.
I played with React/Vue … but no “wow”
![Page 6: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/6.jpg)
Om - What do I like?
● I like the Django Forms library○ Create HTML (on the server)○ Validate user input (on the server)
● I like Django ORM● HTTP & HTML
![Page 7: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/7.jpg)
What do I want to improve?
● Full Page Reload after sending a form. Grrrr● Own ajax library for submitting/reloading snippets: No fun.
![Page 8: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/8.jpg)
One Page, several Parts
Part 1
Part 2
Part 3
![Page 9: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/9.jpg)
Part 1
Part 2
Part 3
GET https://example.com/news
PUT https://example.com/chat
POST https://example.com/foo-form
![Page 10: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/10.jpg)
SPA ?
Single Page Application?
….. no, not needed.
I just want to Submit/Reload parts of the page.
![Page 11: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/11.jpg)
State-Management
● State?● Stateless has won:
○ CORBA → http○ Server with long uptime → Container
● I don’t want a valuable state on the client. Only GUI state (scrolling, folding)● Every valuable state should be in the central database.
![Page 12: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/12.jpg)
Form Validation in the Browser?
….. ok, nice to have validation on the client side …. but
…. but I need to validate on server, too.
Maybe I don’t need validation on the client side?
![Page 13: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/13.jpg)
SSR Hype
● Looked at Server-Side-Rendering of React/Vue● wait ! ! !● This huge stack ....● Do really want that?● Are there alternatives?
If you prefer boring facts to emotions: Rendering on the Web
![Page 14: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/14.jpg)
Declarativevs
Imperative
![Page 15: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/15.jpg)
HTML, CSS, SQLvs
if/else, loops ...
![Page 16: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/16.jpg)
Conditionless 💕
![Page 17: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/17.jpg)
HTML 💕
![Page 18: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/18.jpg)
Keep the Client ...
Simple & Stateless
![Page 19: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/19.jpg)
JSON HTML Fragments over the wire
● Unpoly: unpoly.com● Hotwire: hotwire.dev● …● HTMX: htmx.org
![Page 20: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/20.jpg)
HTMX adds new Attributes
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
![Page 21: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/21.jpg)
HTML Fragments over the wire
URL /clicked
→ HTML Fragment/Snippet from server to client.
![Page 22: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/22.jpg)
HTMX
● Works with every language (server side)
● ~9k min.gz
![Page 23: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/23.jpg)
hx-trigger
<div hx-get="/clicked" hx-trigger="click">
Click Me
</div>
hx-trigger docsload, revealed, every 1s
![Page 24: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/24.jpg)
htmx.org/examples/
Click to Edit
Cascading Selects
Infinite Scroll
Tabs
![Page 25: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/25.jpg)
HTMX
Hyperscript
![Page 26: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/26.jpg)
You might not need JQuery?
We enjoy typing ???http://youmightnotneedjquery.com/
![Page 27: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/27.jpg)
Hyperscript
Hyperscript is a fun little scripting language for doing front end web development.
hyperscript.org
![Page 28: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/28.jpg)
Hyperscript: Step by Step
<button _="on click put 'I was clicked!' into my.innerHTML">
Click Me!
</button>
No Async, No Await, No Promises
![Page 29: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/29.jpg)
You might not need JS
![Page 30: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/30.jpg)
End of Odyssey?
![Page 31: HTMX - Chemnitzer Linux-Tage 2021](https://reader033.vdocuments.net/reader033/viewer/2022052106/62880cd5ac81366f0b757dc7/html5/thumbnails/31.jpg)
HTMX + Hyperscript💕
Make web development simple and fun again
Thomas Güttler, March 2021