Is htmx Just Another JavaScript Framework?

https://htmx.org/essays/is-htmx-another-javascript-framework/

by cubefox • 3 years ago

284 311 3 years ago

htmx.org

cranberryturkey2• 3 years ago

cubefox2• 3 years ago

The article says it is a JavaScript framework.

beanjuiceII• 3 years ago

thats because it is

dartos3• 3 years ago

Kekw

cranberryturkey2• 3 years ago

https://primatejs.com has supported htmx from day one.

jakelazaroff• 3 years ago

I like this fuzzy definition better than "your code calls a library; a framework calls your code."

The sweet spot for HTMX I've found involves liberally using the hx-boost attribute enhance links and forms that already work without JavaScript. You definitely sacrifice some of the expressivity of HTMX, but you also get a website that is much less coupled to the (library|framework).

philipwhiuk4• 3 years ago

That reduces a framework to 'anything that accepts a callback function.

croes• 3 years ago

But you can write React in this library-like manner too and nobody argues that React isn’t a framework.
React - The library for web and native user interfaces

https://react.dev/

https://www.reddit.com/r/reactjs/comments/126uzfo/why_is_rea...

https://medium.com/@Angie.O/why-react-is-a-library-and-not-a...

https://www.oreilly.com/library/view/what-react-is/978149199...

hobofan5• 3 years ago

Yeah, that sentence surprised me too.

While I generally would also consider React more a library than a framework, I think there are arguments to be made that it's a framework. If we go by the common "your code calls a library; a framework calls your code" distinction, then you definitely have to structure your components in a very specific manner so that the React internals can "call your code" to e.g. render one component from it's parent component.

leetrout• 3 years ago

My favorite quip (not mine): somethings wrong when express is a "framework" and react is a "library".

diggan6• 3 years ago

One vital distinction is that even if you define 100 components, nothing will happen unless you call .render from react-dom. Nothing is automatically setup for you.

Compare that to Laravel or anything else that is obviously a framework. You write code and put it in a file in the right place, and it gets picked up automatically, most of the time.

This makes me still consider React a library, rather than a framework. But then there are tons of frameworks that uses React, nextjs is probably one of the more common ones.

tarcon• 3 years ago

If you use hooks, react expects code in certain places and in a certain order. At that point, react becomes framework-y.

afavour• 3 years ago

Sounds like a similar argument outlined here in a framework-agnostic way:

https://blog.jim-nielsen.com/2023/html-web-components/

I don't really understand why people would bother arguing whether htmx is a library or a framework. It's a way of making a web site where you write less JS.

karmarepellent7• 3 years ago

It's a way of making a web site where you write less JS.

It bothers me that this point always comes up when a discussion about HTMX arises. For me writing less JS is just a very pleasant side-effect of using HTMX. But the main benefit is just having (nearly) everything in one place (the backend). It is just so much easier to reason about the code.

asdajksah2123• 3 years ago

The article explains why that's important in the way the author defined the difference between framework and library.

In a nutshell, as defined by the author, a library is a cog which is included by your application and can easily be replaced if it's not being maintained anymore, whereas a framework is the system within which you create your application and switching to a new framework would require essentially rewriting the system (and throwing away what you learnt about how you developed your current app and having to learn the way to develop with the new framework).

Whether you agree with the author's definitions or not is irrelevant to the piece. What is relevant, however, is that one can be far less judicious when including a library, because you can simply replace it in the future, whereas you need to be far more careful when switching to a new framework because it's not as easy to replace.

germandiago2• 3 years ago

It is not the same at all. Of course it needs javascript on the back to work.

But the concept is totally different. It uses a hypermedia declarative model, an extended POST/GET etc. model. It keeps things very simple compared to a framework like React where you need a package manager, a transpiler and a json backend for data (not returning hypermedia).

So I would not consider it another Javascript frontend framework at all. I would consider it more like original html with extensions that support Ajax respecting the original web model.

synergy20• 3 years ago

that's true, it also need more support from the backend, for react a restful background is all you need, for htmx or html+ajax the backend has to do routing, state management,etc, it's really the traditional MVC approach, but easier for the frontend(no json, just html)

AzalinRex2• 3 years ago

if you put your state in the front end, you will end up tracking state on the front end and the server

chrisco255• 3 years ago

AJAX means Asynchronous Javascript and XML. It's quite literally JS. AJAX was not part of the original web model. It came out around the year 2000.

jbverschoor3• 3 years ago

Before that, we could use JSRS (JavaScript Remote Scripting)

germandiago2• 3 years ago

The only part that htmx adds is avoiding reloading the hypermedia and allow swaps via AJAX as you say. But the programming model stays hypermedia-based.

For example, your server returns markup, not Json to a React frontend or similar.

This simplifies things a lot though it also has some disadvantages.

Advantages: if your backend changes the return to extend functionality, the hypermedia will be returned with no required changes on the frontend.

On the other hand, if you want to do a data-based json API htmx is not what you want, because it conflates returning functionality (embedded in the hypermedia) with presentation, instead of returning only data.

Pigo• 3 years ago

"original html with extensions"

I just had this weird flashback to Frontpage...

jbverschoor3• 3 years ago

The second biggest USP of React was that it's a library and not a framework.

dad_chowder• 3 years ago

But you can write React in this library-like manner too and nobody argues that React isn’t a framework.

I think people do still make this argument

preommr• 3 years ago

There's people in this thread that are (implictly) making that argument

diggan6• 3 years ago

I'd absolutely make the argument that React isn't a framework, because by my definition it is a library, not a framework. https://news.ycombinator.com/item?id=38953266

quonn9• 3 years ago

So what's the problem with a bundler/transpiler etc? You set it up once. It takes a few hours, maybe a day. Then your platform _is_ TypeScript + React. This abstraction basically never leaks. I never need to look at the transpiled files to find an error.

Nobody argues that a C compiler is worse than assembly or that drivers or an operating system are bad.

jollyllama• 3 years ago

Once you're in the NPM ecosystem, there is a maintenance overhead.

See:

https://htmx.org/essays/no-build-step/

https://dubroy.com/blog/cold-blooded-software/

intrasight6• 3 years ago

The problem is that it's no longer an "interpreted" language.

quonn9• 3 years ago

How is that a problem?

danielvaughn• 3 years ago

I don't know how build systems work at lower levels, but things move so fast in the web development world that it renders your codebase inoperable if you don't maintain it.

I've had a codebase that sat for as little as 6 months without me touching it. When I tried to run it again, I ran into so many compatibility issues that I had to tediously copy out all of my code into a new project and then fix the remaining issues with my code itself.

Web dev build systems are dependencies on top of dependencies on top of dependencies, and they're all introducing breaking changes every other week it seems.

quonn9• 3 years ago

That‘s why there is a lock file. The package manager and node version can likewise be locked.

palmfacehn• 3 years ago

Inevitably someone will respond claiming that if you don't like the current ball of duct tape, it is because, "you haven't wrapped this weeks hottest flavor of duct tape as yet another layer on top"

There's something seriously wrong with modern front end tooling when the norm is downloading hundreds of dependencies to display semi-interactive text in a browser.

hellcow2• 3 years ago

You set it up once. It takes a few hours, maybe a day.

Until you need to update a dependency on a large codebase, which takes weeks because dependency A doesn't work with dependency B version X, and updating dependency B means that it no longer works with dependency C version Y, and so on. And nobody uses dependency C anymore -- it's unmaintained, so you need to rewrite everything to use dependency D.

Then you need to repeat this every few months because there's nonstop vulnerabilities flagged and APIs broken.

Nah, I'm good.

quonn9• 3 years ago

Dependency management is an unrelated issue and it exists for any platform. Unless you copy paste code or unless you just avoid dependencies. Which is easy to do in TypeScript as well. Nobody says you need to install hundreds of packages.

donatj2• 3 years ago

This is exactly what we’re dealing with right now trying to upgrade TypeScript. We’re stuck on an early version of 4.X because of some dependency triangle I haven’t had time to work out.

iterateoften3• 3 years ago

Seems a bit of an over reaction. Never experienced anything like you say since working with typescript after working on multiple billion+ $ SaaS apps. It’s basically the same as any other language.

kugelblitz• 3 years ago

Yeah, as a full-stack / backend developer using PHP / Symfony (and Twig), I only occasionally need to update the frontend. But then all these problems keep popping up.

Oh, that's the wrong yarn version. Oh, I thought v3 is the newest? But we still use v1? I used v3 in another project. So I need to install different versions? Ah, then I also need different versions of node? Ah, better to use nvm? Because only later versions have corepack, the experimental but recommended tool?

Or do we change back to npm? And why does an install process change a .lock file?

mortallywounded2• 3 years ago

This is such a common issue with npm and bundler it was an inside joke/meme at every company I worked at.

Person A: "Hey, so I ran bundle update and it's not working."

Person B: "You updated the dependencies? WHY WOULD YOU DO THAT!"

wmfiv• 3 years ago

One challenge a bundler and transpiler introduce is they enable an unconstrained set of solutions.

If a particular application has 10 patterns that support all the applications UI interactions, then a simple, constrained solution like htmx that supports those 10 patterns is preferable (to me) than an unconstrained solution like Typescript + React where each developer will likely use their creativity and experience to design slightly or wildly bespoke solutions for each feature.

jabradoodle2• 3 years ago

For one thing I may have very simple requirements that I don't want to buy into maybe a day long setup for, nor hand write js when html could support it.

mythz• 3 years ago

Reasons why I no longer prefer SPA's:

  - Build tools are complex
  - Large FX's have 100's of npm dependencies
  - Every SPA I've created has suffered from bitrot overtime, including:
  - Often breaking changes on upgrade, incompatibility between package versions
  - Dependencies/tools/fxs often abandoned, rewritten, replaced, etc
  - Constantly wasting time working around issues
  - Doesn't scale, the larger the App, the slower initial load and slower the FCP
  - Heavy client state and need to manage client routing

I now prefer using #NoBuild [1] ESM builds of progressive JS FX's for adding behavior to static rendered content where each page only loads the JS it needs, which ends up being much simpler [2] and resolves these issues I used to have with SPAs. Blazor with static rendering and Enhanced Navigation is even nicer which gives SPA-like navigation responsiveness without SPA-like complexity [3].

[1] https://world.hey.com/dhh/you-can-t-get-faster-than-no-build...

[2] https://servicestack.net/posts/javascript

[3] https://servicestack.net/posts/net8-best-blazor

modmodmod• 3 years ago

best joke heard all day

gofreddygo2• 3 years ago

what's the problem with a bundler/transpiler

Problem is why do we even need one? All I'm trying to do is for my client code to update a part of the page and not the entire page. Why do I need to even introduce concepts of bundling and transpiling for this pig-headed simple task ?

Further, react has a steep learning curve that a backend person need not be subjected to. And it evolves, so that search-copy-paste phase just never ends.

And then dependencies update. Another comment here details why that is a nightmare.

If you want to feel the pain, search for any react project from 2 years ago on github or even some showhn projects here. Literally none of them even start !

So you see htmx does address a group just like react does. Its a tool and it's great at what it does.

quonn9• 3 years ago

TypeScript is simply a much more robust type-safe language and the compiler abstracts away subtle differences between browsers. Likewise React abstracts away subtle differences between browsers.

And most applications are far more complex than just needing to update a small part of the page.

quonn9• 3 years ago

They don‘t start if they use complex frameworks, many dependencies, don‘t use lock files, don‘t lock their package manager and don‘t lock nodeJS and don‘t use Docker.

If they use plain TypeScript and plain React, have a lock file, lock their package manager version and lock their nodeJS version and optionally ship a sane Docker setup they will certainly run.

It is true that it would be nice to have a single tool that combines a bundler, typescript, linter, prettier, package manager and runtime and have it all configured with reasonable defaults from a single file and not 5 configs. And people have tried this lately, with approaches like deno and bun. But it‘s difficult to get these adopted.

Still, it would be better for someone to take all these tools and freeze them in place or even fork them and then freeze them with only bug fixes coming, rather than throwing out 10 years of progress and going back to something that just doesn‘t work.

exabrial2• 3 years ago

This abstraction basically never leaks

I actually did laugh out loud.

deliriumchn• 3 years ago

It takes a few hours, maybe a day.

Even then, most of the times it doesn't take even an hour because majority of people will grab default config or use something that allows no-config (parcel, vite, etc)... Some are fine with default CRA for a long time until they really need something custom, for example.

duxup• 3 years ago

I like this article, it's interesting.

I will say that in the web dev world I'm a whole lot less worried about definitions than I am trying to figure out what library or framework works for given use cases, what its benefits are ... and where it stops being helpful.

That's not information that is nearly as easy to write though and sadly seems to just take trial and error by each individual.

intrasight6• 3 years ago

I prefer to refer to htmx as a "future polyfill". Eventually, htmx semantics will become part of the web standard, and older browsers (or those that choose not to implement the feature) will need this polyfill.

hobofan5• 3 years ago

Eventually, htmx semantics will become part of the web standard

Why do you think that will be the case?

I'm not aware of any effort being made to evolve htmx into a web standard (either by introduction into existing specifications or direct adoption by browser), so this is about as baseless of a claim as someone saying "I see JQuery as a future polyfill" in ~2006.

intrasight6• 3 years ago

s/will/may

It may be aspirational on my part, but I do hope that HTML can evolve. JQuery isn't a good analogy as it's not extending HTML.

jbverschoor3• 3 years ago

Because it's a damn good name. As a matter of fact, when I read about HTMLX, I assumed it was a browser supported feature that I had missed

moritzwarhier• 3 years ago

CoffeeScript inspired ES2015, jQuery inspired querySelector and some other DOM APIs, but none of them would be a usable polyfill, and the standard APIs/syntax is not the same.

Apart from that, I'm not sure if I even agree with the point as a metaphor.

Some parts of htmx would make it easier to implement a form submit confirmation message or similar stuff.

everything else is either better served fully server-side or needs heavier client JS.

E.g. ajax pagination is useless without routing... well maybe I need to try htmx more thorougly to understand this stance. right now I don't.

it's not hard to do a fetch request and set innerHTML on an element, right?

mista2nith• 3 years ago

Yes

caporaltito• 3 years ago

Thank you.

eugenekolo• 3 years ago

Haven't heard of htmx before, but I might use it on a future project if I remember.

As somebody who is not a frontend engineer, but still likes to make a website every now and then. I haven't found a full framework (vue, react, etc.) that I've been able to go full into and still use jquery and writing plain css/html.

Htmx looks like a slight feature upgrade to jquery that I enjoy.

dartos3• 3 years ago

That’s basically where it lives, though it expects your backend to return html chunks iirc

naasking2• 3 years ago

You don't need to return partial html, you can use hx-boost and return full pages and it will only update the body.

vlod• 3 years ago

I just watched this video: "HTMX For React Developers in 10 Minutes" [0] that you might like as an intro.

[0] https://www.youtube.com/watch?v=r0XBULqzsT0

crftr• 3 years ago

HTMX aims to render itself obsolete by serving as a proof of concept to advance the HTML specification. In various interviews and blog posts, Carson has mentioned that jQuery was essential only until browsers implemented features like `querySelectorAll`.

The discussion about Library vs. Framework misses the core objective of the HTMX project.

dartos3• 3 years ago

I hope it works! HTML is in dire need of some tlc

Cthulhu_• 3 years ago

I was ultimately disappointed in HTML5 even though it was supposed to bring HTML into this era, with things like audio/video tags and new input methods for phone numbers and the like for mobile users. But ultimately it fell flat, was incomplete, and it feels like it's been stagnant again since HTML5 came out.

dvogel• 3 years ago

When I initially read the htmx documentation I was confused because it kept talking about a hypermedia client. The context clues suggested they were referring to htmx but my brain kept saying "isn't the browser the hypermedia client?" Eventually it sank in that htmx is an extension of the hypermedia client. When I first tried to use htmx I experienced a lot of discomfort regarding areas where htmx feels non-standard, such as redirects in the hx- readers on a 200 response. Once I understood that htmx is explicitly trying to move the boundary of the hypermedia client a lot of that discomfort melted away.

lurking15• 3 years ago

Yes htmx is an augmentation of the browser, specifically through enhancing HTML by way of JS. The idea is that JS frameworks became popular due to the lack of additional hypermedia controls which are the basis for how agents (users) interact with websites through hypermedia clients (browsers).

troupo17• 3 years ago

Once I understood that htmx is explicitly trying to move the boundary of the hypermedia client a lot of that discomfort melted away.

What do you mean by "moving the boundary of hypermedia client"?

HTMX tries to claim that hypermedia to only applies to HTMX because something something browsers and html.

Simply put, anything that talks HTTP and understands responses from a server is a hypermedia client to an extent.

You can create a client that only accepts base32-encoded cat gifs, and that will be a hypermedia client (in its infancy).

songbird23• 3 years ago

this is super helpful take. i get it now

karmarepellent7• 3 years ago

Are you sure HTMX aims to be eventually incorporated in some form or another into the HTML spec? I think I read most of the blog articles on the website but I cannot remember such a statement.

Another question in the same vein: In your view, why is it so important for the project to advance the HTML spec?

By the way I am actually curious about this, I am an avid user of HTMX, but have never contemplated this.

Edit: Ok I think I get it now. HTMX provides hypermedia controls that should have been in the standard from the beginning. It also more-or-less maintains the current semantics of the web as defined in the HTML spec. Therefore it is logical to eventually include it into the standard. That it?

dragonelite• 3 years ago

Yeah that was the same impression i had of HTMX it makes sense to integrate HTMX functionality into HTML 6 or whatever.

radlad• 3 years ago

Maybe not an explicit aim, but it sounds like Carson Gross holds a positive view of browsers implementing these features directly: https://news.ycombinator.com/item?id=35831981

paulddraper3• 3 years ago

It's not so much that HTMX itself would be included, as much as its philosophy of improved HTML.

falsandtru• 3 years ago

An example on the top page shows that this is an operation that should be written as a program. Therefore, this is not markup. Syntax that is not markup will not be the HTML specification.

<button hx-post="/clicked" hx-swap="outerHTML">

pphysch3• 3 years ago

How is that different than a standard <a> or <form> element that submits an HTTP request, receives some HTML in response, and uses that HTML to render a new GUI?

recursivedoubts29• 3 years ago

"should" is doing a lot of work in that sentence

how do you feel about the href, method and action attributes in HTML?

dfabulich2• 3 years ago

I'd love to see something like HTMX get standardized, but I'm extremely pessimistic for HTMX's prospects for standardization in HTML.

In talking to a few standards folks about it, they've all said, "oh, yeah, you want declarative AJAX; people have tried and failed to get that standardized for years." Even just trying to get <form> to target a section of the page that isn't an <iframe> has been argued about and hashed out for years.

Why is that? Well, for example, here's the form you have to fill out to start standardizing a front-end feature. https://github.com/whatwg/html/issues/new?assignees=&labels=...

It asks three main questions:

* What problem are you trying to solve?

* What solutions exist today?

* How would you solve it?

The goal of these questions is to focus primarily on the problem, and only secondarily on the solution.

For comparison, generally standards folks think we don't want to add programming-language features to HTML, e.g. adding <if> <while> and <set-variable> elements. If you want that sort of thing, you want a full programming language; you want JavaScript, actually.

So, when people propose features that don't perfectly address their problem, we want to ask: what do you want that for? How could we solve those problems better?

HTMX doesn't have really great answers to the "what problem?" question. Look at the home page:

* Why should only <a> and <form> be able to make HTTP requests?

* Why should only click & submit events trigger them?

* Why should only GET & POST methods be available?

* Why should you only be able to replace the entire screen?

Those questions are all solution-oriented, not problem-oriented.

Instead, let's look at the examples. https://htmx.org/examples/

Each of those examples are important problems that HTMX can solve. But it doesn't solve them very well from the perspective of screen-reader accessibility.

For example, there's a bunch of stuff there around managing editable data tables (click to edit, bulk update, click to load rows, delete row, edit row). But none of them work well with screen readers. How would a screen reader describe updates to these data tables? (Go on and try those examples in a screen reader, e.g. iOS VoiceOver. It's not great.)

Of course, editable data tables are a very widely requested HTML feature; it seems quite likely that a feature like that will be added to HTML. When it is, a screen reader will announce the feature as a data table, describing it to the user clearly, including live updates.

Some of the HTMX examples already have recent new HTML features that support them directly, like <dialog>, declarative form validation, using <details> as an accordion (which you can use to support tabs).

In the future, I expect to see HTML features landing like these:

* Editable data tables

* Infinite scroll / lazy loading

* Combobox

* Skeleton UI / Loading

If/when those features get done, it's not totally clear which problems remain that would be a good fit for HTMX's approach to declarative AJAX. Like adding <if> <while> or <set-variable> elements, the problems it solves seem to all have better solutions at a different level.

And yet, we'll probably be waiting 5-10 years for those features to be standardized, at a minimum. So it's a bummer that HTMX probably won't be standardized any time soon, and that the standards committee has consistently let the "best" solution become the enemy of a "good enough" solution.

But, that's what happened, and I expect it to continue to happen, so I wouldn't hold your breath for HTMX standardization. (If you'd been holding your breath ten years ago, you'd be long dead now.)

naasking2• 3 years ago

Those questions are all solution-oriented, not problem-oriented.

I think the problem is at it's core, "how do I add rich interactivity and dynamism to an HTML document without scripting?"

A general event-driven document model where document events can automatically issue server requests whose replies then trigger more document events and/or updates makes sense. htmx is one way to do this, but probably not the only or best way, but it has the core idea right: generalize hypermedia and extend the event model.

leptons• 3 years ago

HTMX breaks the "separation of concerns" paradigm. It's not going to help anyone doing anything complex, and it's going to be a crutch for anyone getting started. It breaks down quickly when the problem is anything more complex than clicking a button to load some content, and then what - rewrite everything in a more capable framework?

masklinn2• 3 years ago

I'd love to see something like HTMX get standardized, but I'm extremely pessimistic for HTMX's prospects for standardization in HTML.

I don't think the point is for HTMX to get standardised, but rather for HTMX to drive conversation and evolutions in the spec.

After all jQuery did not get standardised. Rather the issues solved by subsets of jquery were looked at, and considered for solving in the standard.

throwaway_08932• 3 years ago

I hope "render itself" was an intentional rendering pun.

jjkeddo199• 3 years ago

Agreed

guilhas• 3 years ago

Wouldn't it be better to leave HTML as a passive document markup?

And add HTMX as an "extension"

pier25• 3 years ago

It's obviously a library. Same as React or jQuery.

Obviously like any lib it has an API but HTMX doesn't force a project structure to you.

endisneigh3• 3 years ago

htmx is one of those things, like SQLite on the server, that you will incessantly see on HN, but rarely see used at large profitable companies.

Say you use python and Django. Why use htmx instead of Django templates? Same with ruby and rails, elixir and phoenix, etc. the trend is clearly towards live view/hotwire OR things like server side react. Htmx is in a weird position that makes no sense unless you want to use it for the sake of using it.

dizhn• 3 years ago

This is not necessarily refuting what you said but perhaps a different point of view. I wrote a simple backend servive with go and wanted to have some on off switches and status icons for it. I don't know js and am not interested in learning it. Htmx gave me enough interactivity to put together that one status thing with buttons in a few hours. To me that's valuable.

unsupp0rted• 3 years ago

People use it for the sake of not using JavaScript.

To a React client-side developer everything should be done in React on the client-side, with maybe a sprinkle of backend for unavoidable things, like where API keys live.

They’ll foot-gun as much backend stuff into the front end as possible.

To a certain kind of backend developer, everything should be done typesafe in non-JavaScript on the backend, with a sprinkle of client-side JavaScript for unavoidable things like showing/hiding elements. Of course even for this, 10 lines of CSS is preferable to 1 line of JS.

They’ll foot-gun as much client-side stuff into the back end as possible.

karmarepellent7• 3 years ago

Maybe some people are using it to avoid JS at all costs. I am using it to have everything (validation, authentication) in one place, the backend. It also saves me currently four serialization and deserialization steps, which drastically improved performance. meanwhile there will also be a few 10s or 100s lines of JS to enable some specific behaviour that I do not want to (or would be awkward to) implement in HTMX.

I am not saying that it is a silver bullet and people may use it for a variety of reasons, even avoid JS. I try to be less biased and make the best of both worlds. Until now, it has been pure joy.

philipwhiuk4• 3 years ago

Happy full-stack React + Back-end guy here :)

giraffe_lady• 3 years ago

If we're judging by things I've seen at profitable companies the past, present and future is php.

resoluteteeth2• 3 years ago

htmx is one of those things, like SQLite on the server, that you will incessantly see on HN, but rarely see used at large profitable companies.

This is true. However:

Say you use python and Django. Why use htmx instead of Django templates?

This doesn't make sense and makes me think you might be confused about what htmx is. The purpose of htmx is precisely so you can just use things like django and render pages on the server but still make a website feel more like a modern website by replacing elements without having everything require a whole page reload and without having to write your own javascript code.

That said, I personally think there are reasons why approaches like what htmx does fell out of favor.

endisneigh3• 3 years ago

I understand this, but my point is all the major frameworks have their equivalents to Hotwire, which don’t require you to even use JavaScript at all.

metaltyphoon• 3 years ago

Because just like ASP Razor templates, you still need to write JS for anything basic and with htmx you can get to 80/20.

sodapopcan• 3 years ago

Things need time to take hold while people unlearn what they thought was "law". Python had its time of being "the new hipster language" (in whatever disparaging vernacular we used back then, I'm too old to remember)

yoyohello132• 3 years ago

Why use htmx instead of Django templates?

HTMX is meant to be used WITH backend framework templates. The point of HTMX is it allows you to use your backend templating system to return pieces of HTML instead of JSON.

We are using it at our org for our intranet applications and it's been great so far.

endisneigh3• 3 years ago

I understand that, but why? You can write the entire thing in Django alone and use Hotwire and not use any JavaScript to begin with.

mring336212• 3 years ago

I did a little POC for myself for an internal app that provides pass-thru access to a menu of tools (most of which are java-based microservices) and I'm using Django templates to deliver content to htmx-controlled slots in the UI. Works great and is very easy, from someone who is not an expert in either tech.

Overall, I have used htmx successfully in several small projects, of varying tech stacks, without much effort at all.

zilti• 3 years ago

HTMX doesn't replace any templates, that is not its purpose. And trends are usually a great indicator of what not to do.

AzalinRex2• 3 years ago

if we go by precedent, every single thing that we were told was good because it was a trend has lasted less than a year and had to revamp and mutate itself out of a supposed position of streamlining and simplicity.

A lot of the supposed positives of certain "technologies" that we were told were key factors to embrace several tech have been proven to be false, and yet the cultists of the endless rotation of frameworks want us to stop listening to anyone asking "huh, isn't this like... super dumb?"

smallerfish2• 3 years ago

htmx + kotlinx.html + kotlinjs is an excellent combo that gives you an MPA that looks and feels like a modern webapp, with minimal stack complexity, and fully typesafe/compiled UI code. I'm also layering in tailwind & flowbite. With the hotswapagent project, you get hotswap that works for when you're building out UIs. One day I'll blog about this stack in more detail and post here.

sureglymop• 3 years ago

This sounds interesting. Would you be so kind as to explain how to set this up or link to an example?

I do have experience with plain kotlin but googling yielded not many results on how to integrate all these components you mentioned into a basic MPA. So - blog post encouraged :)

smallerfish2• 3 years ago

I definitely will post about it, but it's probably a blog length walkthrough :). I have an email notification form on my blog if you want to be notified when I get it done: https://smaller.fish/ (I promise no spam.)

Bluescreenbuddy• 3 years ago

"it's all javascript!?"

"always has been" ᕦ(̿ ̿ -̿ ̿ )つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿

lanecwagner• 3 years ago

Recently I had Carson on my podcast: https://youtu.be/9H5VK9vJ-aw?si=cv4ScxFTnJMRbsSH

He talked about this idea quite a bit, I love the idea of giving backend developers more control over the UI without resorting to huge JS frameworks

kopirgan• 3 years ago

Liked this phrase.. Explains the big picture beautifully

"a system by which elements enter and exit the DOM via network request."

masfoobar• 3 years ago

I would refer it as a library.

Like any library, it has a bunch of functions available to use. The difference, however, is that you don't use them directly. You are just writing html with htmx tags, etc.. and letting htmx, the library, do the rest.

This is it for the most part - but I understand some complications could break that rule. I doubt it would be that often if at all.

nonethewiser• 3 years ago

Returning your data in html which is coupled to your frontend html and css sucks.

nickmonad• 3 years ago

Why? If the primary client is a browser, you're giving it exactly what it needs to render.

game_the0ry2• 3 years ago

I never used or looked into htmx, but...

I feel like htmx fell into the same hype-cycle as every JS framework - initial interest was enthusiastic, but will likely fade as folks use it in the real world and any holes in the things it tries to solve are exposed.

On to the next, I guess...

Or go back to Ruby on Rails :)

testermelon• 3 years ago

htmx is not a framework, or even library. it's only one implementation of an idea. an idea that needs to be implemented by the browser instead of something external like a js file.

jabradoodle2• 3 years ago

There are simple things it would be nice to do without either 1. A server + framework, 2. A full on SPA, 3. Hand writing tedious js.

There is a nice sweet spot for htmx here; whether it can build the required network effect is another story, and not always reflective of the quality of the idea.

game_the0ry2• 3 years ago

Don't get me wrong - I love the idea of an open source project pushing mainstream ideas of how tech should be done, but those projects should be scrutinized and will always need to prove themselves in real world implementations. When that happens, the tech needs to evolve, be well-documented, and well-maintained.

I think htmx is doing an admirable job so far.

marcosdumay• 3 years ago

Or go back to Ruby on Rails

When you do that, you'll see the point of htmx.

recursivedoubts29• 3 years ago

gotta start somewhere

pastor_bob• 3 years ago

Or go back to Ruby on Rails :)

HTMX is basically a backend agnostic Hotwire, which is the direction RoR has gone

mattkevan• 3 years ago

I’ve had a lot of fun building an app with HTMX and Django. Makes things so much easier as I don’t need to use anything other than the standard templating system and still get an SPA-like front-end experience.

msolberg• 3 years ago

As a devops engineer who has recently been tasked with building UIs for our team and our developers, HTMX is a godsend. I create apps that often get steadily worked on for weeks and then only maintenance once and a while after that. I used to write django apps, but recently switched to a go backend with go html templates and htmx. This allows me to push everything in one docker image and avoid the black box nature of big frameworks that I don't have the time to fully understand.

I know this doesn't add to the conversation very well but I just want to throw it out there that htmx is a good replacement for a larger framework that you don't fully understand.

Also shoutout aplineJs for making small JS changes easy.

internet101010• 3 years ago

Alpine + htmx + tailwind is pretty much what I use for every quick little front-end thing now. I do still use Django but plan to transition to Rust as a way to get more comfortable with Rust.

jslakro• 3 years ago

What do you use alpine for? htmx is not enough?

karmarepellent7• 3 years ago

As someone with a similar task (building internal tooling) I must agree. HTMX really is a godsend, especially when you are already feeling comfortable writing backend code. In my case I simply familiarized myself with HTMX and augmented the backend code to return HTML. Yeah, it is obviously a little more than that, but the transition was really smooth.

ajayvk• 3 years ago

Hypermedia based web applications are a great fit for developing internal and operational tools. I have been building https://github.com/claceio/clace for making development and deployment easier for such web apps.

recursivedoubts29• 3 years ago

:) that's great to hear man

iterateoften3• 3 years ago

The problem I have with this style of library for frontend dev work is eventually the scope of the problem exceeds what the library is capable of doing. Then you have to embed JS which then gets pretty messy and spaghetti code and enough of this you are right back to where you started setting up a JS build system to make up for the deficiencies. Only now it is worse because you are working around one library and you start fragmenting your app because you started with the wrong thing.

karmarepellent7• 3 years ago

But it is not a given that the scope of the problem eventually exceeds what HTMX is capable of. It is perfectly fine to set HTMX aside and choose another framework if you feel that it better suits the problem at hand. Meanwhile there is still a ton of projects for which HTMX is more than enough (and always will be). So what you are mentioning is not an issue of HTMX, but one of "chosing the right tool for the problem".

iterateoften3• 3 years ago

That’s fair. I guess my comment was inadvertently responding to another about why you don’t see it at large companies.

One team at my company wanted to use HTMX and write the product with it and then the PM kept asking for features to bring it to parity with the rest of the application with regards to client side behavior and things devolved. They used hyperscript and eventually the frontend was just rewritten to be react.

toinbis• 3 years ago

It's surelly not "just another htmx framework" for at least one more reason - it has 100+ CEOs, way more than any other! Check them all out https://htmx.ceo .

I'm one of them. Really proud!

tangentstorm• 3 years ago

Even though you aren’t writing the 3P code yourself, by including it in your project you are committed to understanding it—and refreshing that understanding if you want to upgrade it.

This is a nice thought, but I suspect hardly anyone who uses a framework or library really understands it, or makes the commitment to try.

Obviously, a subset of really talented users eventually learn to understand the framework, but most are at its mercy.

Even then, you can't study every possible framework before choosing one to master - there are too many, and the cost of understanding the foreign code is simply too high.

So I suspect that in general, people try frameworks by taking a leap of faith, and then, sometimes, make the effort to actually understand it later - if and when it becomes necessary.

alexpetros7• 3 years ago

The main point I'm trying to make here is that even if you're in the "leap of faith" category, you still on some level have to understand the framework constructs (i.e. its API) in order to make use of it. If that API changes with a new version, and you want to upgrade, you're going to have to learn enough about that new API to make the upgrade.

Obviously you benefit from understanding the internals too, but realistically, the more complicated the thing you're using, the less of the internals even a motivated user is going to bother with.

briantakita• 3 years ago

Obviously you benefit from understanding the internals too, but realistically, the more complicated the thing you're using, the less of the internals even a motivated user is going to bother with.

This is a problem that grows with a large library...An api change has a higher cost than with a smaller library. Smaller libraries also tend to be easier to fully understand. Large libraries tend to be more of a "leap of faith" than small libraries.

exabrial2• 3 years ago

HTMX is signaling they're around for the long haul, we'll see if they break backwards compatibility or rewrite their API 15 times in the next year.

I had one of my dev's do several node/js framework POCs in _September_ last 2023 (current year is Jan 2024 at the time of this writing). Nearly all of the POCs won't even run or build any more because the developers have rewritten something and broke all backwards compatibility.

The Javascript/Node ecosystem is terrible for businesses and you're incinerating cash if your company running in the Node/Javascript rat race.

I'm hoping HTMX injects some sanity into frontend development.

taeric• 3 years ago

This feels extreme? Any chance you could share numbers or more details on these prototypes? I agree that the ecosystem seems crazy fast on moving. I wouldn't have thought it was that bad. React, in particular, I thought had been fairly stable? (Yes, there are new ways of doing things, but most of the old still work there, to their credit.)

jokethrowaway• 3 years ago

I don't think it's been the case for the last few months in particular, but Next has been historically terrible for this case. It sucks because it's also the best way of developing a React app without worrying much about tons of boilerplate crap.

I have different next projects started at different times and whenever I need to change a single line of text, I have a 50% chance something won't work and I'll have to debug some error coming from the intersection of different versions of node being used in the JAM host. I got hit by OpenSSL issues for a static website. Then a potential solution is to upgrade the framework (next or react) but then you start running into a bunch of other issues and you find yourself 8 hours deep for a copy change.

Performance is also a pain to get right as the abstractions keep piling up and especially the rendering cycle of React is a massive pain. The move from class to functional (for the majority a net positive as the functional version is way more readable and clear) made accessing some hooks harder, so know you need to remember some special rules or functions to call in order to get the behaviour you want.

For all new projects I just use solid.js which is a bit nicer compared to React while keeping most of React syntax. The abstraction layer is much smaller compared to React (no vdom, no custom rendering cycle, your function gets executed once, not once per re-render). You just have to remember you are dealing with Proxy instances and you're good to go.

Somehow I didn't have problems with updates but there is way less activity compared to React. I have some projects from 3 years ago just using solid.js, and a bunch of projects with solid-start. I didn't bother updating them, they keep on running, can't complain.

chatmasta3• 3 years ago

It sounds like your devs are not following best practices with regards to lockfiles and version pinning.

satvikpendem6• 3 years ago

Indeed. If half won't even build anymore, that's insane. It seems like they want to be on the latest version all the time which obviously will have breaking changes.

cosmojg• 3 years ago

Lockfiles and version pinning are bandaid solutions to be applied in the absence of resources for supporting new versions of libraries, especially given that, unless you maintain your own internal package repositories, you're then dependent on those ancient versions remaining available through your usual channels for the unforeseeable future. On my team, we stick to pulling the latest versions of dependencies, but we run our CI/CD pipeline on every commit and hold onto the logs from the last few successful builds. When it's clear that a dependency upgrade has caused a failure, we check to see if we can afford the work we'd need to do to accommodate the new version, and only if it's nontrivial do we resort to pinning the dependency (but it's usually trivial). Even then, the intention is that this is a temporary workaround until we have the time and people required to make the change.

Using lockfiles and version pinning by default opens you up to all sorts of issues. Breaking changes accumulate, and you'll fall further and further behind, increasing the development effort required to get up to date. If you ever want to use some hot, new library that just dropped with a must-have feature for your project, you're highly likely to run into a conflict that will force you to make all those changes you've been procrastinating. Of course, you'll also find yourself stuck with whatever security vulnerabilities exist in your pinned version of the dependency, to be discovered and exploited at some future date. This is a complete nonstarter in my field of work.

jb_hs• 3 years ago

lockfiles and version pinning is great unless you care about security fixes and maintaining projects over many years. This turns into a slog of maintenance.

staminade• 3 years ago

Any POCs your devs wrote would have been targeted at a specific version of their framework dependencies via their NPM package.json / package-lock.json. So why would any later changes made by framework authors, even backwards incompatible ones, made you unable to run or build them?

jmull2• 3 years ago

I assume they mean they updated their dependencies to the latest. That's somewhat valid.

The trap is this: you have a strong need to update a dependency for a bug fix (particularly security fixes), but the update isn't compatible. So you've got no good option: either live with unfixed bugs or pay the price to update your app to the latest version.

There is some wiggle room though. (1) libraries will often maintain a compatible branch for important fixes. (2) you can often find and apply just the fix/fixes you want to your own version of the library. Obviously, you start to lose the benefit of someone else maintaining the library for you, but when you aren't paying for it, you should always understand that is a nice but temporary state of affairs, so enjoy it while it lasts. (Actually, even when you are paying -- maybe even a lot -- you can still get left behind.)

recursivedoubts29• 3 years ago

htmx 2.0 will be 99% compatible w/ htmx 1.0, and we'll provide a backwards compatibility extension:

https://github.com/bigskysoftware/htmx/blob/v2.0v2.0/www/con...

we will also continue to support htmx 1.0 for the forseeable future for people who need IE support or don't want to upgrade

pupppet• 3 years ago

That's the JS framework lifecycle. Get yourself noticed with minimal boilerplate. Then add more boilerplate.

hintoftime• 3 years ago

Reading the first part of the book [0] featuring the concepts behind hypermedia systems has helped me to really understand the goals of HTMX. I would highly recommend it even if you don't experiment with HTMX yourself. I bought it as an ebook to support the author but it is also free to read.

[0] https://hypermedia.systems/

recursivedoubts29• 3 years ago

I am the author of htmx. I think htmx is a library using the following definition:

- a library you call

- a framework calls your code

in htmx you add attributes to HTML to "call" htmx, so, from the perspective, you can call it a library. On the other hand, those "calls" are called back into via event handlers in JavaScript, so an argument can be made that, even at this level, htmx is a framework.

I liked alex's analysis and I think his definitions and thinking contribute to the discussion, so I posted it to the htmx website.

Even though I still consider htmx a library. :)

ncphillips• 3 years ago

I’m the CEO of HTMX. This is correct.

dfabulich2• 3 years ago

The React team argued that it was "merely a view library" for years, and as far as I can tell, this was a wrong-headed approach based entirely on vibes.

Libraries are cute and charming; frameworks are humongous and domineering.

If you think of React and HTMX as cute and charming, and especially if you think of them as much cuter and more charming than their other "frameworky" competitors, then you'll prefer to think of your code as a library instead of a framework.

Instead, I urge you to describe HTMX as a "lightweight HTML framework."

alexpetros7• 3 years ago

Broadly speaking, that's basically what this article says!

recursivedoubts29• 3 years ago

yep, i understand that view, but i'm going to keep calling it a library because i think it's a library, but I get it

mhink• 3 years ago

For what it's worth, the landscape of Web development was much, much different in 2014 or so. Ruby on Rails was still a huge player, and most major OSS projects meant to enable Web development took a lot of cues from it.

Projects like Angular, Ember.JS, and Backbone (and for that matter, Rails' own Turbolinks system) very much expected you to build your entire application in them from the get-go.

The gist of React saying "this is a view library" at that point was largely about what you should expect React not to do for you. For example, two-way data binding, where the framework managed a fetch lifecycle as well as plugging the result into a view. "React is a view library" was letting devs know that they shouldn't expect React to do this- they should expect to make calls themselves and re-render the view accordingly.

I actually think it's still fair to say that React *itself* is still "just a view library", but that's sorta like saying Linux is "just a kernel". Sure, it's technically true, but at this point when we're talking about React we're talking about the whole ecosystem surrounding it as well. That wasn't the case 10 years ago (damn, has it really been that long?)

candiddevmike• 3 years ago

IMO, a library is easily swappable with another library, a framework is not, it's all over your codebase. Htmx meets the definition of the latter.

gameman144• 3 years ago

This is an interesting definition to me. Any library is going up make implementation-specific assumptions, so unless you're using a library that's purely an interface that multiple implementations conform to (e.g. SQL, and even then not fully) then there's necessarily going to be some migration work when switching libraries.

lemoncade• 3 years ago

lol u are everywhere

recursivedoubts29• 3 years ago

i'm in ur walls

alexpetros7• 3 years ago

Some have called this the "Team of Rivals" approach to open source maintenance.

ysavir2• 3 years ago

Would you say templaters like Vue and Angular, with the HTML additions of `v-for`, `@click`, etc., are a library in a similar way to HTMX?

If so, is the differentiation then just setting apart HTMX, Vue, etc from JSX and other JS-in-HTML approaches?

recursivedoubts29• 3 years ago

I'd look mainly at the amount of code you have to provide to them and the infrastructure (e.g. JSX) they require.

Not saying there isn't a blurry line here.

jmull2• 3 years ago

I'm thinking that, at this point, the argument about whether htmx is a library or framework is distracting from, rather than clarifying, the real question, which is whether htmx is a good/useful abstraction for web app development.

drbawb• 3 years ago

I agree with your definition, and I also believe it's an important distinction and a _better definition_ than the article author's. However I'm not sure I agree with your self-assessment of htmx being a library.

HTML is not the host programming language: that'd be JavaScript. Arguably, in this case, it's also whatever is on the other side of the HTTP requests htmx is making; which is almost certainly _not_ HTML.

htmx is maintaining its own event-loop (to react to DOM changes, read attributes, auto-wire itself, etc.), it's _calling into_ the user's code, either via the _declaratively configured_ HTTP endpoints when reacting to DOM events, or via callbacks provided by your event subscribers. These reactions were not explicitly programmed by a library-user in JavaScript, the host language. They were configured in markup and your framework altered its internal state and event-processing accordingly based on that configuration.

It is very much magic, and very much behaves like a framework. (I say this with the utmost respect, I don't think "framework" is a dirty word or anything. htmx is great conceptually, you've done a fantastic job implementing it, and it's a blast to use. I don't think it being a "framework", per this definition, detracts from what it is. I think it can also compete with other frameworks _just fine_ without needing to twist semantics.)

htmx's model is no different to me, conceptually, than Phoenix, Rails, et al. "magically" knowing which controller & action to invoke because I declared a route somewhere in a DSL, which they in-turn invoke to respond to an event. (I definitely don't consider either of those to be libraries.) What sets htmx apart is that it's a small, focused, _easily understood_ framework.

I do understand the need to differentiate htmx from the contemporary burdensomely-complex JS frameworks, but I don't think framework v. library is the right way to frame it.

recursivedoubts29• 3 years ago

i agree with your analysis and find no flaw in you logic, but i continue to insist htmx is a library

klysm• 3 years ago

So it delegates the framework part to the browser?

recursivedoubts29• 3 years ago

that's actually not a bad way to frame cough it

karmarepellent7• 3 years ago

As every discussion about HTMX usually evolves to people arguing why it is not widely adopted by big corporations and the like, let me be the first to share a thought on that topic.

Could it just be an organizational problem? When you start using HTMX in your company your neat distinction between frontend and backend devs collapses and everyone suddenly must be a full-stack developer. When you can avoid that additional cost by simply continuing to use React (or others), why wouldn't you?

Edit: As a side note, I have never used any large JS framework, only HTMX. Just trying to put myself in the shoes of happy React users and such.

troupo17• 3 years ago

I'm a fullstack developer in the widest sense of the world: I worked exclusively on the backend side, and exclusively on the frontend side, and on both at the same time.

I wouldn't touch HTMX with a ten-foot pole :)

It's a somewhat haphazardly defined DSL around magical attributes, their values, and awkward workarounds with somewhat badly specified behaviours (what's `hx-select-oob` exactly?).

There are other projects that do these things better, with less pretentiousness: Phoenix Liveview or Laravel LiveWire, or even Hotwire

recursivedoubts29• 3 years ago

all of those projects are much more magical, particularly the live* flavor of hypermedia driven applications

htmx generalizes the standard hypermedia controls found in HTML: anchors & forms

this makes it more work to implement some things, but sticks closer to the basic ideas of HTML

and, as always, if nothing magically works, nothing magically breaks

lioeters• 3 years ago

Phoenix Liveview or Laravel LiveWire, or even Hotwire

I want a banana and you suggest these jungles. Thanks but no thanks, I'd rather try HTMX which is a library not a framework.

randomgiy3142• 3 years ago

You’re missing a huge point: there’s a ton of devs that went into react bootcamp or whatever. Building a 50 person team on a technology that isn’t widely used or heavily supported by Google/Adobe/Microsoft is a huge hurdle. Even Typescript isn’t really used correctly, people basically use ts-lint on a lot of projects I see. For large companies they will also turn projects into BAU (business as usual) where the pressure is to push down costs and move it overseas. Finding a large overseas team on htmx at React prices will be difficult.

Typescript is popular because people don’t use it a lot, and it doesn’t break things.

If you’re introducing something new the bar is incredibly high to be obvious as to why to switch.

dpc_01234• 3 years ago

I think there's something to it. More important HTMX is just new and different enough that it needs time to be picked up by the industry, BUT indeed it does largely eliminate what is commonly considered strictly front-end work, and thus forces teams to change their composition and division of responsibilities.

At least where I worked there was often a frontend vs backend divide where some devs would write backend logic, and some others would worry only about consuming backend APIs to get the UI to do certain thing. The APIs is the contract and interface between the two sides and a natural place to divide responsibilities.

Now, with HTMX, the divide is gone. The backend generates and swaps the parts of the UI, effectively driving the UI/UX directly. This cuts tons of JS out of the picture and couples (not necessarily in a bad way) backend and frontend.

If you look at a popular YT video: https://www.youtube.com/watch?v=3GObi93tjZI , the result of HTMX rewrite was "JS guy left".

So in larger teams switching from something like React to HTMX largely turns everything upside down, not just on technical level but on how people work and collaborate.

It would be far easier for new teams and projects to go HTMX route, where they can start and keep hiring people who are fine in a new model.

pphysch3• 3 years ago

How do HTMX users manage the complexity of endpoint dependency graphs?

Once you go from simple route->page mapping to heavy HTMX usage, you now have routes that are implicitly dependent on other routes to work properly. "/users/42/" relies on hx-post="/users/42/send-email", and so on. Are there ways to model that dependency graph outside of your brain, say an IDE plugin.

mxey• 3 years ago

You might like https://htmx.org/extensions/path-deps/

arrakeen• 3 years ago

in a world where XHTML 2 was widely adopted, would HTMX have been necessary? it seems like it was the (failed) attempt at evolving the hypermedia aspects of HTML

ndyg• 3 years ago

As they should! Building with htmx works a lot better if you play to its strengths. You can send JSON-formatted form bodies, if you really insist. But you shouldn’t!

This excellent essay overlooked a '*':

* unless you are using bash + jq for your backend, in which case, JSON-formatted form bodies are quite reasonable.

alexpetros7• 3 years ago

Author here. Happy to admit that bash + jq backends are an excellent reason to use JSON formatted bodies. Godspeed you crazy animal.

davexunit3• 3 years ago

I like the basic idea of htmx: respond to user input by making server requests that return new html for a subset of the page. However, I think there's a pretty significant language design problem and htmx's solution is language proliferation. There is a very low "expressivity ceiling" for what can be encoded into html attributes. The hx-trigger attribute defines a new, very limited domain specific programming language for expressing side-effects with few means of combination or abstraction. For anything slightly complicated, hyperscript seems to be the favored solution which is yet another new language. All of this caused by trying to shove logic into attribute strings.

alexpetros7• 3 years ago

This is correct, but... logic belongs in attribute strings! Even in basic HTML, it can change what kind of HTTP request your <form> makes, or what kind of value your <input> sends, or where your <a> link goes.

Without question, there's a lower expressivity ceiling to attribute-based specifications, but there is a lot that you can do within that ceiling, and you benefit in other ways by keeping your application at that "level," so to speak. [0]

[0] https://unplannedobsolescence.com/blog/custom-html-has-level...

davexunit3• 3 years ago

I think this is a bit of reductionist interpretation of what I'm saying. Yes, it's technically correct that the attributes on a form change the type request made. That's not really what I'm talking about, though. In the same way that I wouldn't want to manually type a lot of CSS into a style attribute, I wouldn't want to write a small program in an hx-trigger attribute. Something like hx-trigger="input changed delay:500ms, search" is getting rather complicated, imo, and it's a new DSL with new semantics to understand. And then the recommended escape hatch is... yet another new language? I dunno I just feel like there's something missing here.

nine_k5• 3 years ago

Often you want to limit the expressive power, in order to obtain other important guarantees. E.g. much of the time you don't want a Turing-complete language, because it must be able to express a never-terminating program.

HTMX is expressive enough for many smaller cases. If your case requires more richness, you can always pick React, Vue, Elm, etc, and be able to do basically anything on the client side.

davexunit3• 3 years ago

Give a programmer a non-Turing complete language and they will use a Turing complete language to compile down to it. When a program is only configurable in YAML, someone will use jinja2 to generate it so they can have loops. SASS exists because CSS isn't expressive enough. Etc. etc. etc. I just really don't subscribe to purposely limiting expressive power via non-Turing completeness. I've never wanted to do this in my own software and it's only ever been a roadblock for me to route around as a user. Spent a lot of time in DevOps where this sort of thing is rampant.

gio• 3 years ago

I think htmx is using the Rule of least power which "suggests choosing the least powerful [computer] language suitable for a given purpose"

https://en.wikipedia.org/wiki/Rule_of_least_power

jsunderland323• 3 years ago

This has always been my take too, it reeks of a DSL. It's sort of like a no-code/low-code solution for people overwhelmed by the complexity of the FE ecosystem and/or those who don't want to learn anymore web technology but are proficient backend engineers. This is a completely understandable feeling and I have this feeling almost every day. I think DSLs that abstract markup work great for personal projects (just as a CMS works great for personal websites and marketing blogs), but for anything that starts picking up utility you will inevitably have to do something that breaks out of the DSL's abstraction.

Here's my fear of using DSLs like htmx. At first the escape hatch is your friend but eventually the project stops being an htmx project and becomes a "hyperscript" (or equivalent) project. For anything that reaches maturity, you're then left with the painful task of figuring out how to port hyperscript and htmx to react/vue/svelte (the very thing you were trying to avoid in the first place). This is way harder and more painful than using one of these frameworks as a foundation for your project.

What I don't get is why people that harbor this resentment to FE tech, don't just limit their feature usage. Think server components are dumb -- don't use them! Think react hooks are stupid -- write class components! In the event you actually have to do something that requires you to do something outside of your comfort-zone, you just have to push a little bit of your react/vue/svelte knowledge instead of appending more escape hatches to an increasingly bastardized DSL abstraction.

tiddybittyes• 3 years ago

Before the JS hipsters arrived on the scene attempting to implement Java on the web again. There was and still is nothing wrong with full page refreshes and javascript augmentation per page. HTMX is an aim to get back to that and Web Components are looking good as well.

toastercat2• 3 years ago

My biggest beef with htmx has more to do with the fact that it gets hyped as a React/Vue/Svelte alternative, when it's more accurate to describe htmx+<backend of your choice> as an alternative.

Also the constant use of pretentious memes on the official blog. But otherwise, I'm looking forward to trying it out for my next pet project.

philipwhiuk4• 3 years ago

htmx+<backend of your choice>

You can use React with any backend.

toastercat2• 3 years ago

My point is that htmx is not for SPAs. You need something like Alpine.js.

A React app can live entirely in an .html file.

zubairq• 3 years ago

I have heard so much about HTMX but never really “got” the essence of it. This finally brought me a bit closer, thanks!

vlugovsky• 3 years ago

It's definitely not "just another." I believe this term implies that the framework would follow current trends, such as Components, Templates, etc.

HTMX is different and incorporates some old JSF-like ideas, which makes it feel fresh for some developers, especially those who don't really want to learn React, Angular, Vue, and others.

robertoandred• 3 years ago

htmx is for writing HTML

This is false. All of those proprietary custom attributes mean it's for writing htmx, not HTML.

If anything, JSX is closer to HTML and htmx is.

philipwhiuk4• 3 years ago

It infests the 'rest' of your code.

It's a framework.

theultdev3• 3 years ago

There's just little benefit in HTMX unless you have a live financial dashboard or something like that.

I find the opposite approach of local-first (database in the client).

It fits more solutions and solves many more things (free offline, syncing, undo support) and getting rid of caching, retries, and latency.

Of course the industry wants you to want more on the server though.

Same view applies to RSC (react server components).

Embrace CRDTs.

recursivedoubts29• 3 years ago

oh, i dunno, seems like the internet has been somewhat successful as a distributed system, but ymmv

theultdev3• 3 years ago

centralizing would be using HTMX and authoritative servers.

local-first is more decentralized as your clients can sync directly with each other (or through a dumb proxy for NAT punching)

I see no need for servers to be anything but dumb proxies for clients. Not the opposite of making clients dumb terminals.

proc0• 3 years ago

XML is a pain, and I'm including JSX in this. Writing open/close tags, and then using wakas (<, >) everywhere seems unnecessary and creates ugly files. I feel the DOM should also expose other languages to interface with and browsers should detect that. Imagine web apps written with python and YAML for templates (on the client side, without transpiling).

sebastianconcpt• 3 years ago

I've recently adopted htmx from a Smalltalk backend and feels lovely.

When coding to do that it felt like a library and not a framework and provides a lot of flexibility in design options.

And I agree that the backend should do as much HTML as possible but some times you still need to do things with js. Bu again the backend can send the html plus the bits of js specific for that UI screen or component and that's super flexible and efficient if you keep it properly factored and with nice separation of concerns.

Here is a talk where I've made the case for a particular stack and demoed it last November in the Smalltalks 2023 conference https://www.youtube.com/watch?v=4_gmvN0pimI

mlhpdx2• 3 years ago

As a humble, new user of HTMX I don’t care what noun you choose for it (stereotyping by another word still smells the same). The facts as I have experienced them are a) it’s simple to do simple things; and b) it keeps difficult things possible. My highest praise. So, I’m using it. I’m a bit of a nut, and my backend is pure AWS Step Functions. Declarative web app, all the way down.

Yes, because of HTMX the backend is different than it would be with “plain” HTML or the JS framework du jour. But, the backend is very simple and clean, so I agree it has a nice influence whatever y’all decide to call it.

bilalq• 3 years ago

What do you write your step functions in? Are you using ASL or something that compiles to it?

mlhpdx2• 3 years ago

Straight ASL.

lakomen• 3 years ago

Htmx = pointless hype. It solves no problems and makes everything more complicated.

You have to learn not 1 but 2 new "languages" hypermedia queries and htmx special html attributes.

And what do you receive in return? Nothing that can't be done with other JS frameworks or libraries. Yes, htmx is JS.

That HN people fall for this trick is no surprise as it's frequented mostly by booksmart idiots.

ralmidani• 3 years ago

There is a spectre haunting SPA frameworks…

It’s a shame htmx wasn’t invented 10 years ago, but it makes sense that it’s bursting onto the scene now as a reaction to end-stage SPA mania.

If htmx-like functionality gets rolled into browsers with native optimizations (i.e. faster than the Virtual DOMs and custom JS runtimes of SPA frameworks, not to mention the no-build-step benefits we’re already seeing with htmx), then it hopefully won’t be just htmx that will get rendered obsolete; Angular, Ember, React, Svelte, Vue, etc. need to go even more urgently.

Pardon my enthusiasm, I really am looking forward to an HTML Renaissance.

andrewstuart• 3 years ago

I'm a React developer, pretty happy with it.

What is the core thing(s) I should be appreciating about HTMx?

wutwutwat• 3 years ago

Don't know anything about htmx, just popping in to see if anyone else remembers "dhtml", and "dhtml guru". A different time. A different internet.

htmx triggered that random memory, and then a flood of others, like:

the gold rush of people, sometimes kids, renting servers or colocating space, installing cpanel, and starting a shared hosting company

dreamhost, remember dreamhost?

vps hosting providers that offered emulated systems, before public cloud was a thing, before vmware or hypervisor OSs, before kvm, or virtualization in general

webmin/virtualmin (which is still going strong it seems)

turnkeylinux (which is also still going strong)

linux from scratch

macromedia

betaarchive.com

Chris Pirillo

guru4consulting2• 3 years ago

My product has the typical SPA front-end and API backend. I understand that with HTMX, those API backends would have to return HTML fragments instead of JSON data (or another server endpoint that returns HTML fragments). I have few questions with this HTMX approach:

- We don't hire full-stack developers. Our UI/UX designers and web developers fully focus on the front-end (responsive for mobile/tablet/desktop, A/B testing, quick iterations of UI/UX enhancements) without bothering about the backend. The backend API developers focus on API returning the right data and don't care about UI. I like this separation as it helps to really iterate the UI/UX faster. With HTMX, those backend devs will now have to worry about returning the correct HTML fragment based on the client device, position of the HTML div, etc. The presentation concerns spill over to backend developer and we are back to the days of server-side templates like JSP/ASP/RoR/PHP/Django. Anyone else sees issue with this approach?

- React/similar web apps can handle quite complex UI with multiple flows and navigations. I assume HTMX is probably not suited for complex UIs. Is that right? has anyone built any complex UI with HTMX?

recursivedoubts29• 3 years ago

If the FE/BE split is working well for you, then htmx isn't as compelling. It is more compelling when you have full-stack developers who can take ownership of entire features and shepherd them from start to finish, without needing to coordinate with another team to get the data/functionality they need.

Here is an example of a fairly sophisticated application that was written in react, then moved to htmx with good results:

https://htmx.org/essays/a-real-world-react-to-htmx-port/

As far as what you can achieve with htmx, I outline when hypermedia (the more general concept behind htmx) is a good choice or a bad choice here:

https://htmx.org/essays/when-to-use-hypermedia/

You can get an idea of the basic level of interactivity you can achieve with htmx by looking at the examples:

https://htmx.org/examples/

all of which compose well together. You can get more dynamic than that if you are willing to do client-side scripting (https://htmx.org/essays/hypermedia-friendly-scripting/)

another essay that might be of interest, regarding your APIs:

https://htmx.org/essays/splitting-your-apis/

and, if you want a complete introduction and overview of the hypermedia approach, we have a book available online for free:

https://hypermedia.systems

guru4consulting2• 3 years ago

Thank you. Any idea on the impact of SEO for public facing websites using HTMX? Is it as simple as just rewriting URLs? React needs work arounds to overcome SEO issues.

EGreg• 3 years ago

This is how we do it in our framework, which we started in 2011 and have been using continuously and improving until now: https://qbix.com/platform/guide/tools

We define "tools" to add/remove behavior to/from existing elements. The tools are added by an HTML5-compliant microformat. For example:

  <div class="Q_tool Q_columns_tool">
    <form class="Q_tool Q_form_tool">
    </form>
  </div>

Tools can contain other tools, and you can specify them when you attach event handlers, for example, so the handlers get removed when the tool gets removed, e.g. when its container tool is removed:

  event.set(handler, tool); // no need to remove it later

As a more complex example, here we have a chatroom, which has extensions like calling people and mentioning people:

  <div class='Q_tool Streams_chat_tool
                     Streams_mentions_chat tool 
                     Media_call_chat_tool
                     any_normal_classes_too'
       data-streams-chat='{"
            publisherId": "abcjwuqk", 
            "streamName": "..."
       }'
       data-media-call-chat='{
            "livestream": { 
               "private": true, 
               "max": 3
            }
       }'
   some-other-attributes="" >

      elements may be empty or have some existing content

   </div>

And we also support Handlebars helpers:

  <ul>
  {{#each list}}
     <li>{{tool "Streams/chat" publisherId="abc" streamName="..."}}</li>
  {{/each}}
  </ul>

Finally, we can also activate them dynamically via Javascript:

  Q.Tool.prepare(someElement, "Streams/chat", options);
       or 
  div = Q.Tool.prepare('div', "Streams/chat", options);

Then we just call Q.activate(container) which traverses the container and activates all tools inside it. At any point in the console you can type Q.Tool.active and it will show you all active tools.

You can see it in action for example at https://intercoin.app

PS: I used to originally call it the "Q" Framework but because of people on HN constantly complaining that it was conflicting with the "excellent Q library for promises", I finally relented and called it "Qbix Platform"... now the Q library for promises is obsolete but we still call it Qbix... so maybe it's better for SEO though? https://news.ycombinator.com/item?id=6053211

sublinear• 3 years ago

yes

thomas-guettler• 3 years ago

We are ugly, but we have the music

Is htmx Just Another JavaScript Framework?

Related Stories