htmx and Node.js/Bun: A Dynamic Duo

Álvaro José Agámez Licha

Senior Software Developer

https://github.com/aagamezl

https://twitter.com/aagamezl

A Lot Of Memes Ahead

• React Frontend developers don't take it personally.
• Nobody take it personally.
• Let's enjoy and learn.

Introduction

What is htmx?

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. htmx is small (~14k min.gz’d), dependency-free, extendable.

htmx Forces A Mental Change

Why should you use htmx?

How Did We Get Here?

Are You Serious?

Six Bullet Points Why htmx Is Great

Features

• Lightweight
• Easy to learn
• Seamless integration with existing code

haiku
javascript fatigue:
longing for a hypertext
already in hand

AJAX

How does htmx use Ajax?

• hx-get: issues a GET request to a specified URL.
• hx-post: issues a POST request to a stated URL.
• hx-put: issues a PUT request to a certain URL.
• hx-patch: issues a PATCH request to a set URL.
• hx-delete: issues off a DELETE request to a declared URL.

AJAX

How does htmx use Ajax?

AJAX

How does htmx use Ajax?

AJAX

How does htmx use Ajax?

Use Cases

• Real-time updates.
• Form submission.
• Progressive enhancement.
• Information oriented apps.
• Improve rendering performance.

Simplicity in Web Development

Simplicity in Web Development

We took the plunge and replaced the 2-year-of-work React UI of our SaaS product with simple Django templates and htmx in a couple of months. We’d like to share our experience with you, with concrete indicators on various aspects, and convince your CTO!

Let's Allow htmx To Bring Happiness Again.

Conclusion

htmx is a powerful tool for creating interactive web applications with ease.