14 ms·
Htmx – high power tools for HTML
- yepthatsreality 6y agoVery cool. Will use this soon in a project.
- jedieaston 6y agoIf you don’t know, this is a rewrite of Intercooler.js without depending on jQuery. It’s awesome!
- vz8 6y agoCan you use hx-swap-oob to update multiple elements with a single call? The haiku is a nice touch!
- recursivedoubts 6y agoyes, you can send down a bunch of content targeting different elements by id on the page
- vz8 6y agoVery nice. Thanks, looking forward to playing with this over the weekend.
- redindian75 6y agoFrom IntercoolerJS website "Work on intercooler 2.0 (renamed to HTMX) has begun. See htmx.org for more information!"
- fastball 6y agoFor similar-goal prior-art, see Unpoly[1]. Also the IETF asks[2] that you please stop using "X-" to prepend your custom HTTP headers[3] [1] https://unpoly.com/tutorial https://unpoly.com/tutorial [2] https://tools.ietf.org/html/rfc6648 https://tools.ietf.org/html/rfc6648 [3] https://htmx.org/reference/#headers https://htmx.org/reference/#headers
- recursivedoubts 6y agoI like unpoly a lot, Henning is a perfect gentleman, but the first check in on intercooler.js was before the first check in on unpoly: https://github.com/bigskysoftware/intercooler-js/graphs/contributors https://github.com/bigskysoftware/intercooler-js/graphs/cont... https://github.com/unpoly/unpoly/graphs/contributors https://github.com/unpoly/unpoly/graphs/contributors I'm happy to change the headers htmx is young enough to get away with it. Would you like to issue a pull request?
- fastball 6y agoFair point – though some might say if you start over in a new repo then you have reset the clock ;). In all honestly though, wasn't trying to imply that this project ripped off Unpoly or anything, just wanted to mention a similar project. Perhaps poor phrasing on my part. As to a PR for the headers – I might just take you up on that!
- recursivedoubts 6y agoit's all good, and please: if there is a better standard for me to follow, now is the time to implement it. You deserve the credit for bringing it to my attention, and the code base is pretty easy to navigate.
- laingc 6y agoI read nothing but good intent in your comment, so this is not me throwing stones, but one comment I would make is that I think using the term "prior art" - coming as it does from patent law - carries an overtone of "I am implying that you might have ripped off someone else's idea". It's clear that this is not what you intended, but I think from the response from the creator, that was the tone that you accidentally conveyed. Just a thought for the future :-).
- benatkin 6y agoI'm not sure about changing the headers. X- is a widely accepted convention. In the RFC also says this: > SHOULD NOT prefix their parameter names with "X-" or similar constructs. It doesn't spell out exactly what would be considered a "similar construct", but I think "HX-" might count as a similar construct. There's no good way to implement the feature you want that would satisfy all reasonable interpretations of that RFC, so switching to "HX-" would be a half-measure. I understood exactly what was meant by X-HX- and I think it's a good design. Still, HX- is shorter and about as intuitive as X-HX- so I think it might still be the way to go, even though IMO that RFC isn't a good enough reason to change it.
- JadeNB 6y agoOn the chance that the authors are here: on https://htmx.org/docs https://htmx.org/docs , there is a link "original web programming model" where the target is (for some reason) surrounded by parentheses, so that it points to the wrong location.
- recursivedoubts 6y agofixed, thanks
- persona 6y agoOn docs fix reporting, there is also a typo on https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/ any element below it in the DOM can use one of three attributes named <template-engine>-temlpate
- recursivedoubts 6y agohello, I'm the creator of htmx (and originally intercooler) I just released 0.0.4, so htmx is still very young, but it's got a decent test suite: https://htmx.org/test/0.0.4/test/ https://htmx.org/test/0.0.4/test/ there is a nice extension mechanism: https://htmx.org/extensions/ https://htmx.org/extensions/ and some very rough docs on how to pull off pure HTML animations: https://htmx.org/examples/animations/ https://htmx.org/examples/animations/ happy to answer questions
- yepthatsreality 6y agoWhat development challenges do you see ahead on the road to v1.0?
- recursivedoubts 6y agoWell, I'd like to buff the test suite out, and I really don't know if I got the web socket API right. Using HTML w/ ajax is natural enough, but using it with web sockets? We'll see. I guess the hardest thing is getting the word out, but thankfully oftenwrong has done that for me. :)
- digitaltrees 6y agoAmazing work. Thanks for pushing it forward. The name is great too.
- mishu2 6y agoThank you for your work, I've been a happy intercooler user for a while now. It's great to see the jquery dependency going away.
- gavinray 6y agoI've heard of Intercooler before and saw htmx on Github trending a few weeks ago. A question about this example: https://htmx.org/examples/inline-validation/ https://htmx.org/examples/inline-validation/ This paradigm revolves around sending validation requests to server-side endpoints, is there any reason to put that load on the server rather than validate it on the page prior to submit with JS? Or scalability issues? Not being antagonistic, genuinely curious because I've not seen inline validation done this way.
- XCSme 6y agoThis is pretty cool. Does it only send data? If yes, I don't really see a clear use-case for it, as you normally either want zero JS and just use plain HTML forms posting or you have a dynamic interface and you use a lot of JS to update data on the page.
- apineda 6y agoWhat else would you send?
- XCSme 6y agoNot to send data, but receive data and update the UI accordingly. I looked a bit through their examples and it seems that they expose a way to update the UI with the response from the AJAX calls, but probably server has to return the entire HTML code?
- recursivedoubts 6y agoyes, responses are expected to be in HTML but you can use the client-side-templates plugin if you want to run responses through a client-side template engine: https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/
- roel_v 6y agoI think they meant 'can you do stuff other than sending data' - other things that you'd use javascript for that is not sending data/ajax. Validation and stuff. I'm writing some extensions in what is essentially a 'local SPA' and I'd love to get rid of the inline onclick handlers and all their crufty syntax (but my last real experience working on the web was 20 years ago so my perspective is probably objectively primitive anyway).
- deleted 6y ago[deleted]
- maddyboo 6y agoVery cool. This seems very useful for lightweight UIs that need a small amount of interactivity, but not enough that a more heavyweight framework like React would make sense. Am I on the right track?
- recursivedoubts 6y agoyou can build a pretty serious app with it the progress bar demo shows how you can implement a UI that would typically be done w/ javascript using pure HTML responses: https://htmx.org/examples/progress-bar/ https://htmx.org/examples/progress-bar/
- deleted 6y ago[deleted]
- winrid 6y agoReminds me of AngularJS... :) Much simpler overall though. I like it.
- bufferoverflow 6y agoIt reminds me more of jQuery. And while I see how it's great for quick prototyping, it's going to be a nightmare in a large project. I really like React, where data and HTML are clearly separate. I don't want to send raw HTML back and forth, I want to send only data.
- winrid 6y agoIt doesn't look like this requires you to send raw HTML back and forth. Also, jQuery did not have this kind of data-in-html syntax...
- k__ 6y agoHow does it compare to intercooler? What's the Accessibility story?
- madeofpalk 6y agoWhat are your Accessibility concerns with this?
- tylerchilds 6y agoA quick skim, the divs with click handlers.
- madeofpalk 6y agoDon’t put click handlers on divs? Shame the docs feature that though.
- coderintherye 6y agoHow much work / code is required in order to make this IE compatible? I ask, since the project is young, it would seem like a good time to make the hard choice to not support IE.
- recursivedoubts 6y agothere are a few areas where I need to check for nulls and i can't use some of the es6 niceties, but it's not too bad the 'revealed' event logic doesn't use an intersection observer because of IE, that's probably the most annoying thing I can think of
- mikeg8 6y agoThis looks awesome! Can’t wait to dive in a little deeper and try it out on some upcoming side projects. Thank you!
- xrd 6y agoHow do you test applications written with Htmx? Does it all need to be ui test harness (running in a browser), or can you unit test components somehow? I'm happy you noted the test coverage for the library itself is reaching your standards. That's a great sign.
- recursivedoubts 6y agoYou can use the same technique I use in my tests: sinon.js has FakeServer that mocks AJAX calls. I think I'd look into a headless chrome setup against my real server if I was doing a large app.
- wenc 6y agoThis looks amazing -- seems like you can accomplish a significant amount of what constitutes front-end work these days with htmx. The examples are compelling: https://htmx.org/examples/ https://htmx.org/examples/ There is a slight deal-breaker for me. Much of the functionality revolves around hx-swap'ing i.e. writing the contents of a response as HTML into/around tags. This requires the server-side to return HTML instead of JSON. From the docs: "Note that when you are using htmx, on the server side you respond with HTML, not JSON. This keeps you firmly within the original web programming model, using Hypertext As The Engine Of Application State without even needing to really understand that concept." I would love to use this with existing REST backends, but most are only able to return JSON. How does one use this for AJAX without rewriting existing backends?
- recursivedoubts 6y agoYou could check out the client side templates extension: https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/
- giancarlostoro 6y agoThis is great, I am definitely considering using this for some of my side projects so I don't spend hours with JS just to display some JSON output as HTML.
- zambal 6y agoAdd tailwind css or another utility class css framework and you can do the whole frontend in html :)
- numlock86 6y agoYes, but you shouldn't use it as a simple drop-in. The minified version via CDN is like 1.7 MB ... at least they mention you should not use it in the docs and instead configure it to your needs.
- gokulkrishh09 6y agoNice!
- dynamite-ready 6y agoThis sounds a lot like Macromedia Cold Fusion, from back in the day, no?
- aabbcc1241 6y agoThis seems encouraging a fair rebalanced on works between the server and the client, looks promising
- woah 6y agoThe example on the front page already hints at the type of bad programming this may encourage. When clicked, the button sends a POST (this seems ok), and then the backend sends new html for the button. The idea of having random snippets of your frontend markup being returned from api servers seems questionable.
- latch 6y agoI'm not sure I get what you're saying? I think you're saying that having html returned from the backend "seems questionable" and is a "type of bad programming". But that can't be right because that's mostly how the web works? Make a request to a server, server returns html. Is your issue that it's partial "random" content? How does that make it worse? It's a tried and true solution. The hamburger menu in amazon.com does just that.
- Thorentis 6y agoI agree that the objection doesn't hold up given how many websites are made, but I think they mean that a REST API shouldn't be returning HTML, which is true. Unfortunately using the replace feature would mean rewriting existing APIs. Or, you could use the client side template feature of htmx which supports rendering JSON into HTML using a templating language: https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/
- recursivedoubts 6y ago> REST API shouldn't be returning HTML, which is true. No, it isn't. REST implies HATEOAS, and JSON isn't a hypertext. Calling JSON APIs REST-ful was always a mistake. http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.html http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.ht...
- inimino 6y ago> a REST API shouldn't be returning HTML Why do you think so? It might interest you to know that Roy Fielding defined REST before JSON was invented.
- iddan 6y agoThe haiku is a nice touch
- midrus 6y agoOne of the problems I see is that now anyone that was using intercooler is using an outdated and quite likely to become unmaintained library and be forced to migrate/rewrite things.
- andybak 6y agoSee above. Intercooler will continue to be maintained.
- BareNakedCoder 6y agoWould have had the same problem if the rewrite was called 2.0 instead of htmx. Hmmm, reminds me of the Angular 1 vs 2+ conumdrum (for which many said renaming would've been better).
- edwinyzh 6y agoYes, I wish the author will offer a smooth upgrade path for the existing intercooler.js users, because my heard wants such a thing to be adopted by people. I like the concept very much!
- uallo 6y agoSimilar projects: https://github.com/stimulusjs/stimulus https://github.com/stimulusjs/stimulus https://github.com/alpinejs/alpine https://github.com/alpinejs/alpine https://github.com/intercoolerjs/intercooler-js https://github.com/intercoolerjs/intercooler-js
- sica07 6y agoYou are comparing apple to oranges :) alpine and stimulus are frameworks (doing all sorts of stuff: css animation, data <-> objects, etc) while htmx is a library focusing solely on ajax. From your list, the only similar project to htmx is intercooler-js, but... htmx is actually the new version of intercooler-js (both projects by the same author).
- uallo 6y ago> htmx is a library focusing solely on ajax htmx supports animations too, and it has extensions to add further functionality. Of course those projects differ in their functional range, but they share the way they work; by adding attributes to HTML.
- sica07 6y agoYes, you are right. My response was based on the presentation from the first page: "htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes". In the meantime I read the documentation and, as you just said, it supports animations and much more.
- mkurz 6y agohttps://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax and https://github.com/turbolinks/turbolinks https://github.com/turbolinks/turbolinks
- tannhaeuser 6y agoI like it, though I guess the "implementation" for what JavaScript gets executed on a given custom HTML attribute set is "hardcoded" in the htmx lib. With SGML, OTOH, you can have your own replacement content (JavaScript, other HTML, or whatever; it's just syntactical replacement). Would be an interesting experiment to implement the htmx vocabulary on top of SGML.
- sam_goody 6y agoThe js via html tags is something I see also in Alpine.js, which has gotten a lot of press lately. Is this an alternative, or is each really its own niche (and you might use both)? Is there a comparison? Edit: It seems that htmx is almost entirely around AJAX, and Alpine around a) binding element data to objects and b) css & animations (such as hiding a popup). It would make a lot of sense to use them together (and the hx- even complements the x-). Is that correct?
- wysewun 6y agoYeah some kind of bridge between the two would be great. They both seem to have different areas of specialization
- rk9619090 6y agork9619090@gmail.com
- stephenr 6y agoI like the theory of this (that is: using XHR to update parts of a page with the result of requests) I'm immediately turned off by the demo though, because it's relying on a 'fake http server' in the client side JS. If your toy examples can't be run against a real server, I have zero expectation of it working well for non-trivial examples.
- matsemann 6y ago"Can't be run against a real server" sounds like a straw man you just made up? I'm astonished about how much you believe you can ascertain based on this... It's a demo, mocking a server is completely fine and also allow them to show it working without relying on other things. I mean, this is actually even better. You can expand the mock-server down below and see what's happening.
- stephenr 6y agoWould you buy a car if when you took it for a test drive, it had no engine but instead the salesman sat next to you and made "vrrm vrrm" noises for 20 minutes?
- chewmieser 6y agoAre you purchasing this JS library? Does it not make sense to reduce server load in order to reduce the cost of demonstrating a free product?
- stephenr 6y agoUsing the library is an investment of time, and time is worth money, so yes. Reducing server load makes sense. Use a CDN or proxy, and aggressively cache responses. Adding an entirely faked backend response, so that the examples don't actually show the real traffic it would generate is both adding complexity to the demo, and potentially giving a misleading picture of how usable the library is: for all we know, it's too slow to use as the examples show, because a real HTTP request to a backend is going to be slower than a javascript function returning a pre-determined string.
- abhiminator 6y agoSlightly off-topic, but here's another fine example of how appending 'x' makes almost any name look cool.
- ksec 6y agoI wish some of this ( or All of it ) are implemented inside browser and no longer need any Javascript to function. Web App still has its place. But 90% of the web are Web Pages or Interactive Web Page, not Apps. While Every time I point this out there will be someone stating Gmail as an example of Web Apps, but we will soon have Hey.com to prove it doesn't need to be that way. However browser vendors and standards body ( Which really is just browser vendors ) has far too much interest in making the Web or Web Browser as another OS / Platform. Rather than optimising for the 90% of our current use case.
- the_other 6y agoApart from Apple who stand to gain the most from killing off web apps. And Google who are busy trying to make the web redundant (with AMP and much of their other stack). It's actually web app developers doing the most to push the web in the direction of web apps.
- eitland 6y agoI've been mentioning this together with a very slimmed down html5 for a while now: - make something close to an html5 equivalent to asm.js: remove all ambiguous variants, everything we know is slow. - "ban" all Javascript except some small pre-defined libraries like this. - make a catchy name (html-core? web-core?) and a validator for it. Call it a standard. It will be fast in all browsers, maybe really fast in browsers that care to optimize for it. If it becomes a thing we can create new simpler pure web browsers (as opposed to todays application platforms that we will then start calling old or legacy html :-)
- tangue 6y agoI wish Intercooler and htmx were more popular. But I think that practical examples, copy and pastable code, youtube tuts are keys for a library to succeed. Think about php manual, react... There's often no need for some websites to bring big frameworks but they're well documented. That's the new nobody ever got fired for buying IBM.
- apolymath 6y agoI'm a proponent of the natural web, where the focus of web development lies with W3C compliant HTML & CSS sprinkled with very small amounts of JavaScript (if necessary). Any JS frameworks that requires the user to modify their HTML to include non-W3C complient HTML attributes is a very poor architectural decision and should be avoided. Such frameworks include Angular. Unfortunately, your framework also falls into this category.
- recursivedoubts 6y agoyou can use data- prefixes if you like