10 ms·

Htmx 1.9.0 has been released

351 points by vyrotek 4y ago

sam_goody 4y ago
HTMX should have a way to have JS modify the response before it is inserted/handled. <div hx-preinsert="myfunc">Old Content</div> <script> function myfunc(callingElement, serverResponse){ return modified-Server-Response } IMO, aside from the fact that such a feature really is needed, the lack thereof pushes people to Marko, Livewire, etc, simply because they need to do add some tiny detail which is available in the JS. Besides that it makes HTMX look like a toy that values purity (no frontend JS) over practicality. I know there are ways to build a plugin, but do not have the time or headspace to figure it out.
- kaeshiwaza 4y ago
  Maybe the new feature 'hx-on' can help with that ?
- recursivedoubts 4y ago
  You can use the `htmx:beforeSwap` event to transform responses if you'd like: <button hx-get="/example" hx-on="htmx:beforeSwap: event.detail.serverResponse = transformResponse(event.detail.serverResponse)"> Example </button> In general, htmx is going to lean on events for integrating scripting into the hypermedia flow.
recursivedoubts 4y ago
this will probably get nuked since it's just a point release (no hard feelings dang), but there is an interesting new feature: it now has View Transitions support, an experimental browser feature available in Chrome 111+ that makes visual transitions between DOM states much easier to animate. I discuss it in an essay here: https://htmx.org/essays/view-transitions/ https://htmx.org/essays/view-transitions/ Chrome's docs on the feature are here: https://developer.chrome.com/docs/web-platform/view-transitions/ https://developer.chrome.com/docs/web-platform/view-transiti... MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API https://developer.mozilla.org/en-US/docs/Web/API/View_Transi... will be exciting to see this feature rolled out across the major browsers, as it will make vanilla HTML a lot smoother.
- clairity 4y ago
  neat stuff! you have a typo on that page under https://htmx.org/essays/view-transitions/#the-css https://htmx.org/essays/view-transitions/#the-css : @keframes instead of @keyframes
  - recursivedoubts 4y ago
    thx, fixed!
- afraca 4y ago
  I was curious about Mozilla's stance on the API. They have a GH issue for it: https://github.com/mozilla/standards-positions/issues/677 https://github.com/mozilla/standards-positions/issues/677 but it's not finalized yet. View the very interesting dashboard here: https://mozilla.github.io/standards-positions/ https://mozilla.github.io/standards-positions/
  - rmorey 4y ago
    WebKit in a similarly undecided position: https://github.com/orgs/WebKit/projects/1?pane=issue&itemId=23772220 https://github.com/orgs/WebKit/projects/1?pane=issue&itemId=...
    - egeozcan 4y ago
      The Mozilla issue is labeled as "Position: Positive" and there is a comment that says: > We're supportive of View Transitions, but since it's a new capability for MPAs in particular, we think it's important that the solution works well for MPAs and that it's consistent with the solution for SPAs. As such, if design changes are needed for the MPA use case that also affect SPA API, the latter should be updated as appropriate even though it has shipped. In other words, we think it would be bad for the SPA and MPA APIs to diverge or be inconsistent. I don't think that's undecided. More like, "positive with some reservations". edit: When I think about it again, perhaps you are right given the issue is still open (but also "ready to add"). edit2: Thinking about it more, I like the open process and all but perhaps such discourse should be private before being finalized as early commenters from Mozilla can have a premature influence on public opinion.
durpkingOP 4y ago
Where might I find a red cap that says "Make apps HTML again"?
- e12e 4y ago
  Surely the cap is gray, and the font color is Ed:black, except for "HTML" which is blue and "again" which is purple (and possibly both are underlined)?
- deleted 4y ago
  [deleted]
ye-olde-sysrq 4y ago
I know this is tangential but I was trying to decide what I wanted to use to make an app that could be accessed from android, ios, and desktop in a convenient way. I am not a fan of how churny the js world is, and I come from a background in Swing/Qt/GTK/etc desktop development. I evaluated HTMX as a not-js way to do modern web apps. It was fine, it was certainly interesting. I had some concern about how much pain I would be in for when I inevitably wanted to borrow something from the js ecosystem, like a charting library or something. I actually ended up deciding on godot with gdscript and while I'm not done yet, I'm having a pretty dang good time. I'm a little annoyed that I have to pay apple to get it on iOS, but I have to pay apple anyway because safari is such an annoying odd one out from how firefox and chrome's renderers work. It's always safari that has weird things it doesn't like, in my experience. And I have hope that either Epic Games or Europe will manage to force Apple to let people sideload apps.
- Takennickname 4y ago
  Doesn't godot refresh the entire screen at X fps? That would kill battery life, no? Asking cuz I considered this route before but decided against it for battery and app loading time reasons.
  - DisownedWheat 4y ago
    Godot does have a low CPU mode that limits screen refreshes until something is interacted with on screen or animated, it's what the actual editor uses. I'm not sure whether it works on web exports though.
    - rmbyrro 4y ago
      Might be worth double checking. Last time I read, this mode wasn't supported on mobile devices, which is precisely the ones more sensitive to energy use.
  - boterock 4y ago
    godot ticks at that rate, but if you don't transform UI things, they don't get redrawn. so maybe the framebuffer is switched every frame, but draw calls shouldn't be reissued unless needed. also, I think it is possible to make it not tick from time updates, but only from input event updates, or maybe an animation actually running. similar to what the editor does.
sdze 4y ago
Fantastic update. Also, I can't wait for Hyperscript to get to its maturity (1.0). ;)
benatkin 4y ago
Does it play nicely with custom elements and the shadow DOM?
- djbusby 4y ago
  I'm using a combination of RiotJS and HTMX. But RiotJS isn't exactly shadow DOM.
- recursivedoubts 4y ago
  as far as I understand, it does a visual snapshot of the DOM, so it should work w/ custom elements just fine
  - canadianfella 4y ago
    What is a visual snapshot of the DOM?
- kerkeslager 4y ago
  It's a bit of an aside, but what do you get from the shadow DOM? I've given a real, honest effort to using the shadow DOM for a bunch of WebComponents and it just seems like it makes everything harder for no benefit that I've been able to find. Every example I've found of WebComponents using the shadow DOM seems to show many many lines of weirdly-inverted HTML (templates/slots) and JavaScript, all to achieve what I can do in a few "document.creatElement"s (vanilla JavaScript) that are easier to understand. And using the shadow DOM means my global CSS styles don't apply to what I do there without absurd hacks. I have honestly been looking for a benefit here, but I just don't see it. What am I missing?
  - benatkin 4y ago
    I don't like having a bunch of styles fighting each other. It is similar to the !important stuff. In fact I sometimes thought it was better before !important was verboten. It was overused, though. Only the shadow DOM provides some relief from this annoying part of web development.
JoshWVS 4y ago
Woah--I stumbled upon "Hypermedia Systems"[0] from the View Transitions essay linked on this release page. If, like me, you're sympathetic to the htmx philosophy, but not really an expert, it looks like a great read. (And it's beautifully presented, too.) Seems it was discussed a few months ago[1]; I missed it then. [0]: https://hypermedia.systems/ https://hypermedia.systems/ [1]: https://news.ycombinator.com/item?id=34134545 https://news.ycombinator.com/item?id=34134545
jonathan-adly 4y ago
If you are on the fence about using htmx in production. my startup[0] uses it exclusively for our frontend (with like 2 lines of hyperscript. It’s sister library). No complaints and boy, it’s such a fresh breath of increased productivity and still excellent user experience. We still had to build an API anyway for external organizations using our product, but you still skip a ton of unnecessary JS code. 0. GalenAI.co
- lenkite 4y ago
  Wish htmx supported WASM - ie instead of sending a request to the server, you send the request to the hosted WASM module and render the response. Ideally, one could then use Rust web-frameworks such as Axum on the client side.
- powersnail 4y ago
  What's the back-end? Do you generate those HTML responses via a normal template engine, or is there some sort of deeper integration with HTMX on the backend?
  - jonathan-adly 4y ago
    It’s Django.. request data in, html response out. That’s all what you need :)
    - powersnail 4y ago
      I'm asking because I've sort of done this in the past, and find creating fragments of HTML with Django's template engine a bit awkward. For instance, if I have some sort of utility button, and say I put it in "utility_button.html", a template file. In practice, I might have to supply different actions, or icon names, or colors when the button is generated, which means that each of these potential variable needs to be a template parameter. Adding a class involves some string manipulation magic. On the other hand, on most client-side front end library, when using a template, I can still slap whatever attributes onto the element, or manipulate its classes as an actual list with relative ease, because front end libraries are more or less already a big HTML parser and generator.
schemescape 4y ago
Anyone planning to make a browser with native support for HTMX (instead of a full JavaScript runtime)? I only ask because I kind of wish such a thing existed. I still can’t find a happy medium between no JS and “browser as an entire OS”.
- recursivedoubts 4y ago
  my hope is that, at some point, the browser developers notice htmx and decide to fold its functionality into HTML itself, which is where most of this stuff belongs
squidsoup 4y ago
Htmx has such an old man yells at cloud vibe. People don't like fat js clients because of "view transitions", they like the developer experience, composability of components, and benefitting from a vibrant ecosystem that is constantly innovating.
- mdavidn 4y ago
  I despise JS clients because I hate waiting for the entire thing to download and initialize every time I visit a site to make a quick change. Looking at you, Hello Fresh.
  - squidsoup 4y ago
    Most popular js frameworks support SSR - it isn't appropriate to use an SPA for a public app like Hello Fresh, that's on them.
- zhte415 4y ago
  I just like the user experience coupled with a dead simple development experience. Simple CRUD webapps, which is a lot of things, don't need unique user experiences; oftentimes the less unique the better.
- adamzochowski 4y ago
  Constantly innovating can also be interpreted as 'having no standard'. I had developed sites for 25 years. I still have a corporate site that was developed 20 years ago, and it returns more results, and is faster to render than most of new fangled SPA I seen deployed on servers 20x larger. I do agree with you that SPA (react and its ilk) have cleaner benefit of composability of components, but I would posit that AJAX and component state/props has made for less reliable web. I often find myself in situation where SPAs crash mid way during concert or flight purchase - be it JS error, or network instability. Reloading the page doesn't get SPA to resume where it crashed, but often throws additional errors, saying I am already mid way in checkout (but I can't continue), or invalidating session (but still remembering that my other session was in process of buying a seat, so I can't reselect the seat I wanted. Finally, they are terrible for bookmarking or sharing. So the composability of components, a benefit, came with a need for developer to be extra careful about failure modes, resuming states, bookmarking directly to specific content. Most developers are not careful, and the old html per page model forces different mentality for dealing with failures, and content availability.
seumars 4y ago
What's the consensus on using custom HTML attributes such as "hx-post", "hx-trigger" and so on, which are "invalid" according to the spec? I don't mind prepending data- to custom attributes but it's still a minor nuisance.
- mejutoco 4y ago
  Data attributes are accepted. From the docs: > It’s worth mentioning that, if you prefer, you can use the data- prefix when using htmx: > <a data-hx-post="/click">Click Me!</a>
smusamashah 4y ago
Why is it slow? For example in https://htmx.org/examples/click-to-edit/ https://htmx.org/examples/click-to-edit/ and https://htmx.org/examples/edit-row/ https://htmx.org/examples/edit-row/ when I click the edit button, there is a noticeable delay between click and appearance of editable boxes. I don't see any network requests being sent.
- sli 4y ago
  It seems to just be a simulated delay and should probably mention that if that's the case. Running the first example locally does indeed attempt to send a network request when clicking the edit button.
- recursivedoubts 4y ago
  all the demos use a mock ajax request library (sinon) so we don't have to run a server i intentionally introduced an 200ms delay so that you can see things like request indicators: https://github.com/bigskysoftware/htmx/blob/master/www/static/js/demo.js#L10 https://github.com/bigskysoftware/htmx/blob/master/www/stati...
  - smusamashah 4y ago
    May be it's worth adding a note on these pages that you are simulating network by introducing delay.
  - robertoandred 4y ago
    Why would there need to be any sort of network request to show edit fields?
    - recursivedoubts 4y ago
      well, if you are using a hypermedia style application then you want to make a hypermedia exchange on an interaction to bring down the hypermedia representation for editing a particular resource
synergy20 4y ago
as an embedded developer, CSR+SPA is the default way to do it these days, my embedded board(with limited resources that can not run python/django/etc) only needs to provide some json data but htmx expects backend spits out html. Not sure if it's possible for htmx to work with haserl or some c-based cgi or even lua-based lightweight web framework, I guess it could, just not popular so nobody did it.
- olodus 4y ago
  If I am not mistaken, last time I looked at it I think I saw that HTMX has the ability to declare handlers. So that if you instead want to provide Json, one of those handlers could transform/handle it client-side. I think, haven't tried it myself.
- neurostimulant 4y ago
  Any backend that can spit out html fragments should works. The backend doesn't have to be aware of htmx. Heck, the response doesn't have to be a fragment either because you can just select which part of the response to update the dom with using the hx-select attribute.
leke 4y ago
I'm currently using htmx on my latest project to only change parts of the page that need changing. This is fine, but I am finding some weirdness happening in that design though. For example, if I load a portion with some JS in it, the consecutive times I load it, gives me "already declared variable" errors. I guess this is because the JS stuff is hoisted outside of the area it's called, so when it's recalled, it hasn't been removed with the previous request. My solution has been to use `var` but I guess this is not the best solution and something more fundamentally wrong.
- thornewolf 4y ago
  Read up on HATEOAS - Hypermedia as the engine of application state. Long story short, don't use J's to store state, use html responses.
- arcanemachiner 4y ago
  I use `window.someVar = "blah"` instead of `var someVar = "blah"`. It's a dirty hack, but it works around the re-binding issue.
moritzwarhier 4y ago
> Unfortunately for HTML, CSS transitions are only available if you use JavaScript: you have to change elements dynamically in order to trigger the transitions, which “vanilla” HTML can’t do. In practice, this meant that only the cool kids using JavaScript to build SPAs got to use these tools, further cementing the aesthetic superiority of SPAs. I'm sorry if my question is not sufficiently informed, but how does HTMX not "use JavaScript" to trigger animations? Have followed the library and approach for a while and tend to compare it to Alpine, which I find a bit more intuitive. But that's probably exactly because Alpine isn't shy about the fact that you're writing JS in the end. I found such solutions (Alpine) a grrat joy to start working with (e.g. a complex form with nested fields, custom autocomplete...) and a nightmare to extend or generalize. The Chrome transition API is very interesting. Also, there certainly is a place for controlling JS via HTML. But for the risk of sounding inpolite: Having read a couple of posts by htmx team, the "htmx is hypermedia, SPAs were invented because X and are a crutch" style intro starts to feel a little repetitive and dated to me. Every post starts with a bashing of "SPAs", it gets tiresome very quick. SPAs can be simple, they can be complex nightmares. So can HTML-centric "sprinkles of JS" that outgrow their purpose. Also, who are these "cool kids writing SPAs"? It's 2023 and it's irrelevant if you generate your HTML in PHP, JS, Rust or Python: you need abstraction and modularization for large frontends. That's the problem React solves, not just fluffy page transitions.
- recursivedoubts 4y ago
  what I'm saying there is that CSS Transitions aren't integrated into the normal hypermedia flow of HTML, which is what htmx tries to address we have never said that SPAs are a crutch, our (really, my, there isn't much of a team and I don't speak for anyone else) claim is that SPAs are as popular as they are for advantages that are not inherent to them when compared to hypermedia, and htmx tries to narrow that gap i am sympathetic that people reading the various essays on the htmx website might get worn out by my repetitive beating on hypermedia, but consider that for every repeat reader, there are tens or hundreds of new readers who haven't heard much about or thought much about hypermedia. Repetition is a key to teaching, and I teach, so maybe that influences how I write as well. regarding abstraction and modularization being key to large front ends, I sort of agree to an extent, but I think that at the system level that abstraction can be hypermedia and that the modularization can be done server side of course it always depends on the app, htmx/hypermedia isn't right for everything, etc. etc. as we try to point out in an essay on our site: https://htmx.org/essays/when-to-use-hypermedia/ https://htmx.org/essays/when-to-use-hypermedia/ do I get a little punchy about SPAs at times? Sure, it's the internet after all. I've been fighting for the hypermedia-oriented approach for web development for a decade now, and I've been called "old", "irrelavent", "pointless" and "stupid" many times along the way by SPA fans. There is obviously some conflict between my views on web development and the larger front end world's perspective. But I try to be reasonably balanced about the tradeoffs, even while I think that the SPA approach is dramatically overused today.
JodieBenitez 4y ago
Great release ! I've been thinking about something like "hx-on" for quite a while and I'm glad I'm not the only one.
deleted 4y ago
[deleted]
veidelis 4y ago
What's the use case for Htmx? When would someone want to use this over more tradional approaches?
- the_gastropod 4y ago
  What do you mean by traditional?
  - veidelis 4y ago
    For example, having some Django or RoR render forms and handle submit with a full reload, or another case where client would query some endpoints via JS fetch API and handle the responses that way.
    - recursivedoubts 4y ago
      TLDR: htmx can give you the UX of the later with the simplicity of the former. I would recommend reading the essays on the htmx website for more in-depth discussion: https://htmx.org/essays https://htmx.org/essays

351 points by vyrotek 4y ago

HTMX should have a way to have JS modify the response before it is inserted/handled. <div hx-preinsert="myfunc">Old Content</div> <script> function myfunc(callingElement, serverResponse){ return modified-Server-Response } IMO, aside from the fact that such a feature really is needed, the lack thereof pushes people to Marko, Livewire, etc, simply because they need to do add some tiny detail which is available in the JS. Besides that it makes HTMX look like a toy that values purity (no frontend JS) over practicality. I know there are ways to build a plugin, but do not have the time or headspace to figure it out.

kaeshiwaza 4y ago
Maybe the new feature 'hx-on' can help with that ?
recursivedoubts 4y ago
You can use the `htmx:beforeSwap` event to transform responses if you'd like: <button hx-get="/example" hx-on="htmx:beforeSwap: event.detail.serverResponse = transformResponse(event.detail.serverResponse)"> Example </button> In general, htmx is going to lean on events for integrating scripting into the hypermedia flow.

recursivedoubts 4y ago

this will probably get nuked since it's just a point release (no hard feelings dang), but there is an interesting new feature: it now has View Transitions support, an experimental browser feature available in Chrome 111+ that makes visual transitions between DOM states much easier to animate. I discuss it in an essay here: https://htmx.org/essays/view-transitions/ https://htmx.org/essays/view-transitions/ Chrome's docs on the feature are here: https://developer.chrome.com/docs/web-platform/view-transitions/ https://developer.chrome.com/docs/web-platform/view-transiti... MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API https://developer.mozilla.org/en-US/docs/Web/API/View_Transi... will be exciting to see this feature rolled out across the major browsers, as it will make vanilla HTML a lot smoother.

clairity 4y ago
neat stuff! you have a typo on that page under https://htmx.org/essays/view-transitions/#the-css https://htmx.org/essays/view-transitions/#the-css : @keframes instead of @keyframes
- recursivedoubts 4y ago
  thx, fixed!
afraca 4y ago
I was curious about Mozilla's stance on the API. They have a GH issue for it: https://github.com/mozilla/standards-positions/issues/677 https://github.com/mozilla/standards-positions/issues/677 but it's not finalized yet. View the very interesting dashboard here: https://mozilla.github.io/standards-positions/ https://mozilla.github.io/standards-positions/
- rmorey 4y ago
  WebKit in a similarly undecided position: https://github.com/orgs/WebKit/projects/1?pane=issue&itemId=23772220 https://github.com/orgs/WebKit/projects/1?pane=issue&itemId=...
  - egeozcan 4y ago
    The Mozilla issue is labeled as "Position: Positive" and there is a comment that says: > We're supportive of View Transitions, but since it's a new capability for MPAs in particular, we think it's important that the solution works well for MPAs and that it's consistent with the solution for SPAs. As such, if design changes are needed for the MPA use case that also affect SPA API, the latter should be updated as appropriate even though it has shipped. In other words, we think it would be bad for the SPA and MPA APIs to diverge or be inconsistent. I don't think that's undecided. More like, "positive with some reservations". edit: When I think about it again, perhaps you are right given the issue is still open (but also "ready to add"). edit2: Thinking about it more, I like the open process and all but perhaps such discourse should be private before being finalized as early commenters from Mozilla can have a premature influence on public opinion.

durpkingOP 4y ago

Where might I find a red cap that says "Make apps HTML again"?

e12e 4y ago
Surely the cap is gray, and the font color is Ed:black, except for "HTML" which is blue and "again" which is purple (and possibly both are underlined)?
deleted 4y ago
[deleted]

ye-olde-sysrq 4y ago

I know this is tangential but I was trying to decide what I wanted to use to make an app that could be accessed from android, ios, and desktop in a convenient way. I am not a fan of how churny the js world is, and I come from a background in Swing/Qt/GTK/etc desktop development. I evaluated HTMX as a not-js way to do modern web apps. It was fine, it was certainly interesting. I had some concern about how much pain I would be in for when I inevitably wanted to borrow something from the js ecosystem, like a charting library or something. I actually ended up deciding on godot with gdscript and while I'm not done yet, I'm having a pretty dang good time. I'm a little annoyed that I have to pay apple to get it on iOS, but I have to pay apple anyway because safari is such an annoying odd one out from how firefox and chrome's renderers work. It's always safari that has weird things it doesn't like, in my experience. And I have hope that either Epic Games or Europe will manage to force Apple to let people sideload apps.

Takennickname 4y ago
Doesn't godot refresh the entire screen at X fps? That would kill battery life, no? Asking cuz I considered this route before but decided against it for battery and app loading time reasons.
- DisownedWheat 4y ago
  Godot does have a low CPU mode that limits screen refreshes until something is interacted with on screen or animated, it's what the actual editor uses. I'm not sure whether it works on web exports though.
  - rmbyrro 4y ago
    Might be worth double checking. Last time I read, this mode wasn't supported on mobile devices, which is precisely the ones more sensitive to energy use.
- boterock 4y ago
  godot ticks at that rate, but if you don't transform UI things, they don't get redrawn. so maybe the framebuffer is switched every frame, but draw calls shouldn't be reissued unless needed. also, I think it is possible to make it not tick from time updates, but only from input event updates, or maybe an animation actually running. similar to what the editor does.

sdze 4y ago

Fantastic update. Also, I can't wait for Hyperscript to get to its maturity (1.0). ;)

benatkin 4y ago

Does it play nicely with custom elements and the shadow DOM?

djbusby 4y ago
I'm using a combination of RiotJS and HTMX. But RiotJS isn't exactly shadow DOM.
recursivedoubts 4y ago
as far as I understand, it does a visual snapshot of the DOM, so it should work w/ custom elements just fine
- canadianfella 4y ago
  What is a visual snapshot of the DOM?
kerkeslager 4y ago
It's a bit of an aside, but what do you get from the shadow DOM? I've given a real, honest effort to using the shadow DOM for a bunch of WebComponents and it just seems like it makes everything harder for no benefit that I've been able to find. Every example I've found of WebComponents using the shadow DOM seems to show many many lines of weirdly-inverted HTML (templates/slots) and JavaScript, all to achieve what I can do in a few "document.creatElement"s (vanilla JavaScript) that are easier to understand. And using the shadow DOM means my global CSS styles don't apply to what I do there without absurd hacks. I have honestly been looking for a benefit here, but I just don't see it. What am I missing?
- benatkin 4y ago
  I don't like having a bunch of styles fighting each other. It is similar to the !important stuff. In fact I sometimes thought it was better before !important was verboten. It was overused, though. Only the shadow DOM provides some relief from this annoying part of web development.

JoshWVS 4y ago

Woah--I stumbled upon "Hypermedia Systems"[0] from the View Transitions essay linked on this release page. If, like me, you're sympathetic to the htmx philosophy, but not really an expert, it looks like a great read. (And it's beautifully presented, too.) Seems it was discussed a few months ago[1]; I missed it then. [0]: https://hypermedia.systems/ https://hypermedia.systems/ [1]: https://news.ycombinator.com/item?id=34134545 https://news.ycombinator.com/item?id=34134545

jonathan-adly 4y ago

If you are on the fence about using htmx in production. my startup[0] uses it exclusively for our frontend (with like 2 lines of hyperscript. It’s sister library). No complaints and boy, it’s such a fresh breath of increased productivity and still excellent user experience. We still had to build an API anyway for external organizations using our product, but you still skip a ton of unnecessary JS code. 0. GalenAI.co

lenkite 4y ago
Wish htmx supported WASM - ie instead of sending a request to the server, you send the request to the hosted WASM module and render the response. Ideally, one could then use Rust web-frameworks such as Axum on the client side.
powersnail 4y ago
What's the back-end? Do you generate those HTML responses via a normal template engine, or is there some sort of deeper integration with HTMX on the backend?
- jonathan-adly 4y ago
  It’s Django.. request data in, html response out. That’s all what you need :)
  - powersnail 4y ago
    I'm asking because I've sort of done this in the past, and find creating fragments of HTML with Django's template engine a bit awkward. For instance, if I have some sort of utility button, and say I put it in "utility_button.html", a template file. In practice, I might have to supply different actions, or icon names, or colors when the button is generated, which means that each of these potential variable needs to be a template parameter. Adding a class involves some string manipulation magic. On the other hand, on most client-side front end library, when using a template, I can still slap whatever attributes onto the element, or manipulate its classes as an actual list with relative ease, because front end libraries are more or less already a big HTML parser and generator.

schemescape 4y ago

Anyone planning to make a browser with native support for HTMX (instead of a full JavaScript runtime)? I only ask because I kind of wish such a thing existed. I still can’t find a happy medium between no JS and “browser as an entire OS”.

recursivedoubts 4y ago
my hope is that, at some point, the browser developers notice htmx and decide to fold its functionality into HTML itself, which is where most of this stuff belongs

squidsoup 4y ago

Htmx has such an old man yells at cloud vibe. People don't like fat js clients because of "view transitions", they like the developer experience, composability of components, and benefitting from a vibrant ecosystem that is constantly innovating.

mdavidn 4y ago
I despise JS clients because I hate waiting for the entire thing to download and initialize every time I visit a site to make a quick change. Looking at you, Hello Fresh.
- squidsoup 4y ago
  Most popular js frameworks support SSR - it isn't appropriate to use an SPA for a public app like Hello Fresh, that's on them.
zhte415 4y ago
I just like the user experience coupled with a dead simple development experience. Simple CRUD webapps, which is a lot of things, don't need unique user experiences; oftentimes the less unique the better.
adamzochowski 4y ago
Constantly innovating can also be interpreted as 'having no standard'. I had developed sites for 25 years. I still have a corporate site that was developed 20 years ago, and it returns more results, and is faster to render than most of new fangled SPA I seen deployed on servers 20x larger. I do agree with you that SPA (react and its ilk) have cleaner benefit of composability of components, but I would posit that AJAX and component state/props has made for less reliable web. I often find myself in situation where SPAs crash mid way during concert or flight purchase - be it JS error, or network instability. Reloading the page doesn't get SPA to resume where it crashed, but often throws additional errors, saying I am already mid way in checkout (but I can't continue), or invalidating session (but still remembering that my other session was in process of buying a seat, so I can't reselect the seat I wanted. Finally, they are terrible for bookmarking or sharing. So the composability of components, a benefit, came with a need for developer to be extra careful about failure modes, resuming states, bookmarking directly to specific content. Most developers are not careful, and the old html per page model forces different mentality for dealing with failures, and content availability.

seumars 4y ago

What's the consensus on using custom HTML attributes such as "hx-post", "hx-trigger" and so on, which are "invalid" according to the spec? I don't mind prepending data- to custom attributes but it's still a minor nuisance.

mejutoco 4y ago
Data attributes are accepted. From the docs: > It’s worth mentioning that, if you prefer, you can use the data- prefix when using htmx: > <a data-hx-post="/click">Click Me!</a>

smusamashah 4y ago

Why is it slow? For example in https://htmx.org/examples/click-to-edit/ https://htmx.org/examples/click-to-edit/ and https://htmx.org/examples/edit-row/ https://htmx.org/examples/edit-row/ when I click the edit button, there is a noticeable delay between click and appearance of editable boxes. I don't see any network requests being sent.

sli 4y ago
It seems to just be a simulated delay and should probably mention that if that's the case. Running the first example locally does indeed attempt to send a network request when clicking the edit button.
recursivedoubts 4y ago
all the demos use a mock ajax request library (sinon) so we don't have to run a server i intentionally introduced an 200ms delay so that you can see things like request indicators: https://github.com/bigskysoftware/htmx/blob/master/www/static/js/demo.js#L10 https://github.com/bigskysoftware/htmx/blob/master/www/stati...
- smusamashah 4y ago
  May be it's worth adding a note on these pages that you are simulating network by introducing delay.
- robertoandred 4y ago
  Why would there need to be any sort of network request to show edit fields?
  - recursivedoubts 4y ago
    well, if you are using a hypermedia style application then you want to make a hypermedia exchange on an interaction to bring down the hypermedia representation for editing a particular resource

synergy20 4y ago

as an embedded developer, CSR+SPA is the default way to do it these days, my embedded board(with limited resources that can not run python/django/etc) only needs to provide some json data but htmx expects backend spits out html. Not sure if it's possible for htmx to work with haserl or some c-based cgi or even lua-based lightweight web framework, I guess it could, just not popular so nobody did it.

olodus 4y ago
If I am not mistaken, last time I looked at it I think I saw that HTMX has the ability to declare handlers. So that if you instead want to provide Json, one of those handlers could transform/handle it client-side. I think, haven't tried it myself.
neurostimulant 4y ago
Any backend that can spit out html fragments should works. The backend doesn't have to be aware of htmx. Heck, the response doesn't have to be a fragment either because you can just select which part of the response to update the dom with using the hx-select attribute.

leke 4y ago

I'm currently using htmx on my latest project to only change parts of the page that need changing. This is fine, but I am finding some weirdness happening in that design though. For example, if I load a portion with some JS in it, the consecutive times I load it, gives me "already declared variable" errors. I guess this is because the JS stuff is hoisted outside of the area it's called, so when it's recalled, it hasn't been removed with the previous request. My solution has been to use `var` but I guess this is not the best solution and something more fundamentally wrong.

thornewolf 4y ago
Read up on HATEOAS - Hypermedia as the engine of application state. Long story short, don't use J's to store state, use html responses.
arcanemachiner 4y ago
I use `window.someVar = "blah"` instead of `var someVar = "blah"`. It's a dirty hack, but it works around the re-binding issue.

moritzwarhier 4y ago

> Unfortunately for HTML, CSS transitions are only available if you use JavaScript: you have to change elements dynamically in order to trigger the transitions, which “vanilla” HTML can’t do. In practice, this meant that only the cool kids using JavaScript to build SPAs got to use these tools, further cementing the aesthetic superiority of SPAs. I'm sorry if my question is not sufficiently informed, but how does HTMX not "use JavaScript" to trigger animations? Have followed the library and approach for a while and tend to compare it to Alpine, which I find a bit more intuitive. But that's probably exactly because Alpine isn't shy about the fact that you're writing JS in the end. I found such solutions (Alpine) a grrat joy to start working with (e.g. a complex form with nested fields, custom autocomplete...) and a nightmare to extend or generalize. The Chrome transition API is very interesting. Also, there certainly is a place for controlling JS via HTML. But for the risk of sounding inpolite: Having read a couple of posts by htmx team, the "htmx is hypermedia, SPAs were invented because X and are a crutch" style intro starts to feel a little repetitive and dated to me. Every post starts with a bashing of "SPAs", it gets tiresome very quick. SPAs can be simple, they can be complex nightmares. So can HTML-centric "sprinkles of JS" that outgrow their purpose. Also, who are these "cool kids writing SPAs"? It's 2023 and it's irrelevant if you generate your HTML in PHP, JS, Rust or Python: you need abstraction and modularization for large frontends. That's the problem React solves, not just fluffy page transitions.

recursivedoubts 4y ago
what I'm saying there is that CSS Transitions aren't integrated into the normal hypermedia flow of HTML, which is what htmx tries to address we have never said that SPAs are a crutch, our (really, my, there isn't much of a team and I don't speak for anyone else) claim is that SPAs are as popular as they are for advantages that are not inherent to them when compared to hypermedia, and htmx tries to narrow that gap i am sympathetic that people reading the various essays on the htmx website might get worn out by my repetitive beating on hypermedia, but consider that for every repeat reader, there are tens or hundreds of new readers who haven't heard much about or thought much about hypermedia. Repetition is a key to teaching, and I teach, so maybe that influences how I write as well. regarding abstraction and modularization being key to large front ends, I sort of agree to an extent, but I think that at the system level that abstraction can be hypermedia and that the modularization can be done server side of course it always depends on the app, htmx/hypermedia isn't right for everything, etc. etc. as we try to point out in an essay on our site: https://htmx.org/essays/when-to-use-hypermedia/ https://htmx.org/essays/when-to-use-hypermedia/ do I get a little punchy about SPAs at times? Sure, it's the internet after all. I've been fighting for the hypermedia-oriented approach for web development for a decade now, and I've been called "old", "irrelavent", "pointless" and "stupid" many times along the way by SPA fans. There is obviously some conflict between my views on web development and the larger front end world's perspective. But I try to be reasonably balanced about the tradeoffs, even while I think that the SPA approach is dramatically overused today.

JodieBenitez 4y ago

Great release ! I've been thinking about something like "hx-on" for quite a while and I'm glad I'm not the only one.

deleted 4y ago

[deleted]

veidelis 4y ago

What's the use case for Htmx? When would someone want to use this over more tradional approaches?

the_gastropod 4y ago
What do you mean by traditional?
- veidelis 4y ago
  For example, having some Django or RoR render forms and handle submit with a full reload, or another case where client would query some endpoints via JS fetch API and handle the responses that way.
  - recursivedoubts 4y ago
    TLDR: htmx can give you the UX of the later with the simplicity of the former. I would recommend reading the essays on the htmx website for more in-depth discussion: https://htmx.org/essays https://htmx.org/essays