8 ms·
Why you should choose HTMX for your next web-based side project (2024)
- Finnucane 1y ago“ This feels better to the user because changes feel faster” This is debatable. Plenty of js heavy websites feel slow and clunky.
- flemhans 1y agoAgreed, I'm always relieved to visit sites made the "old" way because they are fast.
- _g0wg 1y agoI'm toying around with HTMX for my website. It's going to be sort of a wiki but a little different; the public exports from my internal knowledgebase with some extra crap mixed in. I have lots of notes of varying types and formats. Org-mode files are all pretty standard, but there's like 3 different Markdowns and an untold number of randomly-formatted .TXT files. I want to generate their webpages on-the-fly and not have to worry about exporting it. One of the "crap mixed in" things I want is to integrate parts of a gitweb-like interface into the notes. I reference repos and commits regularly in my notes. Would be neat to mouse-over them and get a little popup with basic info about it. I also like that the author refers to themselves as a Technomancer. Personally I'm an metamagical artificer. I love meeting fellow adventurers.
- chistev 1y agoIf it is too much of a pain with vanilla js, just use Svelte
- ranger_danger 1y agoI can't believe they still don't have a way to parse JSON responses automatically. If you combine e.g. hx-post with hx-target, then it will put the text from the response into the target selector... but there is no "hx-source" to select what part of the response to use. I'd really love to be able to set e.g. hx-source="somejsonfield" instead of having to manually handle the response with a custom function that parses/error checks the json and then sets the selector's text to the value of a json key. It could really save a lot of boilerplate code IMO.
- philipswood 1y agoThe philosophy of HTMX is not to send JSON, but HTML fragments.
- majorchord 1y agoThey didn't mention sending JSON though... and you can absolutely return HTML fragments in a JSON response.
- ncruces 1y agoBut why?
- majorchord 1y agoFetching data from APIs I have no control over, or ones that serve multiple purposes and use a single response format
- philipswood 1y agoPersonally, I wouldn't consider HTMX to be a good fit for those scenarios. Obviously you _could_, and it might even work well, but I think that's using the tool against its grain.
- ncruces 1y agoHTMX uses HTML snippets over the wire to replace HTML elements on the client. It's not supposed to grow to support every use case you can imagine. If you're calling APIs that you have no control over, you do so on your server. That's the entire point of HTMX: the minimal necessary addition to browsers/HTML to allow HTML REST APIs to update pages without full page loads.
- kemayo 1y agoI guess I could see it for decoupling your need to control the API you're using. The case where you have an existing API, whether your own or someone else's, and just want to get a new frontend hooked up to it.
- hungryhobbit 1y agoHTMX seems like a solution in search of a problem.
- krackers 1y agoThat should be the tagline for their next tshirt~ https://swag.htmx.org/en-usd/collections/htmx-sucks https://swag.htmx.org/en-usd/collections/htmx-sucks
- nine_k 1y agoHTMX is a solution of a problem like the following: how to add small bits of server-based interactivity to an otherwise static HTML page? One way would be to go with React, Nest.js, setting up SSR and hydration of just the right fragments, etc. Another would be to take your existing static HTML page, and add very few bits in a specific place. An easy example: a "like" button + counter of "likes" under a blog post. If you need a complex SPA UI, you need a different tool.
- jfengel 1y agoSo you're talking about a page where the results are generated according to what the user asks for at the request time, but doesn't otherwise need to change. If it were a blog, or a corporate info page, I'd rather use a CMS. That way I don't write HTML at all. It would just hand me minimal interactivity. If it were a shopping site, I'd probably want more interaction than just a single "like" button. I'd want to filter results, sort them, edit a shopping cart, etc. It doesn't sound appropriate for visualization. It might be useful for a dashboard, but the more people expect to interact with the dashboard, the more likely it'll tip over into SPA territory. I'm sure there's a niche, but it feels kind of narrow. It's complicated enough to require programming, but not complicated enough to require an SPA.
- recursivedoubts 1y agoYep. Problems like this: https://htmx.org/essays/a-real-world-react-to-htmx-port/ https://htmx.org/essays/a-real-world-react-to-htmx-port/
- lvl155 1y agoAt what point are we going to say browsers with JS is outdated and painful? Every few months there’s some new framework. I think it stems from the fact that we refuse to change the browser. HTML was nice but all these solutions to make it modern are…ugly. And don’t get me started on JS. I just want an elegant solution that’s intuitive and built for modern applications.
- bnchrch 1y agoI think your suffering from the same thing that makes 2014 feel like 5 years ago when its over a decade ago. The framework landscape has remained relatively entrenched in React since 2016. Sure theres a few new ones time to time but nothings ever come close to unseating it in the same way it took over from Angular. (Yes you could argue Nextjs but thats just react with a backend bolted to it)
- ChadNauseam 1y agoMany web developers make applications that are expected to work on every platform, every screen size, load instantly for new users, sync user state between every device instantly, and work offline (in some cases). All this takes place in an execution environment that perfectly sandboxes it, allowing users to download and run any application without any fear of viruses. Yes, the stack is complicated, but it's a complicated problem. The fact that people are making libraries to make web development simpler... well, no platform other than the web has even attempted to achieve everything I've listed, so we don't really have a point of comparison.
- satvikpendem 1y agoYou might be interested in this: https://docs.google.com/document/u/0/d/1peUSMsvFGvqD5yKh3GprskLC3KVdAlLGOsK6gFoEOD0/mobilebasic?resourcekey=0-bPajpoo9IBZpG__-uCBE6w&pli=1#heading=h.34a91yqebirw https://docs.google.com/document/u/0/d/1peUSMsvFGvqD5yKh3Gpr... It's by the Flutter team lead talking about how with WASM we can redo the web stack by eschewing HTML, CSS, and JS entirely.
- xdfgh1112 1y agoThat is more or less how flutter works on the web, right?
- tekkk 1y agoI got a wave of shudder reading the acronym "HAM stack". Yugh. MEAN, MERN, RERN–once hyped up hot air which now sounds so dated and hackneyed. It's cool to be excited about tech but if your main selling point is building "faster and cheaper", I don't know if picking up a minimalistic framework you know nothing about is faster than just re-using your trusty boilerplate. Be it React or Svelte or whatever. With serverless backend if you want to keep costs down. Although a server from Hetzner isn't that expensive and you can host multiple APIs there.
- tacker2000 1y agoThe problem is not the server cost, the problem is maintaining the (multiple) APIs altogether.
- wavemode 1y agocute stack names have gone downhill since LAMP
- mekster 1y agoSince when did LAMP go down? Maybe only Apache is getting less popular but still has no problem.
- purerandomness 1y ago> I don't know if picking up a minimalistic framework you know nothing about is faster That's the whole point of HTMX: Going back to what works: trusty old HTML attributes, but giving them intuitive interactions. Instead of learning the microframework du jour, you just add some attributes into your HTML templates, and get your desired result.
- cjs_ac 1y agoHTMX sets up an underlying network traffic pattern: 1. The user interacts with the page. 2. The page sends a request to the server. 3. The server returns one response to the client, containing HTML, which the client inserts into the page. 4. (Optional) If the response includes references to other resources, like images or fonts, the client makes more requests for these. The consequence of the 'one request, one response' thing is that the whole thing is fast. All the HTML arrives in one go. None of this request-one-thing-then-run-some-JS-on-the-client-to-decide-whether-to-request-another-thing nonsense that you can watch happening in real time that happens in an alleged productivity tool I have to use at my day job.
- cyanydeez 1y agoso as long as you dont expect to scale, it works? Is the connection atleast long lived?
- sgt 1y agoHtmx can scale. It's very basic and Htmx isn't the only technology to use that approach.
- uh_uh 1y agoIt cannot scale because it doesn't have a solution for reusable components. That's why I have abandoned it. Frameworks like React solve this in a much saner way.
- renerick 1y agoReusable components are prerogative of the templating system, such as React, or Vue, or server side templates that the framework of your choice uses. Htmx works with already rendered HTML fragments from the back end and doesn't do templating on its own, so there's simply no room for it to "solve" reusable components
- 1y ago
- rapnie 1y agoI recently found Datastar [0], another hypermedia project. It was originally inspired by htmx, but they are fully on their own (hypermedia) course. According to the devs, who had a bunch of discussions with maintainers of htmx, the htmx project considers itself finished and no new features forthcoming. It is laudible, a project considering itself complete. Datastar considers its library v1.0 release [1] to be complete, offering a core hypermedia API, while all else consists of optional plugins. The devs have a hot take wrt htmx in their release announcement: > While it’s going to be a very hot take, I think there is zero reason to use htmx going forward. We are smaller, faster and more future proof. In my opinion htmx is now a deprecated approach but Datastar would not exist but for the work of Carson and the surrounding team. When you think of adopting htmx, it may be worth making a comparison to Datastar as well. [0] https://data-star.dev/ https://data-star.dev/ [1] https://data-star.dev/essays/v1_and_beyond https://data-star.dev/essays/v1_and_beyond
- AndrewKemendo 1y agoConsidering most of my side projects are web based and I loathe JS and prefer MPA patterns, this is very intriguing. I admit I haven’t been keeping up with HTMX or new web frameworks. Anyone have any examples that are noteworthy?
- zero_shift 1y agoAs I mentioned in a comment above, I've seen a few commercial projects attempted. But I'm hesitant to recommend HTMX, all three of them were failures (and for technical reasons not business ones)
- recursivedoubts 1y agoWould you be willing to write an essay on why they failed? I'd be happy to host it here: https://htmx.org/essays/#on-the-other-hand https://htmx.org/essays/#on-the-other-hand
- deleted 1y ago[deleted]
- librasteve 1y agogreat to see yet another H-stack so far I got HARM (Rust), HARC (Raku) and now HAM (F#) along with Fast HTML / htpy (Python) and GOTHH (Go) seriously, it is very good news that HTMX has uncoupled web development from the server side language choice now there is a blossoming of many server side stacks to fill this new opportunity I wrote https://harcstack.org https://harcstack.org because Raku is the natural successor to perl and PHP for web development due to its facility with text processing and multi-paradigm chops
- manchmalscott 1y agoPhoenix LiveView also solves this. One request sends a lightweight event message over web socket, and the web server responds with only the new html (or the new content to insert into specific places in the template).
- eric-p7 1y agoThis seems like a good place to plug my own lightweight, compilation-free library that adds reactivity and local styles to native web components: https://vorticode.github.io/solarite https://vorticode.github.io/solarite
- wibbily 1y agoInteresting. It seems like an easy way to get JS to interact with HTML bits on the client side (if I understand it correctly). Maybe it could be useful alongside HTMX even: client-side HTML manipulation for simple things and server-side HTML hydration and rendering for complex things.
- eric-p7 1y agoI haven't tried it, but it should work so long as you don't use htmx to replace the parts of the components being modified by the reactivity.
- wibbily 1y agoI loooooooove HTMX. Most of the sites I build are small in scope and requirements. Using HTMX gives me a way to add a little tiny bit of interactivity at almost no cost - same templates and HTML and shit as a MPA but magically delivered as a SPA. Plus it can gracefully degrade into a normal website, which is good for everyone.