How to boost your programming skills in HTML with HTMX

Are you tired of all those boring JS frameworks that load a HUGE node_modules in your machine, do a lot of useless and automagic stuff and seem like they want to create a PHP 2.0. You just want to build a simple form application using only the technologies that actually runs in the browser? Your problems are OVER. In this tech talk, I will show you all you can do with HTMX, a small, dependency-free, extensible, IE11-compatible library that extends your HTML (without transforming it into JS code). So you will be able to build modern user interfaces with the simplicity and power of hypertext.

Transcript

1. htmx @luisrondow
2. whoami software engineer since 2018 js frameworks hater lofi organizer of this beaultiful meetup i believe in francesinha supremacy
3. HTML CSS JS
4. web is literally only this
5. so, why do all these frameworks exist?
6. to answer that, let's take a look into the web history one more time...
7. a brief story of web web 1.0
8. a brief story of web web 1.0
9. a brief story of web web 1.0
10. a brief story of web web 2.0 $.ajax({ url: "test.html", context: document.body }).done(function() { $( this ).addClass( "done" ); }); 1 2 3 4 5 6 $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); 1 2 3 4 5 6
11. AJAX Asynchronous JavaScript and XML
12. a brief story of web web 2.0
13. a brief story of web web 2.0
14. there's a problem with this approach.
15. 1. state generated on the server 2. state sent down via JSON (intermidated) 3. app cache + a huge management (business logic) of this state on client 4. BOOM: produces a new state rendered on HTML
16. a lot of js code + state and validation duplicity (triplicity?)
17. the htmx solution
18. HTMX HTML is the representation of your application state
19. HATEOAS Hypermedia as the engine of application state
20. the server will tell me when it changes or the client can ask for a change and htmx provides a very automated and declarative way of doing it
21. HTMX
22. finally a boost for HTML programmers 😎
23. HTMX
24. hx-get will get stuff from an endpoint and set the element innerHTML to the response HTML hx-post will trigger a post to an endpoint and set the element innerHTML to the response HTML
25. hx-get will get stuff from an endpoint and set the element innerHTML to the response HTML hx-post will trigger a post to an endpoint and set the element innerHTML to the response HTML hx-target hx-swap
26. demo time
27. ok, i know this is a stupid way to increment a counter
28. but it's possible to cook cool stuff with htmx
29. let's take a look 👀
30. htmx is cool and you can use whatever language you want
31. of course it's not a silver bullet just like all tech tools (even react)
32. NOT COVERED Browser History Debugging HTMX apps Caching Security (XSS attacks)
33. "primegean htmx" for more content:
34. references - ThePrimegean - Fireship - Isaac Harris-Holt HTMX docs The Truth About HTMX | Prime Reacts htmx in 100 seconds HTMX for Impatient Devs
35. questions?
36. thank you!