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.

Outlines

00:00

🚫 The Pitfalls of HDMX: Separation of Concerns and UX Issues

The speaker discusses the growing popularity of HDMX, a lightweight framework that enables Ajax requests without JavaScript, but warns of its potential pitfalls. HDMX requires server responses to be in pure HTML, which is then injected into the page. While it's easy to learn with minimal HTML knowledge, the speaker argues that HDMX breaks the separation of concerns by mixing data with HTML, CSS, and JavaScript. This leads to issues with parsing server responses, handling internationalization and localization, and managing edge cases like event bubbling. The speaker emphasizes the negative impact on user experience due to the need to load entire HTML pages for each interaction, rather than just data. HDMX is criticized for its lack of scalability, poor performance, and high bandwidth usage, making it unsuitable for modern web applications. The speaker concludes by advocating for the importance of maintaining a clear separation of concerns and prioritizing user experience over developer convenience.

05:03

📚 Learning Modern Technologies Over HDMX for Long-Term Success

Continuing the discussion on HDMX, the speaker highlights the limitations of using this framework as projects grow in complexity. They point out that despite efforts to optimize HDMX, the lack of separation of concerns, poor scalability, and negative user experience persist. HDMX is described as an outdated tool that, despite its initial simplicity, fails to meet the demands of modern web development. The speaker encourages developers to invest time in learning JavaScript or TypeScript and to work with modern frameworks like React. This approach, while it may have a steeper initial learning curve, leads to a significantly better developer experience and, most importantly, a superior user experience in the long run. The speaker concludes by stressing the importance of prioritizing user experience and the value of mastering current technologies over relying on outdated methods.

Keywords

💡HDMX

HDMX is a lightweight framework that enables the sending of Ajax requests without the need for JavaScript. It is characterized by its simplicity and the requirement for server responses to be in pure HTML format, which is then injected into the page. In the video, the speaker expresses concerns about the use of HDMX, likening it to a 'stone age tool' due to its potential negative impact on user experience and separation of concerns.

💡Ajax requests

Ajax, which stands for Asynchronous JavaScript and XML, is a set of web development techniques that allows web pages to communicate with servers without requiring a full page refresh. In the context of the video, HDMX facilitates Ajax requests, but the speaker argues against this approach due to the drawbacks it presents.

💡Separation of concerns

Separation of concerns is a design principle for organizing code by separating it into distinct sections, each addressing a separate concern. The video emphasizes that HDMX breaks this principle by mixing HTML, styling, and data within server responses, which can complicate parsing and lead to a poor user experience.

💡User experience (UX)

User experience refers to how a person feels when interacting with a system, which includes the practical, emotional, and meaningful aspects of the person's use. The video argues that HDMX negatively impacts UX due to issues like long loading times for HTML responses and the need for extensive parsing to extract useful data.

💡Developer experience (DevX)

Developer experience is the measure of how easily and efficiently developers can build and maintain applications. The video contrasts DevX with UX, suggesting that while HDMX may offer a quick start for developers, it sacrifices long-term UX, which is more critical for the success of a web application.

💡Bandwidth

Bandwidth refers to the maximum rate of data transfer across a given path. The video points out that HDMX can lead to increased bandwidth usage due to the transmission of large HTML responses, which is not only inefficient but also detrimental to user experience.

💡Progressive web applications (PWA)

Progressive web applications are web applications that load like regular web pages but can offer user experiences like native apps. The video suggests that HDMX is incompatible with the principles of PWA due to its requirement for complete HTML responses, which hinders the ability to create efficient, app-like web experiences.

💡Modern web frameworks

Modern web frameworks are advanced tools and libraries that help developers build robust and scalable web applications. The video advocates for the use of such frameworks, like React, over HDMX, as they offer better developer experience and user experience in the long term, despite a steeper initial learning curve.

💡JavaScript

JavaScript is a high-level, interpreted programming language that is widely used in developing interactive web pages. The video discusses the need for developers to learn JavaScript or TypeScript to effectively use modern web frameworks, which is a skill that becomes increasingly valuable as one progresses in web development.

💡TypeScript

TypeScript is a superset of JavaScript that adds static type definitions to the language. It is often used in modern web development to improve code quality and maintainability. The video encourages developers to learn TypeScript as part of mastering modern web development practices.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages and web applications. The video criticizes HDMX for its reliance on pure HTML server responses, which can include unnecessary elements and styling, leading to a bloated and less efficient user experience.

Highlights

HDMX is a lightweight framework that allows sending Ajax requests without JavaScript.

Server responses with HDMX must be pure HTML, which is then injected into the page.

HDMX is easy to learn, requiring minimal HTML knowledge and no JavaScript.

Breaking the separation of concerns is a significant downside of using HDMX.

HDMX can lead to a poor user experience due to the need to load entire HTML responses.

HDMX responses include unnecessary elements like styling, images, and event listeners.

Parsing server responses in HDMX requires removing HTML elements and styling to get to the text.

HDMX can complicate internationalization and localization due to its approach to HTML responses.

HDMX is less efficient than a simple open API, leading to increased bandwidth usage and costs.

HDMX is not suitable for progressive web applications due to its requirement for complete HTML responses.

Mixing HTML for styling and layout with data and interactivity in API responses can lead to difficulties in reasoning about the app.

Developer experience should never be prioritized over user experience, especially in the long term.

Modern text-based frameworks like React offer a better developer experience and maintain high user experience standards.

Learning a modern framework like React has a higher initial learning curve but pays off with a better developer experience and user experience.

HDMX can lead to scalability issues and poor user experience as a project grows.

The separation of concerns, bandwidth efficiency, and user experience are crucial factors in choosing a web development framework.

HDMX is considered outdated, and modern web development should utilize contemporary tools and practices.

The speaker recommends learning JavaScript or TypeScript and going through React documentation for long-term benefits.

Transcripts

so this thing's been growing in

popularity lately and I feel we need to

talk about it it's called HDMX and it's

a tiny tiny framework if you could call

it a framework that allows you to send

Ajax requests without writing JavaScript

the server response has to be pure HTML

which is then injected into the page now

why am I talking about this like I feel

like I'm watching someone about to jump

in a pool filled with sharks and I need

to warn them stop what you're doing is

wrong you're going to get yourself

eternal life now let's start with the

pros of HDMX it's really easy to learn

you barely need to know any HTML at all

and no

JavaScript um and basically that's it

that's the entire list of Pros I could

think of now let's go over the list of

cons and why you should avoid using htx

for anything other than hobby projects

it breaks down separation of concerns so

instead of receiving pure data from your

server you're getting it wrapped in HTML

that HTML also has various area labels

and extra JavaScript event listeners

like on click onload Etc that HTML also

has styling HTML 5 elements like video

and audio and a canvas and some SVG and

some images and some table elements etc

etc so what's wrong with breaking

separation of concerns you might ask

well if you want to do anything

non-trivial with your server response

you first need to parse it with

JavaScript so you're out of HTM X

instantly you first need to remove the

CSS remove the extra images remove the

extra table elements remove the extra

canvas video audio and image elements

remove the inline styling remove the

event listeners remove anything and

everything except the text and what

you're left with is just pure text you

still need to parse that into an object

good luck with internationalization and

localization issues it's going to be a

horrible horrible mess to do anything

above the simple HTML replacement thing

that HDMX does for you secondly it

destroys your user experience so every

time someone clicks on a button they now

have to wait for the entire HTML

response to be loaded from the server

not just you know status call and

through no it has to be this huge HTML

with sty in and images and all that

stuff and it's all sent over HTTP what

about edge cases in fact these are very

common issues like double clicking

triple clicking event bubbling and so on

well the short answer is bad luck it's

much more expensive to run than a simple

open API for example so look the user

interface is for user interface things

and the back end is for backend things

if you're mixing the two you're going to

get bad side effects and one of them is

having to shuttle huge chunks of HTML

back and forth you cannot cash those

responses either because they have to be

complete HTML by Design that's what HTM

X requires of you so you can forget

about Progressive web applications it's

as if that entire web stack doesn't

exist anymore so what's the difference

between a 20 bytes response and a 20

kilobytes response with every single

click dollar dollar bills that's that's

the difference apart from the extra

bandwidth requirements and poorer user

experience you're going to find it

extremely difficult to reason with an

app that mixes styling layout which is

HTML data and interactivity in its API

responses this is all just a discussion

around developer experience versus user

experience at at the end of the day devx

versus ux I would argue that most modern

text TXS are verbos they do have a

little bit of a learning curve so so you

need to know your JavaScript your

typescript and you need to go through a

few tutorials to get started but that's

fine because once you do and you learn

to use available tooling your developer

experience dramatically improves the

point though is not to sacrifice user

experience ever even if available

tooling was indeed really really

difficult to learn you would still need

to never ever sacrifice ux over devx

because your end user is your customer

and they pay for the whole thing you

should really never sacrifice ux

especially for short live early days

developer experience when you're just

starting out yes it's much faster to

start an HDMX project than a react

project but medium to long term your

developer experience as a react

developer or any other modern text de is

orders of magnitude better than using no

framework at all or Worse HDMX the user

experience on the other hand never

recovers with HDMX this is a fact the ux

actually gets worse in time with HDMX as

your project grows look you'll find out

the hard way that no matter how much

time you spend on the thing considering

all edge cases and trying to optimize it

you're always going to bump into the

lack of separation of concerns problem

poor scalability and really really bad

horrible user experience with

unjustifiable bandwidth requirements

HDMX is a stone age tool it's seducted

in its Simplicity but we're building

modern web applications on Modern

Hardware using modern text TXS that

become exponentially more lovable as you

climb that learning curve trust me we

don't need to get back to the 1980

something unless it's the Goldbergs and

we don't need yet another member berries

pie just do yourself a favor learn

JavaScript or typescript go through that

react documentation and thank yourself

in 6 months so this is it this is my

entire rant for today separation of

concerns matters bandwidth matters and

user experience trumps developer

experience no matter what framework or

text Tech you're using so if you want to

keep on enjoying uh rants like this one

don't forget to hit that subscribe

button and I'll see you in the next one

bye-bye