9 ms·
Hypermedia Systems
- myth_drannon 2y agoI moved away from the front-end/React world, but until a couple of years ago, Svelte was the darling and the future of F/E development and now it's htmx. I don't want to start another framework flamewar but was it something in particular that people stopped talking about it?
- vga805 2y agoSvelte is great, htmx is great. I don't think the right way to think about it is that one of them is _the_ future of F/E development. One might be getting more attention at the moment but they are both (along with others) useful tools to have in the belt depending on the use case. I recently took over a flask web app. Using htmx with it to get a more snappier SPA feel in certain places was a true joy. Will I use it on a greenfield highly interactive webapp? I'm not sure yet. But it's been nice to discover a new tool that worked really well in a recent project I've taken over. The experience was a really good one so I'm not surprised it's been getting attention lately.
- MisterTw22312 2y agoHypes come and go. They rarely correlate to the real world usage. Spring, VueJS and Angular are huge, much bigger than HTMX will ever be, but nobody is raving about them. Svelte is still growing. Nothing has happened. React ecosystem is so full of commerce that there're always many voice talking about React. I often think that people praising HTMX are comparing it to React, which is by far the worst of all SPA frameworks. SvelteKit on the other hand is such a succinct yet powerfull all-in-one framework that HTMX (with the required backend with routing and template) appears clunky compared against it. But as I said, most people coming from React and I fully understand why HTMX appears as such a relief. Because it is in those cases.
- rogerclark 2y agohtmx itself is not the future of anything. Businesses are not using htmx to make money and nobody is hiring for htmx. It's an ideological technology rather than a practical one. Maybe it'll inspire something that will turn out to be the future of frontend, but it won't be htmx as it is now.
- recursivedoubts 2y agoyeah, well how can you explain the fact that i've made $37 today selling htmx 2.0 on floppies: https://swag.htmx.org/products/floppy https://swag.htmx.org/products/floppy check mate, roger
- c-cube 2y ago> nobody is hiring for htmx. It's an ideological technology rather than a practical one. Nobody is "hiring for" json either, or for git. Yet they are in incredibly wide use. The thing is, htmx isn't "the front-end solution" React and co are selling. It's a new component that can be added to any classic/boring server-side stack to help it do more. These stacks are very practical, not "ideological" (lol), they made the web the powerhouse it is today. If anything, the audience of frontend frameworks is Javascript/front-end developers; the audience of htmx includes anyone who can glue together some html and a http server. People who have been using java, or python with django, or C++, or rust, or OCaml on the backend. That's a lot of people even if they're not explicitly hired based on whether they have learned the docs of htmx.
- antihero 2y agoI sort of want to check this out but as someone who’s not really felt difficulty using react or a bundler I’m still not sure if it would be useful. How are the static types with something like HTMX?
- hipadev23 2y ago> How are the static types I think you may be misunderstanding what htmx does
- antihero 2y agoSurely there’s data involved at some point that needs to have a shape?
- yawaramin 2y agohtmx is a JavaScript library which interprets a set of HTML attributes and JavaScript events. It doesn't have anything to do with static typing. However, it's fairly easy to add a statically-typed layer on top of it eg https://github.com/yawaramin/dream-html https://github.com/yawaramin/dream-html
- antihero 2y agoThe events have types though, and if you’re pulling data dim the server that also has in theory a type.
- yawaramin 2y agoSure, but htmx doesn't have any opinion that those types should be statically checked. Anyone diligent enough can try to enforce it with enough work, but the juice may not be worth the squeeze.
- pietz 2y agoHTMX is not perfect and there are many situations when you probably don't want to use it, but I think it should be considered the default answer to the question: What framework should I learn to build a dynamic frontend? At the moment the answer to that question is "react" and while react can be cool (I've heard) it has developed into a complex world that requires quite some time to master. Even intuitive JS frameworks like Svelte have been getting a lot bigger in order to be more feature complete. HTMX is the Pareto answer to building dynamic frontends. It will be great for 80% of all projects that require interactivity while doing that job in 20% of the complexity that react would bring.
- tipiirai 2y agoIs HTMX a legit solution for single-page applications? Feels like you just move the complexity to the server side. For example, the server side code for a simple TODO app is a massive programming project as seen in this repository: https://github.com/guilycst/go-htmx-todo-list/blob/main/internal/adapters/handlers/htmx/templates/list_item.html https://github.com/guilycst/go-htmx-todo-list/blob/main/inte...
- ungamedplayer 2y agoI consider moving the complexity to server to be a net win. Never trust the client to do the right thing. More importantly, quite often the complexity is duplicated for both front end and back end.
- tengbretson 2y agoNo one appreciates this tide reversal back towards hateoas principles and semantic HTML more than me, but why does it always come with prescriptions to adopt some new tech? You can implement all this stuff using literally any framework from the past 15 years if you want.
- djeastm 2y ago>You can implement all this stuff using literally any framework from the past 15 years if you want. Do you want to do that? I'd rather use what other people have done
- yawaramin 2y agoYes, and htmx is basically intercooler.js with jQuery ripped out and some attributes renamed. Intercooler.js is one of these 'framework[s] from the past 15 years' that you referred to.
- jph00 2y agoThe unique and very special aspect of HTMX's approach is that it changes just 4 things in browser behavior (list from the Hypermedia book): - Any element should be able to make HTTP requests - Any event should be able to trigger an HTTP request - Any HTTP Action should be available - Any place on the page should be replaceable The default behavior of browsers (without HTMX) is that only A and FORM tags can make requests, only GET (A,FORM) and POST (FORM) HTTP actions are available, only click can trigger a request, and only the full can be replaced. By changing these 4 things, it opens up a huge range of possibilities, but requires learning very few new concepts. And it also lets you work in whatever language you're most comfortable with -- you don't generally have to use JS (e.g very useful for data scientists, who generally know python).
- Sephr 2y agoThe changes you're describing are already here in standard HTML + JS. Every element can be replaced with custom Web Components that can cause requests. Content can be partially displayed with just a click, tap, keypress, etc. and it doesn't even require scripting! There are over 200 extant discrete methods that can be used to send network requests in web applications running in modern browsers.
- rangga030 2y ago[flagged]
- deleted 2y ago[deleted]
- ChrisArchitect 2y agoSome previous discussion including comments from the authors about the book project this was supposed to be: https://news.ycombinator.com/item?id=34134545 https://news.ycombinator.com/item?id=34134545
- recursivedoubts 2y agohello hn, i'm one of the authors of hypermedia systems this is a book about how hypermedia systems work in general, and how htmx (augmenting the standard web hypermedia system) and hyperview (a novel mobile hypermedia) work specifically it's available free online, or for purchase via kindle or hardcover hope people find it useful
- netghost 2y agoThis is the first time I had heard of hyperview, but it seems like an interesting approach for some mobile apps. I really appreciated the chapters on it, thank you!
- recursivedoubts 2y agoIt's a really great library, allowing you to take advantage of native mobile features while keeping the deployment model of web applications. Technically, it's a much bigger achievement than htmx, in that Adam Stepinski, the creator, had to create not only a hypermedia format but also a hypermedia client, which I've come to understand is the really hard part of creating a hypermedia system: https://htmx.org/essays/hypermedia-clients/ https://htmx.org/essays/hypermedia-clients/
- tb_data_apiary 2y agoI found Hypermedia Systems to be useful. Bought the hard copy as support/thank you to the authors, but the entire book is free online at hypermedia.systems. The documentation & essays on htmx.org further explain what you see in the book. htmx is a straightforward, simple-to-implement javascript library that brings HATEOAS to the top of your development mindset. You can disagree with the HATEOAS philosophy, but the reasoning and purpose of the approach is clearly and professionally explained by the authors. Yes, the gorilla marketing on x.com may rub some the wrong way, but frankly, it's fun. Humor and a useful product, with a deep rationale & good documentation, are wins in my book.
- dgb23 2y agoI love how you misspelled it as „gorilla marketing“. That’s exactly the kind of humor I‘ve seen on the author‘s social media posts.
- bpiroman 2y agoThis has been one of the best books I've read about web development!
- stevoski 2y agoI enjoyed reading this book. It inspired me to simplify some things in the app I currently work on - and from which I earn my income.
- hrnnnnnn 2y agoIn between being laid off and recently finding a new job recently, I worked my way through this book and built a website using htmx. It was such a pleasant experience compared to the frontend work I'd been doing in react. I never felt like htmx got in the way, it just worked and I almost never needed to think about it. I spent all my time solving problems and learning CSS. Thanks for writing the book and making it free!
- recursivedoubts 2y ago:) i'm glad you found it useful
- munhitsu 2y agoExactly, htmx is such a pleasure to work with
- DrDroop 2y agoWhat are you gonna do if you want to give a user the option to display the same search result in a html table and a map drawn on a canvas element, or maybe some info viz thing like a chart? No htmx fanboy has a nice solution for this. Im fine with making hyper media part of the synthesis but ignoring features that you have for free with modern hybrid ssr spa is not helping.
- biftek 2y agoNo one is stopping you from still having a JSON API if your hypothetical use case requires it. The Accept header is there for a reason
- MisterTw22312 2y agoThis is doable, but for complex and component heavy UIs with much JS functionality and client-side-state HTMX is probably not the ideal choice. But for many other use-cases it is. It's good for probably 70% of the use-cases, the other 30% are for SPAs.
- jdpage 2y agoI'm assuming that you're referring to the fact that if you get the data as JSON from the server side, you can use it to render out your multiple visualisations. If this is not what you're getting at, my apologies. If you send the HTML table over the wire, you can use it as the datasource for the other visualisations, same as you would with JSON. You can extend it with `data-` attributes if necessary to get some extra machine-readable information in there, but I have not needed to do that yet. On the application I'm currently working on, we do this and then have a listener on the htmx event to turn the table into a d3.js graph. It works pretty well, and has the advantage that if someone is using our application with JavaScript turned off, they still get the table with all the data.
- DrDroop 2y agoNice, what if I have a 3D model and I want to show extra info in a html div about a vertex, edge, face or object that I have selected?
- BiteCode_dev 2y agoHTMX doc is good as a reference, but not as a tutorial. This book is the missing tutorial, and it's been very useful to me. It even lead to the "A little taste of HTMX" series (https://www.bitecode.dev/p/a-little-taste-of-htmx-part-1 https://www.bitecode.dev/p/a-little-taste-of-htmx-part-1). After a year of using HTMX, I really like it and would encourage everybody to give it a try. It's nice for: - internal tools - midly dynamic websites It's not great for any web page you stay a long time on mobile on, though. I made a web app with it, and on my phone, you can't handle the fact the browser plays against you if you stay a long time with a tab open and goes in and out of the app. You really need a lot of control in JS for that. Also: don't try to avoid JS using it. It's a mistake many people do, and that's not how you get the best out of it. I regularly sparkle a little vanilla js or alpine in my htmx websites to make them nicer. And in some cases, I even have one lone page that loads a full vue/react because that particular section needs to be way more dynamic. It's not an XOR. You have now a whole spectrum of how dynamic and how much work you want to put in. Sometimes, I don't write JS at all, but it's not a requirement.
- dlisboa 2y agoCan you expand on it not being great for sites with long sessions? Why does that play into it at all, wouldn’t the tab just sit there and do nothing? Do you mean if you need interactivity when the user goes in and out of the page?
- dietr1ch 2y agoHe might be referring to the problem that URLs are not enough to get to a certain state, which you might run into when trying to share a specific view or when your browser heavily unloads your tab. I found this to be the biggest issue when building my webpage, I wanted to have a link like /blog/foo, but what exists out there is just / and the documents at /blog and /blog/foo are just the small fragments that get loaded once you click your way through / Ultimately I hacked around it by adding some js to every file beyond /, which redirected to / with some anchor, and having / restore the state through the anchor, but it doesn't look the same as regular links into a website (/#blog-foo vs /blog/foo)
- openrisk 2y agoFeels like a missed opportunity that the online version of the book isnt a demo of hypermedia in itself? Maybe a serious student of htmx could (as a learning exercise) transcribe the book from asciidoc into htmx? :-) Besides technical merit [1] in this era of tech hypes, manias and virality it helps to engineer some gee-wow moments... 2 cents. [1] (that htmx and friends definitely have, reminding us once again that "any fool can make something complicated but it takes a genius to make it simple")
- karmarepellent 2y agoWhen I look into the website source of the book I just see static HTML and CSS as well as a few media queries. Why would you want to use htmx to serve a completely static website?
- openrisk 2y agoBecause many usage examples could be "live" as you go through the document learning about htmx functionality. Seeing is believing. The very same htmx-enhanced html pages deployed statically would (presumably) fall back to something still readable. Ofcourse there might be valid reasons to choose to deploy statically using adoc (reusing for pdf, minimal maintenance etc.) but my point is about maximizing the impact.
- djeastm 2y ago>many usage examples could be "live" as you go through the document learning about htmx functionality The examples at htmx.org itself are like this (e.g. https://htmx.org/examples/click-to-edit/ https://htmx.org/examples/click-to-edit/)