Moving from React to htmx
htmx.org
htmx.org
But as always it’s about choosing the right tool for the job. Server rendered pages/fragments solve so many issues around security and time to develop a product, however it only gets you so far.
Ultimately I think the decision when choosing a stack comes down to how much state you need to managed in browser. The vast majority of sites needs very little client side state management, htmx and other tools such as Alpine.js are perfect for this. But eventually as you reach a more “app like” experience with multiple layers of state control on the front end you need to reach for a front end JS framework.
Now that doesn’t always mean going all in on a full SPA covering the whole of your product. It could just be a small fragment that requires that level of interaction.
Point is, don’t pick a tool because it’s “in vogue”, pick one because it lets you build the best possible product as efficiently as possible. For 80% of websites that could be htmx, and for the next 15% htmx probably works for 90% of their pages. It’s the 5% where htmx is not one of the right choices at all.
My hope is that, with htmx, HTML/hypermedia is that right tool for more jobs.
I think that if you fully embrace HTMX's model, you can go far further than anticipated without a JS framework. Do you really need to be managing state on the client? Is it really faster to communicate via JSON, or protobuf, whatever, rather than atomic data and returning just small bits of replacement HTML -- inserted seamlessly that it's a better UI than many client-side components? Why have HTML elements react to changes in data or state, rather than just insert new HTML elements already updated with the new state?
I think you're describing a, let's do React in HTMX mindset, rather than let's go all in on the HTMX model. And I might be giving HTMX too much credit, but it has totally changed how I go about building web applications.
I’m currently working on a bio-informatics data modelling web app where htmx would not have been the right choice. But it’s in that 1-5% where that is the case. That’s kind of my point.
Outside of that project, I’m all in on the the HTMX model of server side rendered fragments.
I’m genuinely curious, because I never used JSF except for a single school exercise
The only unpleasant part is dependency management, but you have the same, or worse, with Python or Ruby, and neither Java nor Go are completely hassle-free either.
Salesforce (classic) is JSF.
It’s full of bugs and quirks. But it’s kind of nice in certain situations.
The big problem here is performance load on both client and server. State is sent back and forth and it that kan be huge, and needs to be deserializes, altered, and serialized back again every action. It also doesn’t reflect any http verbs. Everything is POST
The big site was technically running on JSF, but in such a way that it wasn’t JSF any more
Here's a little bit of trivia... The Visualforce framework (that customers can write interactive pages in, and a small minority of the standard UI is build in) is based on JSF, but most of Salesforce classic standard UI is written in a home-grown system that generates HTML described in imperative Java. It's more akin to an HTML generating Tk.
This explicitly only works with GETters and I can’t imagine how you can show async state with a tool like HTMX easily
However, this doesn’t solve the optimistic rendering situation at all. In general the approach of HTML over the wire clearly seems barred from solving that, you need a client layer for that
https://htmx.org/attributes/hx-swap-oob/
Also, there's nothing stopping you from writing a bit of JS to handle something htmx can't do.
For example, the initial GET could return two partials, one hidden by default until a user action triggers a JS swap while htmx performs the request and eventually replaces the div again along with any other out of band div(s).
There was demo that showed it normally takes ~100ms to click a mouse, and if you attach to the on-mouse-down, then by the time the mouse has been released (100ms later), you can have already fetched an updated rendered component from the server.
And while that's very cool, my second reaction is "is it ever acceptable to round-trip to the server to re-render a component that could have been updated fully-client side?" What happens when my internet (or the server) is slow, and it takes more than 100ms to fetch that data? Suddenly that's a really bad user-experience. In the general case this is a subjective question. I personally would rather wait longer for the site to load, but have a more responsive site once it did.
There's not a perfect solution to this, because in a complex site there are times that both the server and the client need to update the UI state. But having the source of truth for the UI located in a server miles away from the user is not a general-purpose solution.
(I'm not advocating for the status quo, either. I just wanted to bring up one concern of mine.)
I'm actually worried about developers in developing countries where mobile internet is the dominant way to access the Internet and GitHub is now the de facto way to participate in open source, that this is creating an invisible barrier to access.
example: https://github.com/pannous/hieros/wiki/%F0%93%83%80 this is admittedly a complicated markdown file, however it often fails on much simpler files.
You just described the entire point of client-side rendering as it was originally pitched. Computation on the server is expensive and mobile networks were slow and limited in terms of bandwidth (with oppressive overage charges) just a few years ago. Client-side rendering was a way to offload the rendering work to the users rather than doing it upfront for all users. It means slower render times for the user, in terms of browser performance, but fewer network calls and less work to do server-side.
In other words, we used to call them "Single Page Web Applications" because avoiding page refreshes was the point. Avoid network calls so as to not consume bandwidth and not make unnecessary demands of the server's limited computational resources.
Now things might be changing again. Mobile networks are fast and reliable. Most people I know have unlimited data now. And while computation is still one of the more expensive resources, it's come down in the sense that we can now pay for what we actually use. Before we were stuck on expensive bare metal servers and we could scale by adding a new one but we were likely overpaying because one wasn't enough and two was way overkill except for peak traffic bursts. So we really scrambled to do as much as we could with what we had. Today it might be starting to make sense to make more trips back to the server depending on your use case.
To address your concern about latency or outages, every application needs to be built according to its own requirements. When you say "there's not a perfect solution to this", I would say "there is no one size fits all solution." We are talking about a client / server model. If either the server or client fails then you have failed functionality. Even if you can get yourself out of doing a fetch, you're still not persisting anything during an outage. The measures that you take to try and mitigate that failure depend entirely on the application requirements. Some applications strive to work entirely offline as a core feature and they design themselves accordingly. Others can accept that if the user does not have access to the server then the application just can't work. Most fall somewhere in between, where you have limited functionality during a connection interruption.
There's nothing wrong with loading a page and then everything on that page loads data from the server and renders it.
Where the issues come in is that modern SPA claims loading a new page is unacceptable and that somehow doing so means you can't fetch data and render anymore.
It's just not true.
I wonder if the problem was really that the whole page was reloaded into the browser which caused a big "flash" because all of the page was-re-rendered. The problem maybe was not reloading the page from the server but re-rendering all of it. Whereas if you can load just parts of the page from the server the situation changes. It's ok if it takes some time for parts of the page to change because nothing gets "broken" while they are refreshing. Whereas if you reload the whole page everything is broken until all of it has been updated.
There were plenty of sites doing that in the mid 2000s.
I would try this approach out in a typechecked language, if I'm certain a native mobile app isn't going to be needed.
The difficulty with web-development is there are 3 different languages (HTML, CSS, JS) which all need to make some assumptions about what is coded in the other languages. The JavaScript refers to a DOM-element by id, it assumes some CSS which the JS can manipulate in a specific way.
The ideal goal much of the time has been: "Keep content separate from presentation, keep behavior separate from the content etc.". While this has been achieved in a superficial level by keeping CSS in a .css -file, content in a .html-file and behaviors in a .js -file, they are not really independent of each other at all. And how they depend on each other is not declared anywhere.
That means that to understand how a web-page works you must find, open and read 3 files.
Therefore rather than having 3 different types of files a better solution might be to have 3 files all of which contain HTML, CSS, and JS. In other words 3 smaller .htm files, each embedding also the CSS and JS needed.
You can guess how awful the user experience is.
The most common trajectory for react and other SPA framework apps is to also make this assumption, waving away the weight of libraries and front-end business logic with talk of how build tools are stripping out unused code so it must be light, while frequently skipping affordances for outright network failure that the browser handles transparently, oh and hey don't forget to load it all up with the analytics calls.
But maybe more crucially: what's the real difference between the overhead of generating / delivering markup vs JSON? They're both essentially data structure -> string serialization processes. JSON is situationally more compact but by a rough factor that places most components on the same order of magnitude.
And rendered markup is tautologically about the data necessary to render. Meanwhile JSON payloads may or may not have been audited for size. Or if they have, frequently by people who can't conceive of any other solution than graphql front-end libraries.
Whether you push html or json or freakin' xml over the wire is a red herring.
Heck, "nativeness" might be a red herring given frequent shortcomings in native apps themselves -- so many of them can't operate offline in spite of the fact that should be their strength because native devs ALSO assume client's internet is fast/on.
We can do code splitting, eager fetching js when page is idle, optimistic rendering when page is taking time etc. Unlike what a lot of people like to believe not every spa runs 20 megs of js on page load.
Also the initial load time being a few seconds and then the app being snappy and interactive is an acceptable compromise for a lot of apps (not everything is an ecommerce site).
When most fragments need to be server rendered it manifests as a general slowness throughout the interaction lifecycle that you can't do much about without adopting different paradigm. The hey-style service-worker based caching hits clear boundaries when the ui is not mostly read only and output of one step very closely depends on the previous interactions.
I joined a place working on larger rails+unpoly+stimulus app which started off as server rendered fragments with some js sprinkled in, but after two years had devolved into a spaghetti where to figure out any bug I'd typically need to hunt down what template was originally rendered, whether or not it was updated via unpoly, whether or not what unpoly swapped in used the same template as the original (often it was not), whether or not some js interacted with it before it was swapped, after it was swapped etc. .... all in all I felt like if you push this to use cases where lot of interactivity is needed on the client, it is better to opt for a framework that provides more structure and encapsulation on the client side.
I am sure good disciplined engineers will be able to build maintainable applications with these combinations, but in my experience incrementally optimizing a messy spa app is generally more straightforward than a server-rendered-client-enhanced mishmash. ymmv.
This is not a new take, it's exactly what every die-hard SPA dev says. While 20MB is an exaggeration, the average web page size has ballooned in the past decade from ~500KB in 2010 to around 4MB today. And the vast majority of those pages is just text, there is usually nothing really interactive in them that would require a client-side framework.
Others will say 2MB, 4MB is not that bad, but that just shows how far out of touch with the reality of mobile internet they are. Start measuring the actual download speeds your users are getting and you'll be terribly disappointed even in major urban centers.
If you replace most interactions that could be resolved client-side with a network transaction, you're betting on the client's internet being not just reasonably fast but also very stable. When I'm on the go, my internet is more likely to be fast than stable.
Yep. This is the major drawback of backend-dependent interactions. This is what scares me away from amazing technologies such as ASP.NET Core Blazor Server where I can code my frontend in C# instead of JavaScript.
If only Blazor Wasm wasn't so heavy. 4mb of runtime DLLs is a bit off-putting to any use but intranet LOB applications.
GP asks: "is it ever acceptable to round-trip to the server to re-render a component that could have been updated fully-client side?" This is a question that's oriented around what is generated on the server and pushed over the wire rather than the fact that there is a network call at all.
If the network is not stable, a typical 1st-load-heavy SPA-framework will make... a tenuous network call returning JSON with iffy chances of success instead of a tenuous network call returning an HTML fragment with iffy chances of success.
If react sites delivered on that promise, that would be compelling. However, while my previous laptop was no slouch, I could very often tell when a site was an SPA just in virtue of how sluggish it ran. Maybe it's possible to build performant websites targeting such slower (but not slow!) machines, but it seemed that sluggish was quite often the norm in practice.
I think what you're describing is a form of preloading content but it's not limited to React.
For example:
The baseline is: You click a link, a 100ms round trip happens and you show the result when the data arrives.
In htmx, Hotwire or React you could execute the baseline as is and everyone notices the 100ms round trip latency.
In React you could fetch the content on either mouse-down or mouse-over so that by the time the user releases the mouse it insta-loads.
But what's stopping you from implementing the same workflow with htmx or Hotwire? htmx or Hotwire could implement a "prefetch" feature too. In fact htmx already has it with https://htmx.org/extensions/preload/. I haven't used it personally but it describes your scenario. The API looks friendly too, it's one of those things where it feels like zero effort to use it.
Hotwire looks like it's still fleshing out the APIs for that, it has https://turbo.hotwired.dev/handbook/drive#preload-links-into... for pre-loading entire pages. There's also https://turbo.hotwired.dev/reference/frames#eager-loaded-fra... and https://turbo.hotwired.dev/reference/frames#lazy-loaded-fram... which aren't quite the same thing but given there's functionality to load things on specific events it'll probably only be a matter of time before there's something for preloading tiny snippets of content in a general way.
I developed it to scratch an itch I was having with alternatives (like Turbo) that despite being great are leveraging a class based design pattern (which I don't really like) and others which are similar were either doing too much or too little. Turbo (for example) fell short in the areas pertaining to prefetch capabilities and this is the one thing I really felt needed to be explored. The cool thing with SPX which I was able to achieve was the prefetching aspect and I was surprised no-one had ever really tried it or if they did the architecture around it seemed to be lacking or just conflicting to some degree.
A visitors intent is typically predictable (to an extent) and as such executing fetches over the wire and from here storing the response DOM string in a boring old object with UUID references is rather powerful. SPX does this really efficiently and fragment swaps are a really fast operation. Proximity prefetches are super cool but also equally as powerful are the intersection prefetches that can be used. If you are leveraging hover prefetches you can control the threshold (ie: prefetch triggers only after x time) and in situations where a prefetch is in transit the module is smart enough to reason with the queue and prioritise the most important request, abort any others allowing a visit to proceed un-interruped or blocking.
In addition to prefetching, the module provides various other helpful methods, event listeners and general utilities for interfacing with store. All functionality can be controlled via attribute annotation with extendability for doing things like hydrating a page with newer version that requires server side logic and from here executing targeted replacements of certain nodes that need changing.
Documentation is very much unfinished (I am still working on that aspect) the link in readme will send you to WIP docs but if you feel adventurous, hopefully it will be enough. The project is well typed, rather small (8kb gzip) and it is easy enough to navigate around in terms of exploring the source and how everything works.
Apologise for this novel. I suppose I get a little excited talking about the project.
In SPX every single page visit response (the HTML string) is maintained in local state. Revisits to an already visited page will not fire another request, instead the cache copy is used, similar to Turbo but with more fine grained control. In situations where one needs to update, a mild form of hydration can be achieved. So by default, there is only ever a single request made and carried out (typically) by leveraging the pre-fetch capabilities.
If I get some time in the next couple of weeks I'll finish up on the docs and examples. I'm curious to see how it compares to similar projects in the nexus. The hype I've noticed with HTMLX is pretty interesting to me considering the approach has been around for years.
Interestingly enough and AFAIK the founder of github Chris Wanstrath was the first person to introduce the ingenious technique to the web with his project "pjax" - to see the evolution come back around is wild.
Unpoly does this.
On the other hand, I have seen implementations of spa “pages” that move from a single fetch of html to multiple round trips of dependent API calls, ballooning latency.
{ "things": [
{ "id": 183,
"name": "The Thing",
"some date": "2016-01-01",
},
{ "id": 184,
"name": "The Other Thing",
"some date": "2021-04-19",
},
]}
<tbody>
<tr><td>183</td><td>The thing</td><td>2016-01-01</td></tr>
<tr><td>184</td><td>The other thing</td><td>2021-04-19</td></tr>
</tbody>
htmx doesn't aim to replace _all_ interactions with a roundtrip; in fact the author is developing hyperscript (https://hyperscript.org/) for all the little things happening purely client side.
But in any case even an SPA does round trips to get data stored on the server. The question becomes: is it better to make a backend spout json and then translate it, or make the backend spout HTML directly usable ?
But what's the big difference? Something somewhere must react to change. Either modify the DOM by client-side code, or modify/replace it by loading content-fragments from the server.
I would (perhaps naively) think that doing more on the client is faster than both re-rendering on the server and reloading from the server. Maybe it's just that React is too big and complicated and therefore slow.
It’s always trade offs and that’s fine.
What I find interesting/ frustrating is every framework or option likes to sell you on some numbers that are very nice but so specific they’re not the big picture. And/or talk about how they are different / better than another framework that I might not even be familiar with.
Technical pages now have their own confusing sort of developer marketing.
Navigating the risks around the NPM supply chain is another story, but I suspect it will be solved by large / popular frameworks gradually pruning their own dependency trees resulting from downstream pressure in the form of pull requests.
How so? You're now dealing with two applications (or two parts of an application) that need to understand and access authentication as defined by "the app"
If the same codebase handles auth across the board it's much simpler and more reliable.
Good APIs look like simple functions; they take certain very structured inputs (path, query params, headers, body) and produce a simple structured output (usually a json blob). They're usually well defined, limited in scope, often idempotent, and easy to write automated tests for.
HTML endpoints are more complex because they generally combine many different functions at once, rely on server side state like sessions, and generate large quantities of unstructured input. They tend to be hard to test exhaustively and it can be hard to reason about all the possible edge cases.
Security is hard, especially when most developers are ignorant or negligent about basic best practices. If I had a nickel for every website I've found that only has client-side validation I'd be rich.
The question then is whether the API is more part of the frontend or the backend.
If your backends are relatively easy and small, I think you should try to keep your APIs in that space and e.g. return JSON from a simple REST API with endpoint-level security.
On the other hand, if an API threatens to bloat and complicate your backend, use an API framework like Postgraphile or Hasura that gives you the tools to build powerful and secure APIs by writing some simple code or even no code at all.
An application can be very imperfectly thought of as having two bodies of logic, frontend logic and backend logic. In an SPA, if you secure the backend logic you are safe no matter what mistakes are made in the frontend. When rendering server-side HTML, the frontend logic and backend logic both run in a privileged security context. The attack surface area is larger.
If. The problem I've observed is that people treat the backend as a dumb pipe for data and focus entirely on the frontend.
> When rendering server-side HTML, the frontend logic and backend logic both run in a privileged security context.
This isn't necessarily a bad thing. Business logic happening in a protected and opaque context means it isn't exposed and easy to reverse engineer or manipulate. An extremely common vulnerability on SPAs is "get a list of all the $STUFF user is allowed to see from endpoint A, then get all the $STUFF from endpoint B and filter out all the results they shouldn't see" because everything is still visible to the client; that exact same (suboptimal) logic is inherently more secure on the server. Another common one being "are we logged in or should we redirect?" Conversely, rendering content on the server makes it a lot easier to prevent certain vulnerabilities like CSRF.
That's not to say that I think SPAs are bad and AJAX is good, I just find the argument that SPAs are more secure if you secure the backend dubious. A SPA with an insecure backend can be just as insecure as a backend rendering HTML because the weak-point is the backend itself.
Edit: You could perhaps argue that SPAs are indirectly better from a security perspectiv because text serialization is safer than binary serialization. Though any serialization is still a potential weakness.
The default today to make an API is because we assume it'll have multiple frontends or because we want to make it easier to change frontends. That does not make it more secure; it's just a trade off we, as an industry, have made to deal with the reality of delivering apps/services to users.
If users type passwords, sensitive data, anything into the frontend then any javascript, plugins etc pulled in by that page is an attack vector.
When your website is the actual complex application SPA makes very much sense and is actually less complex. And no you do not have to download all of it into a browser. Load parts replacing some inner html with the other and scripts on on need basis. Works like a charm. I am using couple of JS libs but no framework and there is no need to "build".
As for security - JS app talks to my own C++ backend using some JSON based RPC so I just have to validate the API only which is way less work as well.
With an SPA, you'll be building an API (perhaps a 'REST' one, or GraphQL) to expose all the data required, such as customer name, email, etc, as well as the extra 'total orders' field iff they have the manager role. Now you need to make sure that either (a) that endpoint properly excludes that 'total orders' field if they lack the permission, or (b) you have a separate endpoint for fetching those kind of stats and lock that behind the role, or (c) (I hope not) you just fetch all orders then count them up! Now, having properly secured your API so that all and only the right users can get that data, you have extra logic in your front end such as 'if has role manager then show this column too'.
With a server side rendered page, you don't have to do the API security bit. You can just fetch all the data you like (often via a single SQL query), and then replicate the same extra logic of 'if has role manager then show this column too'. You've skipped the whole "make sure the API is secure" step.
Now suppose you want to add a dashboard for every admin user, not just managers, showing total orders system wide. Did you include that in your API already? Now you're likely going to need a new endpoint that allows any such user to fetch total system orders, while managers are still the only ones who can fetch per customer order totals. Having found a place to add that to your API, you can render it. With the server side page, there's no extra work to keep this secure. The dashboard is already restricted to the users who can see it, so just add the extra query to fetch total orders and display it.
In short, there's a whole layer that an SPA needs to secure for which there is no analogue with a server side rendered site. In an SPA you secure the API and then have the logic for what to show to whom. For the server side rendered site, you just have the logic for what to show to whom and that gives you the security for free.
However, this doesn't help much when the restricted data is on a separate endpoint, since the app needs to decide whether to make the request in the first place.
Tbh, I’d prefer a runtime which would be itself aware of such metadata, knew the role out of a request/session context and could build a ui table based on all-columns-ever template, from a query automatically built for this specific case, because querying and throwing away totals may be expensive. This manual “do here, do there” is a sign of a poor platform (not that we have a better one) and code-driven rather than data-driven access control in it. Painting walls and installing doors every time you want a meeting should not be a part of a business logic, regardless of which-end and its implications.
I'm not sure about its performance, as I haven't done a great deal of testing, but another tool to achieve some of what you suggest (assuming I've understood you) is using RLS. E.g., using the obvious query, and relying on RLS rules to return only permitted data. You can similarly send the appropriate role with the query [1].
I also note with interest that Postgres 15 includes some improvements that might make this kind of approach even more viable:
"PostgreSQL 15 lets users create views that query data using the permissions of the caller, not the view creator. This option, called security_invoker, adds an additional layer of protection to ensure that view callers have the correct permissions for working with the underlying data."
I've been doing some hobby experimenting with doing this in a more generic way using Postgres RLS and putting a lot of that permissions checks into the database. That way, if I used PostgREST or my own solution for a mobile app API, the security rules should apply just the same to the API as they do to the website.
The front-end can pass a user role with every request and render whatever the backend sends it into a table.
For the server-side rendered page, what seems to me is you are running same query for normal users and managers, which is fine too, but removing that num_orders column.
Ultimately in both cases, the access control logic happens on the server, and frontend don't have complicated access control logic anyway. My point is, with SPA also we can get the same server-side benefits, atleast in this case. Or am I missing something?
> It’s the 5% where htmx is not one of the right choices at all.
I think even 5% is an over-statement. In my Top 100 site visit per month, the only three site that were SPA are Gmail, Feedly and Youtube. And I dont see how any of these three couldn't be done in HTMX. The Web Apps, if we call it that, that actually requires heavy JS usage are Google Work, Sheets, Google Map and Google Earth, and possibly some other productivity tools like Figma.
1. SoC: the server API needs to return only the data and meta data requested, and it should not be concerned with the display-layer (html), because many different clients i.e. mobile app, browser, Electron etc. might want to consume this API.
2. Logistics & scaling: Imagine a large application with 100s of html/htmx components and views, now you alter your database, you introduce new business rules etc... If you used React or Alpinejs etc. you could just go to the relevant stores or app code and make the change as opposed to sifting and refactoring tons of html.
Personally I'd rather just use Alpinejs from the start, knowing its lightweight, fast and easy to implement, and not end up painting myself into a corner over the application lifecycle.
2. many large applications use htmx (or related approaches like hotwire, unpoly, etc.) and scale fine. hypermedia is better at handling databaase/logic/API changes than fixed-format data APIs because your API is encoded within hypermedia responses: https://htmx.org/essays/hateoas/
I do not agree with HATEOAS, so now you have an API which job is to produce html (SoC problem), and what if a Flutter app also needs to consume this API, do you build another HATEOS API just for Flutter?
Every few years its the same, devs adopting and defending the new shiny thing, though I have to admit, I love that this time its a way more simplified, sane alternative.
Give it time and mull it over. It may grow on you.
Unfortunately I think the author has passed away, but it would be interesting to see it rekindled and used for baseline comparisons like these.
- it is designed to be embedded directly in HTML
- it can listen for any event (unlike on* attributes)
- it has native support for CSS selectors: https://hyperscript.org/docs/#dom-literals
- it has async-transparency: https://hyperscript.org/docs/#async
- subjectively, it is easier to read than JavaScript, particularly for the short, light scripts it is designed for (toggling a class, etc.): `on click toggle .clicked on me`
hyperscript is more of a glue language than something I would recommend building an entire application out of (although people are doing that!)
- State management - hooks are awful for anything complex
- Packaging + Bundling - Webpack kitchen sink, JS/TS, browser vs node vs random runtimes, packaging vs bundling, etc
- Data/API binding - Adds distributed state to your data and the complexity that goes with that (cross dom reuse, caching, staleness, realtime updates, etc)
- SEO/Prehydrating - Mostly applies to landing/CRM/blog type things.
These 'old school' solutions help you avoid some of these issues in favor of relocating the complexity a bit (those templates in the talk are absolutely gnarly and I'm sure very bug prone) and reducing the experience. Also the API boundaries are blurred should you ever need one for non UI usage. Ignoring HackerNews taste for simpler websites, some complexity of UIs can and should only be captured with client sided javascript.
With that said, after a few years of things shifting around I'm really happy with the Typescript (lang) + Parcel (packaging) + MobX (state management) + Vercel (when server side rendering is needed). They've been really stable, no fuss, always work. Especially MobX for state, absolutely game changing for the dev experience.
As for the data binding problem, still sucks and my 4th attempt at solving it internally is still meh. This feels like it comes with the territory.
As much as I loved my working with Django/Jinja2/etc, I think theres a light at the end of this tunnel.
The data syncs perfectly, keeps up-to-date. GraphQL subscriptions allow for real time updates. Oh, and React-Hook-Form for forms, which feeds quite nicely into my GraphQL mutations. It's a real neat solution.
As for server side, I've started using Python-Strawberry (was using Graphene but it stopped receiving updates) with Django.
It's super solid stack, with typings flowing all the way from server API through to my react components.
[1] https://unpkg.com/browse/htmx.org@1.8.2/dist/
[2] https://unpkg.com/browse/preact@10.11.2/dist/
[3] https://preactjs.com/guide/v10/getting-started#no-build-tool...
The linked article is referring to a team switching from React to htmx though, so for them I'd imagine it would've been a much easier transition if they'd just added a Webpack alias[1] that replaced React with preact/compat, rather than switching to a completely different UI paradigm.
[1] https://preactjs.com/guide/v10/getting-started#aliasing-in-w...
If you are doing the SPA thing correctly you must duplicate business logic (data validation). Also when your API just sends "dumb data" (JSON) to the client, you are forced to make changes to the backend and frontend in lockstep.
SPAs were a workaround to slow CPU servers serving millions of requests in the mind-2000s. Client computers were faster, so it made sense to push UX logic there.
We've flipped things around. Servers are fast as hell for rendering HTMl. We can leverage that and re-focus the client on UI code that only it can do.
That and the panacea of being able to run same javascript on server and client.
I've often seen this meme repeated in debates that js frameworks require you to duplicate logic between the server and client, but most of the logic isn't being duplicated between the client and server, it's being moved from the server to the client. It's relocation, not duplication. Instead of your rails/django controllers deciding what html to render, that decision happens on the client. In this model your server is mostly just an authorization layer, and an interface between the user and the database. Hasura, Firebase, Firestore, Mongodb Realm, and several other products have been successfully built around this premise. You might not like the thick-client thin-server model, which is completely fine, but it's a somewhat subjective preference. The only objective criteria you might use to decide which approach to use is performance.
Move to a JS backend and now every dev on the team can write client and server side code?
Switching to JS would require a full backend rewrite. The backend devs may not do well with the switch, so they may have let go two developers and needed to hire a new JS dev. The presenter may have been let go with that approach, clearly not ideal for the person driving the project.
You'd also need to address the perf issues. htmx clearly sped things up. Is the alternative JS SSR?
Since you are using hypermedia & HTML for your server interactions, you don't feel that pressure to adopt javascript on the backend that a huge javascript front end produces. You can still use javascript, of course, (perhaps in the form of alpine.js) but you use it in the manner it was originally intended: as a light, front end scripting language for enhancing your application. Or, if you are brave, perhaps you can try hyperscript for these needs.
This is a world we would prefer to live in: many programming language options, each with their own strengths, technical cultures and thriving communities, all able to participate in the web development world through the magic of more powerful hypermedia, rather than a monolith of SPAs-talking-to-Node-in-JSON.
Diversity, after all, is our strength."
Client side validation doesn't prevent a malicious user from sending invalid requests, but it can prevent legitimate users from sending invalid data to your server accidentally. In fact, if I see validation failures showing up in my server logs for something I know should have been filtered out via client side validation, I can mark that ip address as being potentially malicious and rate-limit their future requests.
And as a user I would rather find out about validation issues immediately instead of waiting for a network round trip to the server. If I'm typing in a password for example and it doesn't meet the website's length/complexity requirements, I'd rather know as I'm typing instead of waiting for an HTTP request to complete. That extra HTTP request is wasting the user's bandwidth and the server's resources.
IMHO something slightly more complex than this example (more client side stat) will require using something like React/Vue/Svelte. But there's no need to rewrite the whole FE. Just create a component that performs the rich client side interaction and use HTMX for the rest of your app. Win-Win.
So back to ASP.NET WebForms update panels?
I wanted basic SSR and things like that. Preact has a library called preact-cli for this. The last commit is from Aug 17.
I ended up with SvelteKit. It just felt much more alive. I don't love learning a new technology just for a landing page, but that was kinda fun.
[1] https://github.com/vercel/next.js/tree/canary/examples/using...
I don’t understand - are you saying you think a project whose most recent commit was Aug 17, 2022 is not alive?
Bundle size is 1 problem of JS-heavy SPAs but the post goes into many other drawbacks not addressed by something like Preact.
It's a pretty short post, but a lot of it boils down to the fact that the team is using a single language throughout the whole stack (Python), which allows everyone on the team to be a full stack developer. Like I said, if you're against writing js then htmx is probably a better solution for your team.
If you want to build a client using HTML, then targeting the browser is exactly the right choice.
Javascript-heavy SPAs are much closer to traditional native apps - and lose some of the benefits of running on the web/ in the browser as a result.
There's a lot more reason to consider native app if you are building an SPA than if you are building an MPA/SSR app.
I'm less convinced about Javascript SPAs. Perhaps the biggest advantage is that you don’t have to "install" these apps. The browser just downloads the source and runs it automatically in a (somewhat) sand-boxed environment. Also, they work on "most" systems (though mobile vs. desktop is still a thing).
To me it's bonkers that all web sites seem to be moving towards SPA when they don't benefit from it at all and require so much frontend work when a little bit of simple HTML and Javascript could do most of the work. It feels like the whole industry is Reactifying everything because they're scared that if they don't they won't look professional.
React doesn't only work for SPA.
https://docs.astro.build/en/concepts/islands/
Combined with Preact instead React I think it allows for server content first, and sprinkling in interactive components as needed without much extra page size.
At the end of the day a good component based js framework makes it a lot easier to implement a lot of things client side.
Your CTO, PM, frontend dev and DevOps people likely all have React experience under their belt. So it isn't surprising if React ends up becoming the framework of choice, simply because it will likely be faster to start with.
"When all you have is a hammer, everything looks like a nail" is the problem. Another new library / framework will not solve this.
Frontend dev should go for the bare minimum when designing web sites, only introduce libraries as they're needed -- and really think about whether they're really needed or not. They need to ask some questions like:
- Maybe you can roll your own specialized solution that'll be smaller and faster than a general solution? - Does the thing you're working on need to be an SPA or does a good old multi-page web site be enough for your use case? - If you need parts of your website to be interactive, can you only update that part (the "islands" approach) by hand instead of introducing a dependency to do that?
There is a lot of complexity going on in our field right now and not enough people seem to care about that. The complexity is needlessly inflating our application / web page sizes and reducing performance.
I've used rails+turbolinks and included Vue or Stimulus or even jQuery to get on page interactivity done.
The current state of the react / jam world strikes me as an HR led solution where you can get humans who only know JS to be more productive without having to worry about servers, databases or infrastructure.
I definitely believe in fewer LOC with any not-react due to all the hooks, memo, etc. boilerplate though!
While I'm sure there were a few places where better decisions were made, I think it's reasonable to assume that the majority of the reduction in code is due to the different approach to front end development.
Like the results cited here, we too are extremely pleased that the majority of our coding now falls into our preferred language - Clojure (using Hiccup). Very pleasant experience!
You can write excellent, lightweight React apps by simply writing semantic HTML and taking advantage of the platform (declarative form validations, a simple CSS pipeline, etc). It doesn’t have to be madness in the front-end.
NextJS, in particular, keeps the build pipeline quite simple.
Your other option would be to do something like 37 Signals and render web with htmx (or in their case Hotwire) and server-render mobile too, but wrap the web views with a thin native mobile navigation layer to make it feel more native.
Very jealous if your project is web-only - this can work wonderfully and be incredibly efficient! I've been thinking about this a lot recently and also just blogged about it (https://nikodunk.com/2022-05-10-the-tech-stack-for-maximum-e...).
If you don't want to deep dive on htmx-as-a-tool due to burn out, I completely understand. But, at some point, it might make sense to read up on the philosophy behind it (hypermedia as an archiecture) because that is an area where it is different than most front end frameworks today.
I have a collection of essays here:
2006 tech in frontend = COBOL level stuff
What works for me: don't waste time with frameworks.
The web standards are simple to learn and are also wonderfully not opinionated.
I’ve landed on Svelte+Typescript lately, and It’s Really Doing It For Me (tm). I think the trick is to find a framework or library that gets you, and just run with it.
a good example is lazy loading:
https://htmx.org/examples/lazy-load/
two plain HTML attributes that give you a nice tool for deferring expensive calculations so that users can get to interactive more quickly with the rest of the page
Once I stopped chasing the outer edge of what everyone else was trying to solve, and instead focused on the problem directly in front of me, the anxiety of being on the technical treadmill went away. When I have a problem to solve, I research it. As the outer edges get figured out, they start forming boring tech. I try to keep things boring when doing research - and avoid running up the treadmill unless necessary.
I'm not one to always chase the new shiny, but that's interesting enough to explore & I think does bring commercial value.
Last note: HTMX really feels much more like 2006-style web tech in philosophy which is a refreshing counter to all the current js complexity.
Whatever led to you posting that you don't care about this rather than just not even noticing it like all the new things you see every single day that don't even penetrate your consciousness. Find and kill that.
Pointed my attention on how my mind anthromorphizes hacker news comments and perceived it as an amorphous invisible ultra smart conversation partner.
I wish I could have a meat space equivalent for that but given the amount of possible topics it’s hard to imagine a human equivalent.
It can be simpler, but it can get out of hand just as easily as any front end framework.
I'm suggesting getting out of the browser all together and writing a native client. Before Evernote moved to Electron, it's what they did. Their Windows client was written in C++ and their Mac client was Objective C.
The solution to the Paradox of Choice is to opt out. Human minds aren't soul-stuff magic - they're evolved systems whose history hasn't equipped them to deal fluently with unlimited choices. That's just physical reality, so we need to comport with it, not with the blandishments of the virtual business/tech world.
In many domains of contemporary life, one way to be free (and reduce anxiety) is to use volitional attention to restrict the range of choices we're presented with.
I was hesitant to switch to Hooks, or Context. I only studied them when I was preparing for a new job and interviews for it.
I still feel queasy when I encounter obscure Typescript features (e.g. Omit/Pick, Generic Type Templates <T>) used in a codebase. Frontend simply does not need this much complexity....But I just google and find out. I don't personally go out of my way to bring new features into my codebases. Perhaps, only time they become unavoidable is when you're interfacing with a library or building a library to be interfaced.
I have done seriously complex computer vision stuff, 3D game development, embedded electronics. I have seen complex code where it had to be. People make frontend development more complicated than it needs to be most of the time. They just end up plastering everything with newest/coolest tech.
The memory usage saving is really not a big deal, load up your favourite news web page and look at the memory it chews up in comparison.
As for the preference implied for python over js, that's fine, but the choice is not binary, typescript is my preference for a React project, for example.
Reduction in LOC is slightly misleading, JSX creates a lot of lines.
It would be interesting to see a proper write up on the data React couldn't handle.
And to be honest 21K LOC is not a big project. I can imagine that as project grows even larger, there will be problems that htmx cannot or is difficult to handle, and I'll be curious about how that would work out.
At least in some sense?
The contract of the web is that while the client-side language in use may not be up to the discretion of the developer (recent evolutions in WASM notwithstanding), the server-side language/framework/OS/etc. can be literally anything which speaks the protocol of HTTP/HTML/etc. JS frameworks for years have repeatedly broken that contract with the claim that we must accept it for…well, "reasons". If it turns out most of those reasons are bupkis—more a matter of preferences than requirements—then we must stop breaking the contract. JS as a server-side language should _get in line_ alongside all the other languages out there.
Why privilege it if we don't need to?
This is being too reductive of the design of Remix. It is closer to traditional web applications in handling form submissions. There's no client-side state management needed for those use cases.
Whether it's the "winner" or not, really depends on use case, but it is decently different than a traditional SPA.
That said, using React on the server side and forcing you to run JS on the server is not my cup of tea...
Not every situation has high latency, but it's worth asking what happens when moving from React to Htmx in those situations.
Angular and react slowed down development massively.
Nowadays teams are often busy fixing random stuff for days
I'm convinced 90% of the stuff we build out there should be built this way. It's so much easier and there's tht nice feeling about not being standing on tons and tons of overengineered tech. The last 10% on which I'd use react or similar are offline first apps or things such as figma, etc.
Is it really, though?
It's a paginated list of emails, some drag-and-drop functionality, buttons for some ajax functionality.
It works reasonably well, but it doesn't need to be so high Javascript compared to Google Docs or maps.
My question was where is the favorites (and facet) state stored. Is it in "html inputs", in which case, I suppose they are included in the requests somehow later? (perhaps via `hx-include`). The answer could also be that e.g. favorites are permanently stored on the backend...
Additionally I was also wondering what htmx can do in more complex cases, like e.g. a "sort direction" button, where you need to set the sort column(s) and direction(s) of columns. It feels like its really easy to exit the htmx comfort zone, after which you have to resort to things like jquery (which is a nightmare). Or perhaps web-components, which would actually be a nice combination...
As you anticipated, favorites are stored in a database on server-side, so that makes "show me my favorite items" or "show me items related to my favorite articles" the exact same feature as selecting an option in a facet filter.
The state of "I have selected options 1 and 2 in this facet filter, and option B in that other filter" is simply stored in... the URL. And this is why I think it's "application state" rather than "client-side state", and this is why the hypermedia is great IMO: this whole search+facets+favorites+sorting feature becomes nothing more than a <form> with hidden inputs, generating GET requests which URLs are put in the browser history (keywords search, selected options from facet filters and sorting are put into querystring parameters). And that's great, because it happens that one of our features is to send our users custom e-mails with deep links to this the UI, with facet filters pre-selected. All we have to do is generate links with querystring parameters pre-configured, and the user directly gets to a screen with pre-selected facet options, sorting, etc. To me, such behavior cannot be called "client-side state management".
IMO this video reinforces the idea that for personally simple stuff I'd rather just use jQuery (or rather CashJS) or even vanilla.
Though I don't know why you'd bother with jQuery these days unless you had to deal with ancient browsers: venerable as it is, it's obsoleted itself as just about everything it did is now covered by browser APIs.
I've never understood that argument. You could always do what jQuery does with vanilla JS. How could it be otherwise?
The point of jQuery is productivity. Even today, a jQuery-style API saves you from writing a lot of code.
Also many APIs simply didn’t exist(e.g. querySelector).
Now that browsers are much mor standards compliant and there are much better APIs it feels like the rationale for jQuery has shrunken to pretty much zero
The only argument for continuing to use it is that you're used to it and not used to the modern APIs that have absorbed jQuery's functionality. It's just a slower way of doing the same thing.
Note: while the htmx homepage is short, I spent about 30 seconds reading/thinking about each "motivation" bullet point, and my monkey brain is very content jumping to conclusions about the project at a much faster pace, :).
The majority of these apps are about placing the existing product into the App Store for discoverability, and encouraging users to be “locked” into the app at the expense of a worse customer experience.
A web app, in a browser, automatically has support for opening multiple pages as multiple tabs, bookmarks, sharing pages. You can’t do that with 99.9% of apps.
I will also argue strongly that, again, react native is unnecessary even if you do want to package a native app. WebView based apps perform as well as a react native app, and most of the time with significantly less additional code. It also forces you to up your “mobile website” UX. In general the minuet you build a mobile “app” the mobile web experience gets neglected.
To serve html to htmx sites closer to the caller/user, a developer can run the backend on something like https://controlplane.com (disclosure - I run Control Plane) where a request from Australia is served from Sydney and a request from New York is served from aws-us-east-2 for example.
In short, htmx looks great because of the simplicity. I am sure it will be used by a lot of developers. Nice work!
You're still going to be able to take advantage of those client machines to do rendering, but the difference is that with HTMX, you skip serialising JSON, so your clients aren't stuck doing unnecessary rendering. The load on the server is barely different, but the client has less to do.
Now, if you're doing an awful lot of data manipulation on the client, that's a different story.
Yes, rendering HTML on server-side increases server load, for the simple reason that the server-side templates contain some display logic. But:
- Most SPAs I've seen generate useless server load: either by fetching too much information, or by fetching information too often. And that's not because SPAs are a bad idea per se, it's because many small companies have very small teams, and very small teams just don't have time to build a custom-tailored API ("backend-for-frontend"). We chose jsonapi with Django-Rest-Framework, which was crazy-easy to implement from the back-end perspective (as we had many other challenges), but which made the front-end developer implement twisted stuff on client-side, like prefetch-on-hover, or plugging react-query with crazy refresh settings generating hundreds of API calls when only 2 or 3 would have been enough. At the end of the day our servers load is not higher now. Each request costs a little bit more, but there are a lot less of them.
- Another thing is: the idea of delegating template processing to the client may seem good from a wallet perspective. But if you also think of the environmental impact of what we do as developers, you might notice that many people get a new laptop on a regular basis just because some applications are more and more CPU and memory greedy. And when you think that about 80% of environmental impact of the digital industry is generated by building and shipping new terminals, it might make you realize that being part of the solution implied reducing the amount of client load you ask your users. And yes, this implies that your company accepts to reduce gross margin to take a very small action in the battle for a cleaner industry.
10/10 times is just them openly bashing the rest of us for not using their tech.
This technology is not great for complex GUI. You can downvote even more now.
Technically you're not missing anything: htmx is nothing more than another turbolinks, maybe more flexible and easier to learn.
What you might be missing is the non-technical implications of these new tools. The idea behind the talk (and behind htmx, and behind turbolinks, or unpoly) is to prove that the usual arguments for Javascript application frameworks are just not valid for 90% of use cases. And *that's* a complete game-changer, even an industry-changer.
Because since 2016, every small-and-not-super-rich company that wants to create a rich UX on the web is told to hire at least 2 developers: one "front-end" (i.e. "JS"), and one "backend-end" (i.e. everything else, from API to hosting through domain stuff and user data). Or one superman with both back-end and React skills, which is, IMO, almost impossible.
From what I've seen, what businesses need is, indeed, 2 devs: one "back-end" (i.e. workers, databases, user data, domain stuff, and even hosting), and one "front-end" (i.e. "the website", from DB queries to CSS). One person should be enough to address this second scope, even with complex UIs and rich UX. And as this is almost impossible with Javascript application frameworks (because they require a lot of work), it becomes possible again, like in 2008, with htmx/hotwired/unpoly (and without the spaghetti code we had in 2008).
One more thing: of course the idea was *never* to do JS-bashing, only people who are too tied to Javascript and not caring about tech cost-effectiveness would see htmx as a thing for JS-haters. In my talk I actually show some Javascript code, because it's useful for handling client-side-only stuff like a custom dropdown, a modal, etc. The whole idea is to put Javascript back at its place: pure client-side advanced interactions.
I would look at writing either a custom solution or one of the big reactive libraries like vue.js for something like this.
I use 'Rails 6.x and datatables.net.
The system manages call-logs for a call centre with WFH staff. It's doing thousands of calls a day.
The tables are 'endless' pagination reporting tables.
It's hosted in Sydney, AU. And used by staff around the world. It has the advantage of being extremely robust on the dodgiest of old PCs with poor internet connections.
So not fashionable, but it's super reliable and has a well documented implementation path!
The point seems to have been to show how you don't need to use React to build applications like this, so migrating to NextJS wouldn't have made any sense from that perspective.
I think that you should learn JavaScript, and I certainly think you should learn HTML(!!!) and CSS. But I also think you should consider how much more can be achieved in a pure hypermedia model with the (relatively small) extensions to HTML that htmx gives you.
I have a collection of essays on this topic here:
Including an essay on how I feel scripting should be done in Hypermedia Driven Application:
https://htmx.org/essays/hypermedia-driven-applications/
There is more to all this than simply avoiding JavaScript.
Regardless of that, the idea that you learn htmx because don't want you to learn JavaScript is simply incorrect.
Rather, it's how you use JavaScript that should be considered.
One of the bullet points was "They reduced their total JS dependencies by 96% (255 to 9)". That's an enormous support burden that simply vaporized.
My virtualenv has close to a hundred deps. Tried packaging anything in Python lately? How about type checking? It's the same everywhere, the grass just looks patchier when it's not a park you're used to going to.
There are over seven billion people on this planet, convergence of opinion is the exception.
I'd be surprised if my Django virtualenv has ever had more than 20 dependencies.
- Took 2 months (21K LoC, mostly JavaScript)
- No reduction in user experience
- Reduced LoC by 67% (21,500 LoC to 7200 LoC)
- They increased python by 140% (500 LoC to 1200 LoC), good if you prefer python to JS
- Reduced JS dependencies by 96% (255 to 9)
- Reduced web build time by 88% (40s to 5)
- First load time-to-interactive was reduced by 50-60% (from 2-6 seconds to 1-2 seconds)
- Much larger data sets were possible than react could handle
- Memory usage was reduced by 46% (75MB to 45MB)
These are spectacular numbers that reflect that the application in question is highly amenable to the hypermedia approach.
I wouldn't expect everyone to see this level of improvement, but at least some web apps would.
I also am glad to see that everyone on the dev team became full stack developers, because I think the back-end/front-end split is often detrimental to development velocity. It's often better when a developer can fully realize an entire feature, with no front-end/back-end friction.
It's like seeing people breaking rocks with hand tools being impressed with a bigger mallet.
I used to aim for 15 millisecond cold load times, which is apparently unheard of these days even for front pages with entirely static content.
50 ms to anyone in the same country, ideally lower.
Global reach is a different problem because of physics.
However, front pages of web pages tend to be largely static and can be staged in various geo-distributed regions. In other words, distributed via a CDN..
> even static pages on a CDN end up taking 400ms to connect and download.
Only if you stuff them full of megabytes of Javascript and pull down megabytes of JSON in order to display that static content.
The fact that my comment -- a factual statement about real-world performance I've achieved regularly -- is voted down and your off-by-an-order-of-magnitude reply is voted up speaks volumes about the state of the industry.
It's like a bunch of fat people being flabbergasted about the mere concept of mountain climbing. With what... your legs!? Up there!? Madness!
If you’re testing local network times, you’re just fooling yourself. None of your visitors are seeing that time, so it’s irrelevant.
What’s your URL? I’d love to throw it into webpagetest.org and take a look.
Unfortunately, for myself I can't even get a ping response from the ISP upstream router in 15ms, let alone a static page over HTTPS.
None of my internet connections has sufficiently low latency - neither home nor office.
HN takes 400-600ms to load, but that's understandable due to physics. Wrong country.
I just loaded news.bbc.co.uk, which is in my country and is also well connected, and saw that DNS resolution took up to 400ms, and TLS setup took up to 650ms (though not both at the same time in a single request). Total page load time was about 2s.
Those numbers seem unnecessarily high on this connection. But 15ms is too optimistic: the network latency isn't low enough, even for a small static page.
There are a lot of people in a similar situation, living with connection latencies you would consider high, but it's all we can get.
I find this one difficult to believe. I'm not calling BS necessarily, but I doubt it applies in the general case.
I have a Django app that's server-side rendered, the largest page is very large (~200kb of content). Django on a low-tier VPS took about 500ms just to render that page. Django templates aren't faster than React. And Python isn't faster than JS.
If they're seeing performance increases I'd guess it's either that they're being more judicious about their queries (pulling only what they need from the database instead of filtering client-side), or the React app had a lot of complexity and they simplified the UI when re-writing.
Historically, server-rendered React has been painfully slow compared to Django (I’ve been doing SSR with React since 2014, using Django since 2006, experienced the pain first hand multiple times). Usually at least an order of magnitude slower. That said, I haven’t benchmarked in a while, perhaps the worst of it has since been addressed.
With that in mind, consider the following bit of HTML:
<button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML"
>
Click Me!
</button>
If you are a Python team, sure, avoiding JS is a good idea and tools like htmx which let you pretend you're not working in multiple languages while having to memorize a massive API implemented in DSLs bolted onto DOM elements are fine. I've worked with these kinds of libraries in the past and once you can get over the knowledge gap, they can be amazing 80% solutions and solve most of your problems.
If you are either a "full-stack" JS (i.e. server + client written in JS) team or have more than one person specifically working on the frontend, this can just as likely be a massive footgun because you're trading a widely used, well-understood tool with a massive community for a somewhat niche one with a much smaller (but hopefully more dedicated and helpful) community.
Sorry if my assessment of htmx comes across as sarcastic but TINSTAAFL and my criticism would equally apply if the talk was about moving from Angular or Vue. If having to write JS is a drain on your team's resources and you can't change that, yes, try moving away from JS even if it means going down a less travelled path.
EDIT: To be clear: one of the early selling points of React was "it's just JavaScript", referring to how most comparable tools would require you to learn their DSLs to do basic things like a loop. React allowing you to actually use a JavaScript `forEach` or build an array in your render function instead of having a `data-react-foreach` attribute or something like that on an element was a breath of fresh air as tools like AngularJS or Knockout required you to use those and were extremely inflexible because of it (e.g. if they wanted to support filtering they'd have to bake it into the DSL whereas in React you could just do an `if` or `.filter`).
There are a number of essays here on this difference and the ramifications of it here:
There are fewer "essays" on that page than "memes" which just seem to exist to ridicule frontend frameworks or smear JS in general (which is ironic given that JS itself is a "twenty years old technology", which at least one of the memes frames as superior). I put "essays" in scare quotes as the first "essay" is literally the OP article, which is primarily a video of a conference talk. The rest of the collection mostly makes philosophical arguments that wax poetical about web architecture and mostly don't reference htmx by name so I can't be bothered to dig through all of them to figure out what you're trying to tell me.
"An extension of HTML as hypermedia" is not a description of what it does, it's a grandiose sales pitch. I'm familiar with the original REST paper and a lot of the philosophizing around HATEOAS and hypermedia.
It's not an "extension of HTML", it's a browser runtime implemented as a JavaScript library (assuming they didn't use WASM) that executes a declarative DSL in the form of non-standard HTML attributes (like Knockout, AngularJS 1, etc) and performs XHR requests to substitute fragments (like PJAX).
I'm genuinely trying to understand what makes this novel or interesting but it's hard to tell between all the obnoxious dismissiveness towards frontend frameworks (and JS) and the grandiose use of academic buzzwords.
EDIT: Thank you for pointing to that page though because at least it demonstrates that HTMX is the successor to Intercooler.js, a JS framework, which has a much less grandiose description of itself that doesn't need to appeal to philosophical blog posts or shitting on JavaScript to make its point: https://intercoolerjs.org/docs.html#philosophy
In fact, this Intercooler essay explicitly names PJAX as one of the examples of the tradition it tries to build on (while trying to stay true to the principles of HATEOAS and REST).
in general, I try to keep things positive and emphasize hypermedia over htmx, since it's the conceptual idea that I think is more important than htmx's implementation of it (libraries like unpoly or hotwire are also great options.) I do think htmx is more of an "extension of HTML" than those two, in that it is lower level and requires more work (or, if you prefer, has less magic) than them.
the memes are what they are: it's the internet and i've gotten plenty of shit over the last decade from SPA partisans, so, at times, they are going to be a little punchy. I try not to take things personally and laugh about it all: the situation is hopeless, but not serious.
the philosophical turn after I created htmx (really, intercooler 2.0) reflects that I have, over the last decade, developed a better understanding of hypermedia/REST/HATEOAS and why intercooler.js/htmx is different than SPA-talking-to-JSON-APIs. The essays certainly aren't for everyone, but I enjoy writing them and giving an alternative (and, I would argue, originalist) view of how web development can be done.
tone is always hard on the internet and, broadly, I like Churchill's take: "I like a man who grins when he fights."
I completely see the appeal of a "it's just JS" approach that JSX and React take. But there is a massive advantage that a DSL has, the compiler can statically analyse the template and compile it in such a way that it has an understanding of what will change, what won't. This allows the compiler to make massive optimisations that JSX templates cannot do (easily). To achieve, in general, the same level of optimisation with JSX you have to code them in yourself.
Whether you go for an Angular/Vue style attribute based DSL or a Handlebars-esq DSL such as with Svelt, I don't really mind, they both have advantages and disadvantages. But what they allow you to do over JSX is enormously misunderstood by the majority of React devs.
There is a good overview of this in the Vue docs here: https://vuejs.org/guide/extras/rendering-mechanism.html#comp...
The question isn't whether DSLs or "just JS" are more powerful, the question is which tradeoffs they represent and which tradeoffs you prefer. It seems that HTMX is primarily based in the Python ecosystem and as a former Pythonista I see the advantage of having a DSL over having to write JS, especially that the former is much narrower, which is what you want in this situation.
if the tool is easier to understand probably it is also less massive and easier to interact/find workarounds when needed than if you work on top of several layers + huge dependencies. At least that is my experience and why, in the face of choice and when it makes sense, I would choose htmx over React.
It is easy to understand and a thin layer you can figure out even what it is doing under the hood. I cannot say the same about React, which is much more complicated. Sure it has good use cases. But it is more difficult to understand and potentially drags a lot of deps inside.
I see every dependency on an app as introducing some risk: the more of them, the worse. They can break, they can go unmaintained, you can have a trnsitive dep that is compatible with one package but incompatible with another (this happened a lot to me with node) and that propagates recursively. It can be a hell to the point that making things work can get difficult.
So at the end, if you can do something with a couple of deps and some htmx/standard web stuff and a bit of hyperscript or similar here and there, chances that things will keep working for the years coming are higher. Also, if something gets outdated there is a tiny layer to replace you can do it more easily.