Let's make the worst Htmx (zserge.com)

Bravo! I never would have thought this would be so simple. As a direct consequence of this exercise: I now know something about what, precisely, htmx does.

cheers

Huh, so every interactive event has a network request in the loop, with perceptible latency? And you still end up obligating client-side JS for the plumbing? I'd been meaning to look into HTMX but based on the content of this post it seems like a worst-of-all-worlds technical solution. Is it at least pleasant to work with?

[flagged]

The Github link at the bottom contains a `,` char, might want to fix it.

We already have the naughtiest htmx

https://github.com/bigguysoftware/htmxxx

>Or you can just use htmx?

great idea thank you for the recommendation

Have a pretty large application running HTMX + WebComponents + Hono + Cloud Functions to serve up frontends, happy with it for about 2 years now

People throw salt at my stack but it’s fast, and straightforward to manage attack surface

[flagged]

I highly recommend everyone to give htmx or datastar a try, especially if your main experience is react or nextjs.

We recently rewrote a half-million LOC codebase from react to datastar, with a detour through htmx first, and the results are staggering.

First page load is 20KB down from a 750KB js bundle. 1 network request vs 40+. Total load time 0.1 seconds down from 2 seconds of spinners. Page refresh is so fast, the browser doesn’t even flash - there’s no massive js bundle to parse, so it can start rendering instantly.

But the most staggering result is that in-document navigation over SSE achieves up to 5000:1 compression ratio for network requests within the Brotli compression window. Yes, 5000:1, you read that right. When changing server state we rerender the entire page, like an immediate-mode game engine, and push it to the client over an SSE “fat morph”, in about 100 bytes.

It’s so fast and so much more stable, our users are literally having fun. With a medical device.

And this ends up ~50% less code to maintain for a VASTLY superior UIX.

You are really missing out if you don’t learn how this works. It can give you a significant competitive edge if you care enough to try.

Edit: Big BIG thanks to bigskysoftware and the datastar team for making the web a sane place again. You really deserve all the props.

They didnt mention the real side benefit of HTMX, and thats the twitter account memes.

Nice, I really like this series, this made me really understand those web frameworks much better as before. Thank you.

HTMX is amazing on paper, not in real life.

It loses things like scroll position and text highlighting on re-render - it’s not high performance like React.

This is for server sided or static web pages not building rich UI.

There is no robust state management or DOM performance improvements you get with React with larger components.

HTMX team should build a game with it. Load some 3D in WebGL/WebGPU, showcase high performance UI.

Or showcase complex state management.

I need more than syntax idealism.

I wrote a really tiny web app using Django and HTMX to do a find-as-you-type telephone directory, and it worked really well.

I wish I did more front-end stuff so I could play with it more.

I really want to try htmx but it specifically prohibits my most common usecases:

1) I want to take a JSON response, create HTML from it, and replace the target element with the generated HTML.

2) Similar to the above, take a JSON response, perform some action, and do nothing to the source element.

Is there a plugin to add this? I want to move away from jQuery, and having a small framework to wire up hooks would be useful.

   var user = getUser(id);

   return ToJson(user);

   var user = getUser(id);

   return View("som-user-template", user);

Part of the beauty of htmx is how simple it is to recreate. As this post shows, the fundamental concepts of htmx really are straightforward.

Of course, there are all sorts of edge cases and minor features to add to make it complete.