The case against htmx
Summary
TLDRThis 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
🚫 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.
📚 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.
Mindmap
Keywords
💡HDMX
💡Ajax requests
💡Separation of concerns
💡User experience (UX)
💡Developer experience (DevX)
💡Bandwidth
💡Progressive web applications (PWA)
💡Modern web frameworks
💡JavaScript
💡TypeScript
💡HTML
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
Weitere ähnliche Videos ansehen
hello Javascript, oh how I've missed you
The Most Important Lesson From HTMX
React vs HTMX - A Fascinating War
DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!
Pure React vs Next.js | What’s Happening in React?
Why I Do NOT Use Flutter for Mobile App Development
5.0 / 5 (0 votes)