4 ms·

This is the thing that makes me lose interest in HTMX. People talk about it like it eliminates the need for JS/React/etc, but as far as I can tell, you're still

by ysavir 2y ago

This is the thing that makes me lose interest in HTMX. People talk about it like it eliminates the need for JS/React/etc, but as far as I can tell, you're still writing those same templates, just using your backend language instead of JS. Which is convenient, but hardly "less code", just a different language, and that backend language probably lacks a lot of functionality you'd want for UI convenience. That's all fine if you'll never want those UI conveniences, by my experience has been that the want of those UI conveniences creep in over time, and eventually you regret not using something that makes them native and easy. I haven't actually played around with HTMX, so I might be sizing it up wrong, but it's mission statement just never resonated with me enough to want to try it out.

emseetech 2y ago
The value of HTMX is that state now resides solely on the server, and the browser becomes only a representation of that state. This simplifies applications considerably because maintaining two copies of the state between client and server is the source of a lot of complexity in modern applications. It wasn't about writing less code (although it is about writing less javascript) but about working with the concept of hypermedia instead of against or around it.
- rtpg 2y ago
  Something I dislike about this argument is that there are a lot of UX flows where "tracking the state server-side" is a _major_ pain in the butt compared to having client-side state. And popular backend frameworks are not super up to the task! I have the impression that older web frameworks did in fact have a good amount of statefulness built in, and that causes a whole host of issues, so I believe to understand _why_ modern backend frameworks really don't lean into that.
  - emseetech 2y ago
    You're absolutely right, htmx is not built for every UX flow. But neither is React. And we've been reaching for it by default for everything and that's been a mistake. So much of what's built these days could be stateless MPAs. Servers have gotten crazy fast, and I'd certainly rather optimize for page size and server latency than build a React app. With the upcoming views transitions api, a bit of htmx, and custom web components and you get 95% of what React offers without anywhere near the package size or complexity. You don't even need a compile step. I'd never argue htmx is best for all use cases, I would hate for it to mutate the way React has, trying to be everything to everyone. But I hope htmx is the start of re-thinking how they approach the web and realizing that there are significantly simpler ways to build a frontend.
    - lloydatkinson 2y ago
      I definitely think it’s important to note it’s not really React that’s mutated it’s damn Vercel with its extreme vendor lock in plan with Next that’s trying to force React to be server side as much as client side, especially now that Vercel employs some React core team members. Unfortunately worked with someone I was reasonably sure was a ~~paid shill~~ part of some Vercel partner/influencer programme as they were adamant we must use Next (and Vercel but they lost that argument) for a project the team absolutely didn’t need to use it for. In fact the rewrite of a project was worse than the original application. The original was snappy and instant and just worked meanwhile the Next version was slow, full page refreshes for every action, and just totally awful. I couldn’t get off that team quick enough.
      - langcss 2y ago
        Next is odd because it gives lots of "high preformance" vibes with static rendering and image optimization. It is fast enough but not as fast as tuning up a classic MVC app which caching, avoiding JS bundles and React or deferring scripts etc. Send out the right cache headers and chuck a CDN in front. Next is ironically fast if you prerender/static generate AND the client disables JS!
  - omnimus 2y ago
    Server side frameworks force you to keep most state in the URL (or localstorage). This is a limitation. But in my experience it’s not a bad one because only very best designers i worked with were deliberate about state so they could use this advantage. More likely than not you get designs that create all kinds of messy app states around and users then can’t properly use bookmarks or back button. This in turn leads to hotfixes and more mess in frontend. Forcing designers to think about urls and their names is in most cases very good.
    - librasteve 2y ago
      this is the argument that resonates with me ... increasing complexity around event driven frameworks includes more cognitive load to reason about state information in two (or more) places whereas the web of olden times was conceived around stateless clients (plus some cookies) as I say in the post, HTMX is not for you if you are building a web app that needs this ... but in 90% of cases web sites don't
    - naasking 2y ago
      > Server side frameworks force you to keep most state in the URL (or localstorage). This is a limitation. Rather than limitation, I think of it as a constraint. The best engineering takes place under constraints, because when you're unconstrained you have a high chance of repeating mistakes that have known solutions. In this case, you rightly point out that the UX of the browser has certain limitations and making all state URL-addressable is the interface to that UX.
  - cies 2y ago
    > "tracking the state server-side" is a _major_ pain in the butt compared to having client-side state. The issue with many SPAs I saw was that state had to be managed BOTH in the browser AND on the server. This resulted in more code, longer time to market, and reduced velocity. The SPA route can be a requirement (e.g. when a highly interactive UX is warranted), in that case there's no way around it. But when it's simply a bunch of forms in a business app, that's usually not the case: in those cases I'd go with a traditional "multi page app" and/or HTMX.
- the_gipsy 2y ago
  I haven't used htmx, but this doesn't seem to be true at all. The equivalent state would also be in the client, as URL and HTML.
  - emseetech 2y ago
    The state is represented by the url and html, but that's not the same as managing state in client-side memory using Javascript. Hypermedia Systems is a great read, by the htmx creator, available here: https://hypermedia.systems https://hypermedia.systems
    - the_gipsy 2y ago
      But it's not on the server any more than with a JS app.
      - emseetech 2y ago
        Not sure I understand what you mean.
        the_gipsy 2y ago
        The equivalent of the JS state doesn't live in the server side session, or something like that.
  - consteval 2y ago
    The client doesn't produce those URLs or HTML - the server does. That's just what the user sees.
- langcss 2y ago
  There is client state. The URL plus the sum of whatever partial swaps you did since loading the page.
  - emseetech 2y ago
    That's the representation of state, not the state itself.
- ysavir 2y ago
  This isn't unique to HTMX though. You can do the same with any frontend framework. You can argue that HTMX forces this to be the case, but has a lot of trade offs in doing so.
omnimus 2y ago
The approach actually is not that different if you realize that there isnt much difference between sending json and sending html. Htmx is like if you were using react and rendering raw html everywhere. The main advantage people feel with htmx is that your routing is serverside and you dont have to keep quering/filtering/transforming data from your api to fit UI because you have access to everything. Do you suddenly need number of groups user is part of in this one only place? Well api doesnt have it so either extend api (figure out how to name it and where to put it) or you fetch all groups user is part of and count them on frontend. This middlelayer is something i realized i more often than not need. And when i need interactive UI i can initialize webcomponent or even have react island. Since htmx (and other similar tools) dont expect to overtake whole DOM but work with elements they can be very isolated if you want them to be.
miggol 2y ago
At the end of the day, neather approach really has features over the other. HTMX doesn't forbid other JS components. I think HTMX appeals to fullstack devs like me who often find themselves needing bespoke API calls for their frontend views anyway. When writing tightly coupled backend code for a frontend view, I'm quick to think "well why am I not doing this entire feature in the backend, anyway?" And HTMX makes that super easy without giving much up. But the opposite reaction would be equally valid.
Cruncharoo 2y ago
No, you're pretty much exactly right. I am not a programmer by trade and when searching around and trying different technologies the first one that really clicked for me was HTMX. For whatever reason, handling all of that logic on the backend felt more natural. I've since started learning React and it's amazing how much 'easier' some of those UI conveniences really are. However, in places where they aren't truly necessary it's hard to beat the convenience and ease of a small Flask/SQLite/HTMX app, for me. But yeah, if that doesn't really fit your mental model then I don't see a huge reason to give it a try.. other than it IS fun!
naasking 2y ago
> but as far as I can tell, you're still writing those same templates, just using your backend language instead of JS. Yes. > Which is convenient, but hardly "less code" It is strictly less code because you're no longer validating on both client and server. It's also more than just "convenient", because it also forces you to stick to the well understood browser UX, ie. all state is URL-addressable.
- scoofy 2y ago
  I would rather write 1000 lines of Python than 100 lines of JS. Nothing wrong with JS, I'm just not fluent in it. Whereas, Python is my native programming language, and I can just see it without looking anything up. This is why I love HTMX. I just want basic web interaction without having to do it all in Javascript.

by ysavir 2y ago

emseetech 2y ago

The value of HTMX is that state now resides solely on the server, and the browser becomes only a representation of that state. This simplifies applications considerably because maintaining two copies of the state between client and server is the source of a lot of complexity in modern applications. It wasn't about writing less code (although it is about writing less javascript) but about working with the concept of hypermedia instead of against or around it.

rtpg 2y ago
Something I dislike about this argument is that there are a lot of UX flows where "tracking the state server-side" is a _major_ pain in the butt compared to having client-side state. And popular backend frameworks are not super up to the task! I have the impression that older web frameworks did in fact have a good amount of statefulness built in, and that causes a whole host of issues, so I believe to understand _why_ modern backend frameworks really don't lean into that.
- emseetech 2y ago
  You're absolutely right, htmx is not built for every UX flow. But neither is React. And we've been reaching for it by default for everything and that's been a mistake. So much of what's built these days could be stateless MPAs. Servers have gotten crazy fast, and I'd certainly rather optimize for page size and server latency than build a React app. With the upcoming views transitions api, a bit of htmx, and custom web components and you get 95% of what React offers without anywhere near the package size or complexity. You don't even need a compile step. I'd never argue htmx is best for all use cases, I would hate for it to mutate the way React has, trying to be everything to everyone. But I hope htmx is the start of re-thinking how they approach the web and realizing that there are significantly simpler ways to build a frontend.
  - lloydatkinson 2y ago
    I definitely think it’s important to note it’s not really React that’s mutated it’s damn Vercel with its extreme vendor lock in plan with Next that’s trying to force React to be server side as much as client side, especially now that Vercel employs some React core team members. Unfortunately worked with someone I was reasonably sure was a ~~paid shill~~ part of some Vercel partner/influencer programme as they were adamant we must use Next (and Vercel but they lost that argument) for a project the team absolutely didn’t need to use it for. In fact the rewrite of a project was worse than the original application. The original was snappy and instant and just worked meanwhile the Next version was slow, full page refreshes for every action, and just totally awful. I couldn’t get off that team quick enough.
    - langcss 2y ago
      Next is odd because it gives lots of "high preformance" vibes with static rendering and image optimization. It is fast enough but not as fast as tuning up a classic MVC app which caching, avoiding JS bundles and React or deferring scripts etc. Send out the right cache headers and chuck a CDN in front. Next is ironically fast if you prerender/static generate AND the client disables JS!
- omnimus 2y ago
  Server side frameworks force you to keep most state in the URL (or localstorage). This is a limitation. But in my experience it’s not a bad one because only very best designers i worked with were deliberate about state so they could use this advantage. More likely than not you get designs that create all kinds of messy app states around and users then can’t properly use bookmarks or back button. This in turn leads to hotfixes and more mess in frontend. Forcing designers to think about urls and their names is in most cases very good.
  - librasteve 2y ago
    this is the argument that resonates with me ... increasing complexity around event driven frameworks includes more cognitive load to reason about state information in two (or more) places whereas the web of olden times was conceived around stateless clients (plus some cookies) as I say in the post, HTMX is not for you if you are building a web app that needs this ... but in 90% of cases web sites don't
  - naasking 2y ago
    > Server side frameworks force you to keep most state in the URL (or localstorage). This is a limitation. Rather than limitation, I think of it as a constraint. The best engineering takes place under constraints, because when you're unconstrained you have a high chance of repeating mistakes that have known solutions. In this case, you rightly point out that the UX of the browser has certain limitations and making all state URL-addressable is the interface to that UX.
- cies 2y ago
  > "tracking the state server-side" is a _major_ pain in the butt compared to having client-side state. The issue with many SPAs I saw was that state had to be managed BOTH in the browser AND on the server. This resulted in more code, longer time to market, and reduced velocity. The SPA route can be a requirement (e.g. when a highly interactive UX is warranted), in that case there's no way around it. But when it's simply a bunch of forms in a business app, that's usually not the case: in those cases I'd go with a traditional "multi page app" and/or HTMX.
the_gipsy 2y ago
I haven't used htmx, but this doesn't seem to be true at all. The equivalent state would also be in the client, as URL and HTML.
- emseetech 2y ago
  The state is represented by the url and html, but that's not the same as managing state in client-side memory using Javascript. Hypermedia Systems is a great read, by the htmx creator, available here: https://hypermedia.systems https://hypermedia.systems
  - the_gipsy 2y ago
    But it's not on the server any more than with a JS app.
    - emseetech 2y ago
      Not sure I understand what you mean.
      - the_gipsy 2y ago
        The equivalent of the JS state doesn't live in the server side session, or something like that.
- consteval 2y ago
  The client doesn't produce those URLs or HTML - the server does. That's just what the user sees.
langcss 2y ago
There is client state. The URL plus the sum of whatever partial swaps you did since loading the page.
- emseetech 2y ago
  That's the representation of state, not the state itself.
ysavir 2y ago
This isn't unique to HTMX though. You can do the same with any frontend framework. You can argue that HTMX forces this to be the case, but has a lot of trade offs in doing so.

omnimus 2y ago

The approach actually is not that different if you realize that there isnt much difference between sending json and sending html. Htmx is like if you were using react and rendering raw html everywhere. The main advantage people feel with htmx is that your routing is serverside and you dont have to keep quering/filtering/transforming data from your api to fit UI because you have access to everything. Do you suddenly need number of groups user is part of in this one only place? Well api doesnt have it so either extend api (figure out how to name it and where to put it) or you fetch all groups user is part of and count them on frontend. This middlelayer is something i realized i more often than not need. And when i need interactive UI i can initialize webcomponent or even have react island. Since htmx (and other similar tools) dont expect to overtake whole DOM but work with elements they can be very isolated if you want them to be.

miggol 2y ago

At the end of the day, neather approach really has features over the other. HTMX doesn't forbid other JS components. I think HTMX appeals to fullstack devs like me who often find themselves needing bespoke API calls for their frontend views anyway. When writing tightly coupled backend code for a frontend view, I'm quick to think "well why am I not doing this entire feature in the backend, anyway?" And HTMX makes that super easy without giving much up. But the opposite reaction would be equally valid.

Cruncharoo 2y ago

No, you're pretty much exactly right. I am not a programmer by trade and when searching around and trying different technologies the first one that really clicked for me was HTMX. For whatever reason, handling all of that logic on the backend felt more natural. I've since started learning React and it's amazing how much 'easier' some of those UI conveniences really are. However, in places where they aren't truly necessary it's hard to beat the convenience and ease of a small Flask/SQLite/HTMX app, for me. But yeah, if that doesn't really fit your mental model then I don't see a huge reason to give it a try.. other than it IS fun!

naasking 2y ago

> but as far as I can tell, you're still writing those same templates, just using your backend language instead of JS. Yes. > Which is convenient, but hardly "less code" It is strictly less code because you're no longer validating on both client and server. It's also more than just "convenient", because it also forces you to stick to the well understood browser UX, ie. all state is URL-addressable.

scoofy 2y ago
I would rather write 1000 lines of Python than 100 lines of JS. Nothing wrong with JS, I'm just not fluent in it. Whereas, Python is my native programming language, and I can just see it without looking anything up. This is why I love HTMX. I just want basic web interaction without having to do it all in Javascript.