The case against htmx

Summary

This video discusses the rise in popularity of HTMX, a framework allowing Ajax requests without JavaScript by using server responses in pure HTML. While HTMX is easy to learn, it breaks the separation of concerns, leading to poor user experience and scalability issues. The speaker argues that despite HTMX's simplicity, it results in increased bandwidth requirements and complex handling of server responses. The recommendation is to invest in learning modern frameworks like React, which, although initially challenging, offer better long-term developer and user experiences.

Takeaways

• 📈 HDMX is gaining popularity for sending Ajax requests without writing JavaScript.
• 💡 HDMX allows server responses to be pure HTML, which is then injected into the page.
• ⚠️ The speaker believes HDMX is problematic and should be avoided for anything other than hobby projects.
• 🛠️ Pros of HDMX: It’s easy to learn and requires minimal HTML and no JavaScript knowledge.
• 🚫 Cons of HDMX: It breaks the separation of concerns, mixing HTML, CSS, and JavaScript in server responses.
• 🔄 Non-trivial tasks with HDMX require extensive parsing and stripping of unwanted elements, leading to a messy process.
• ⏳ HDMX can degrade user experience as users wait for entire HTML responses, including unnecessary elements.
• 💸 Using HDMX can be more expensive due to larger bandwidth requirements and poorer user experience.
• 🔧 Modern frameworks like React offer better long-term developer experience and maintain separation of concerns.
• 📉 The user experience with HDMX worsens over time as the project grows, leading to scalability issues and high bandwidth consumption.

Q & A

What is HDMX and what does it allow users to do?

HDMX is a minimalistic framework that enables users to send Ajax requests without writing JavaScript. It requires the server response to be pure HTML, which is then injected into the page.

What are the main advantages of using HDMX?

The main advantages of HDMX are its ease of learning and the minimal knowledge required of HTML and JavaScript.

Why does the speaker compare using HDMX to jumping into a pool filled with sharks?

The comparison is used to emphasize the potential risks and downsides of using HDMX, warning that it could lead to significant problems down the line.

How does HDMX break the separation of concerns in web development?

HDMX breaks the separation of concerns by sending HTML wrapped data from the server instead of pure data. This HTML includes styling, images, and JavaScript event listeners, which should ideally be separate from the data.

What issues arise when using HDMX for non-trivial server responses?

Non-trivial server responses require parsing and cleaning the HTML to extract pure text, which involves removing CSS, images, table elements, canvas, video, audio, and inline styling, among other things.

How does HDMX impact user experience?

HDMX can destroy user experience by requiring users to wait for the entire HTML response to load from the server each time an action is performed, instead of a faster, stateless call.

What are the common issues with HDMX related to user interaction?

Common issues include double clicking, triple clicking, and event bubbling, which are not well handled by HDMX and can lead to a poor user experience.

Why is HDMX considered more expensive to run than a simple open API?

HDMX is more expensive because it requires sending and processing large chunks of HTML over HTTP for every request, which consumes more bandwidth and server resources.

How does mixing HTML and backend logic affect the application?

Mixing HTML and backend logic leads to a less maintainable and harder-to-reason application, as it intertwines styling, layout, and interactivity with data in API responses.

Why is it important to not sacrifice user experience for developer experience?

User experience should not be sacrificed because the end user is the customer who pays for the product or service, and a poor user experience can lead to dissatisfaction and loss of customers.

What does the speaker recommend for long-term development instead of using HDMX?

The speaker recommends learning JavaScript or TypeScript and using modern text-based frameworks like React for a better developer experience and improved user experience in the long term.

What is the speaker's stance on the importance of separation of concerns, bandwidth, and user experience?

The speaker emphasizes that separation of concerns, bandwidth efficiency, and user experience are crucial and should not be compromised, regardless of the framework or technology used in web development.