62 ms·
Hotwire: HTML Over The Wire
- Zambyte 2y agoVery cool. It's interesting to see REST become REST again. Also cool to see this come from 37signals. I use Basecamp for a makerspace that I am a part of, and it works quite well for our needs.
- agumonkey 2y agoThere was some news about phoenix, which seems to use similar approach. More on the backend, direct computed view elements sent over websockets.
- cpursley 2y agoLiveView is the OG of this approach: https://phoenixframework.org/blog/phoenix-liveview-1.0-released https://phoenixframework.org/blog/phoenix-liveview-1.0-relea...
- reducesuffering 2y agoIt's insane to me we simultaneously have LiveView, LiveWire, and HotWire, all referring to somewhat similar but different frontends... I guess that's really LiveWire's fault for most recently combining those names, otherwise the other two would be distinct.
- deleted 2y ago[deleted]
- ReverseCold 2y agoSo I guess if you’re looking to start a new frontend framework with the same principal, name it HotView?
- chuckadams 2y agoI recall Java Server Faces had something similar long before. But the JSF architecture was so twisty that it wasn’t ever that practical.
- cientifico 2y agoPhoenix live view is awesome. If you use Phoenix that's the way to go. If you don't want to go to the erlangvm, htmx or hotwire/turbo are the only options I would consider.
- cientifico 2y agoThis is by far the easiest way to do PWA without getting into the rabbit hole of react/Vue/svelte. I used them, and are awesome, don't misunderstand me. While comparing with htmx it feels more developer focus than tech focus, but I believe the race between the two will depend on which one is integrated with your backend framework.
- scosman 2y agoWhat makes this less of a rabbit hole than the alternatives you mention?
- cientifico 2y agoIf you have discipline, probably none. The difference is developer behavior that each framework encourages. While htmx/turbo focus in just couple of helpers and then leave you with the full HTML/JS, in a react ecosystem you end having with 3 party components, and a state management system and build system that will change in 10 months. I don't say it isn't justify and that it have its pros, but it's a rabbit hole in my experience, where you easily end fighting with the framework than focusing on business.
- mardifoufs 2y agoLol react has been more stable than rails.
- gloosx 2y agoyeah, just a couple of them, like 11 core html attributes and 25 additional html attributes, oh, also some events and also a JavaScript API. So easy to remember compared to 7 scary react hooks.
- nosefurhairdo 2y agoHuh, there hasn't been a significant change to our build system for our React application in the last ~5 years. Same is true for state management (redux). Our users include half of fortune 100 companies. Really don't understand the argument that React apps must be rewritten all the time. Most of our code is still old class components that still work in the latest version of React.
- whartung 2y agoHow does this contrast to htmx?
- one-punch 2y agoHotwire integrates with Ruby on Rails. (EDIT: The linked page shows how to integrate Hotwire with Ruby on Rails. See fxn's comment https://news.ycombinator.com/item?id=40555577 https://news.ycombinator.com/item?id=40555577) I had the same question, then watched the video to get the answer.
- fxn 2y agoNo, Hotwire is framework agnostic it is web components and JavaScript, basically. You can Google Hotwire with Django, or Laravel, or many others (https://hotwire.io/frameworks https://hotwire.io/frameworks).
- one-punch 2y agoThanks for the information. The linked page shows only integrating Hotwire with Ruby on Rails, giving me my original impression.
- fxn 2y agoSome links do not have information yet, others do, for example https://hotwire.io/frameworks/laravel https://hotwire.io/frameworks/laravel or https://hotwire.io/frameworks/django https://hotwire.io/frameworks/django.
- nacs 2y ago> framework agnostic Framework agnostic but Ruby-only it seems.
- fxn 2y agoNo.
- 2y ago
- eduction 2y agoI thought “HTML over the wire” was literally what the web has always been about from the very start. Even if you redefine “the wire” to “XHR requests” or “Ajax requests” it’s still weird to treat this as a revolutionary thing since the “X” in XHR and Ajax is “XML” which is just a sibling markup language to HTML. Also, IIRC the original Rails approach to Ajax like 15 years ago or so was sending page partials like this. It feels like we’re going in circles. (I’ve also never been impressed with their “turbo links” which just seem like “we think we can do caching better than the browser makers” and thus dubious. Core Rails seems great but I’m always wary of this stuff at the edges with the extra dollop of hype.)
- nilamo 2y agoMost dynamic websites do not pass html for updates, the communicate with a backend using json (normally) and the frontend figures out what to do with that data. Hotwire is about removing that JavaScript layer, to have a dynamic app without a heavy UI framework.
- eduction 2y agoYes obviously. It wouldn’t have made sense to say “we are going in circles” otherwise!
- leviathan 2y agoWe’ve come almost full circle. I remember using this approach back in 2005 or 2006 by intercepting clicks and appending a parameter that just returned rendered html partials that just .innerHTML replace the main contents.
- deleted 2y ago[deleted]
- ggeorgovassilis 2y agoI'm doing something similar with [1] where pagination (scroll down, click on "Show more") is implemented by requesting the next page as an HTML fragment from the server, loading it into an invisible iframe and once it finished loading, appending it to the current page. [1] https://animasci.com/ https://animasci.com/
- Terretta 2y agoWe used to let people browse and page through photo galleries by preloading the next columns or rows of photos, then on click URL swapping under the static HTML page grid. The order you replace the URLs gives a visual of a paging motion. And for infinite pages, a long forgotten technique: for scrolling or continuing content, you could use "multipart" since the 90s, effectively streaming the additional page content to the user as you got more bytes to send them.
- NelsonMinar 2y agoSometime in the early 2000s, before AJAX was a thing, Adam Rifkin showed me a demo from his startup KnowNow that was achieving the then-mind-blowing thing of a web page updating itself without refreshing. Their trick was to keep the HTTP request open and the server to send occasional updates. More HTML. I don't think they could even manipulate the DOM back then, it may literally have been a page that just never closed the <html> tag.
- eurleif 2y agoWell, you could manipulate the DOM with that technique by sending <script> tags to do so.
- felipemesquita 2y agoI haven’t worked with web apps that need highly interactive frontends, but for our e-commerce stores and internal rails apps turbo and stimulus have really lowered the bar on how much new developers must learn to build a nice to use website.
- renegade-otter 2y agoIf you keep your stack simple, it's never been THAT hard. For example, with one Django project, I spun up whole office-facing tools using the tried and true KnockoutJS - which is kind of in the spirit of HTMX (and so is the still nascent Arrow.JS). Most of the complexity, especially the UI part, has been self-inflicted. The old ways are very much not outdated, and are actually coming back. There is a whole young generation of devs who came into the job at the stupidest possible time, when the industry convinced them that every web application has to be an overcomplicated, insufferable mess.
- brink 2y agoHaving worked with Stimulus, I can safely say it's hot trash and will never use it again. Hotwire was good though.
- bityard 2y agoIt looks like the only way to get a sense for what this does and how it works is to watch videos? If so, blegh. Surprised something like this wouldn't have any example code or demos to look at.
- deleted 2y ago[deleted]
- devjab 2y agoIt does once you dig a little into the documentation, you need to click past the first two pages of self-flattering and you’ll see that it’s mostly just going back to writing old world JavaScript. It’s really very disappointing.
- gedy 2y agoYeah your comment ironically points out the issue (at least I have) with this - you are maintaining state on a server, and so messing with a UI isn't just dealing with local UI state. I'm no JavaScript fanboy, but I'm also not bent on avoiding it at all costs shrug.
- danlugo92 2y agoIt's html over a websocket. What is there to understand?
- Zambyte 2y agoI passed the video to GPT4o through Kagi and then asked "What is Hotwire and how does it work?" and got a satisfactory write-up. I can email it to you if you'd like (I think posting LLM generated text here is frowned upon).
- brainstormer1 2y ago[dead]
- tholman 2y agoHere's the HN conversation from 2020 [1], a little closer to when this came out. - [1] https://news.ycombinator.com/item?id=25507942 https://news.ycombinator.com/item?id=25507942
- dang 2y agoThanks! Macroexpanded: Hotwire: HTML over the Wire - https://news.ycombinator.com/item?id=25507942 https://news.ycombinator.com/item?id=25507942 - Dec 2020 (545 comments) Also related: Why Hotwire Could be the Future of Front-end Dev - https://news.ycombinator.com/item?id=26195969 https://news.ycombinator.com/item?id=26195969 - Feb 2021 (6 comments) Hotwire: A new old way to build web apps - https://news.ycombinator.com/item?id=25942864 https://news.ycombinator.com/item?id=25942864 - Jan 2021 (56 comments)
- Akronymus 2y agoHow does the macroexpansion actually work? Does it automatically grab the relevant links, or do you have to manually get them?
- dang 2y agoIt's sort of in between. I wrote a browser extension (in Arc btw!) that has Emacs-style keyboard shortcuts that let me do things quickly. I look via HN search for related past submissions, open the relevant threads en masse in browser tabs, and build a list of IDs of the ones that are interesting. Then the browser extension sends the list of IDs to the server and gets back formatted text like you see in those lists ("title - link - mm yyyy (n comments)). (This comes up a lot! https://news.ycombinator.com/item?id=35668525 https://news.ycombinator.com/item?id=35668525)
- gkoberger 2y agoFor anyone curious why this is popping up now: Last week, someone posted online how Hey (created by DHH, who also created Hotwire and Rails) is slow when opening a modal: https://x.com/noahflk/status/1795758603577545035 https://x.com/noahflk/status/1795758603577545035 It created a bunch of heated conversation (DHH saying the original video was throttled, other people saying Hotwire is too reliant on the network if a modal needs time to load, people defending Rails/Hotwire, people disagreeing with its approach, etc...). Basically, it's been a big topic on Twitter the past week.
- dewey 2y agoDirect link to DHH's response: https://x.com/dhh/status/1796163806650868149 https://x.com/dhh/status/1796163806650868149
- mardifoufs 2y agoFor context, people have been able to reproduce this with gigabit connections too.
- chuckadams 2y agoI'm checking out Hey and am finding it super zippy on my 600MBit connection, and still pretty usable on "slow 3G". What I'm not impressed by is DHH's snippy response, but having read DHH's outbursts before, neither am I surprised.
- ChrisArchitect 2y agoThx for context!
- deleted 2y ago[deleted]
- inopinatus 2y agoI last looked at Hey about a year ago and it seemed pretty snappy even from the the wrong side of the Pacific. The page architecture impressed me specifically ... things like, applying progressive enhancement to a details/summary/anchor element trifecta for a contextual menu overlay, and if you disabled Javascript or assets didn't load or whatever, it gracefully fell back to loading the menu content in a simple layout. There are a bunch of other well-considered uses of the Web APIs in there. I recall that practically all their client code was unobfuscated and source mapped, too, if you wanna take a look. I'm no fan of DHH and have no interest in boning up on his drama of the week, but it seemed to me that 37signals got it right this time.
- retrac98 2y agoGreat library that’s let down by its documentation. It’s very hard to figure out how to do things in Hotwire without a YouTube tutorial.
- navs 2y agoTheo dug into Hey and Hotwire only a day ago and has a less than flattering take. Not on the concept necessarily but some implementations. https://m.youtube.com/watch?v=5jIwILYjXrU https://m.youtube.com/watch?v=5jIwILYjXrU
- DoesntMatter22 2y agoI think that has more to do with the fact that he is paid for by Vercel than anything. He's mostly been saying negative things about Rails despite not understanding how it works.
- claudiug 2y agoif this is real, that is sad from vercel and sad for all the lunatics that listen to him. we move this yelling crap from politics to programming.
- leerob 2y agoHi, I work at Vercel. We have sponsored some of the videos on his YouTube channel, but this is not one. And FWIW, I don't agree with the approach here.
- DoesntMatter22 2y agoInteresting. The way he said it I thought it was an ongoing arrangement. Idk why he does videos like this because it ends up reflecting poorly on Vercel or other companies he's associated with.
- NorwegianDude 2y agoI agree that that calendar doesn't seem great, and the problems do exist. However, adding tons of latency while saying you're not doing so in order to make fun of someone's work is either malicious or extreme lack of competence. In the video he sets the chrome throttle option to slow 3G, and that adds large restrictions on bandwidth, and a ton of latency. He states that he is not doing so, and that adding latency can't be done in the browser. That is literally what the option does. If you add seconds of latency then requests will take seconds, who would imagine...
- hjiui 2y ago[dead]
- start123 2y agoIs it me or does it look like JSP/ASP all over again?
- koolala 2y agoCan we rip down all the "Don't use Eval() in a web browser" warning signs from 30 years ago yet? F of X FFS
- danlugo92 2y agoThis is the future
- Alifatisk 2y agoI would rather call it an alternative approach to SPA
- chuckadams 2y agoI used to be really negative on Hotwire/Livewire but I now realize it’s a horses-for-courses kind of thing. Sending partials over the wire is a hypermedia thing, and I just don’t write hypermedia apps nowadays. It was htmx and re-reading RTF’s REST paper that got me to this place: I still don’t think hypermedia is inherently the superior architecture, but it is a legit peer among several, and it’s nice to see it keep evolving, even if slowly.
- BillFranklin 2y agoI’ve been using Hotwire for a greenfield project for the last year. The hotwire framework they’ve created is pretty nice but I miss React and will probably choose it for my next project. Not just because it’s decoupled from the backend api. The React/Vue ecosystems have a lot more useful open source components, and you can build faster, more cache friendly front ends, among other benefits. I agree React is more complex, but as with many things if you are gonna need it then it’s great to have started with it.
- buf 2y agoLike what? I also use Hotwire/Stimulus and haven't run into any issues yet. Happy to share links with you on anything I know about.
- BillFranklin 2y ago> Like what? Not sure what this is in response to, sorry. I appreciate there are projects which will hit no limits with the Hotwire/stimulus/turbo mix. I’ve worked on them before and would choose Hotwire when appropriate (eg for government services Hotwire is perfect). The SSR vs CSR debate is quite tired and played out at this point, and doesn’t lend itself to thoughtful threads… While hotwire does make it easier to do SSR with progressive enhancement, for some projects it’s easier for me to just build a single “enhanced” experience with React (for performance, ecosystem, and IME UX).
- big_hacker 2y agoIf a truck uses more gas than a car while going at the same speed, is the truck more gas-friendly?
- chrisvenum 2y agoFor those looking for something similar in PHP/Laravel, I strongly recommend checking out Livewire: https://laravel-livewire.com/ https://laravel-livewire.com/ I still use React for more complex projects but it’s always a breath of fresh air to be able to write everything in Blade/PHP while keeping the reactive UI elements. Edit: Although I have not used, I remember seeing this package which lets you render React/Vue components within Livewire when you need it: https://minglejs.unitedbycode.com/ https://minglejs.unitedbycode.com/ an interesting escape hatch for when you want to pull in existing packages
- mosselman 2y agoTurbo’s morphing is insane. With 2 lines of code: 1 in the model and 1 in the view, you can make any previously static page an instant updating multiplayer experience.
- asshatdev 2y ago[flagged]
- 65 2y agoI've used Hotwire for a few sites. I much prefer it to HTMX since it's significantly easier to implement. My No-React tech stack is Alpine.js, Hotwire, EJS, and Express. Works very nicely for simpler sites. Though for the majority of the sites I make, React wins almost every time since it's way easier to use as a templating and interactivity engine. And Tailwind works a lot better with React.
- carom 2y agoA way less marketed version of this is htmx [1]. It is a single javascript file that enables this functionality. I mostly see people using it with Go backends but I think it is flexible. I have been meaning to try it out for a year or so. 1. https://htmx.org/ https://htmx.org/
- DoesntMatter22 2y agoHTMX probably has the best marketing of any framework. The twitter is very active, it's all over The Primeageon's youtube channel. It's quite popular.
- lolinder 2y agoAt least as far as Hacker News is concerned, I'd call htmx way more marketed. It has hundreds of HN submissions in the past year alone [0] including one that broke 1000 points. Compare that to Hotwire which is sitting at less than 30 submissions in the past year [1], the most popular of which is this one. [0] https://hn.algolia.com/?dateRange=pastYear&prefix=true&query=%22Htmx%22&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=pastYear&prefix=true&query... [1] https://hn.algolia.com/?dateRange=pastYear&prefix=true&query=%22Hotwire%22&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=pastYear&prefix=true&query...
- carom 2y agoI guess it is that HTMX just feels like one guy's side project. Granted he is great at posting. TFA feels like 37 Signals took the same idea and is trying really hard to sell it.
- artur_roszczyk 2y agoLive views in Phoenix were way before both.
- lolinder 2y agoBut not before Intercooler.js (the predecessor to HTMX) or Turbolinks (the predecessor to Hotwire). This is an idea that has been developing for as long as the web itself, I don't think it's important to assign inventorship of the concept as a whole to any one project. They've all been learning from each other and innovating in their own ways.
- ChrisArchitect 2y agoBeen some developments since 2020, this isn't new. Context for why this might be coming up now: https://news.ycombinator.com/item?id=40555541 https://news.ycombinator.com/item?id=40555541
- dangclownwatch 2y ago[flagged]
- lolinder 2y agoFirst off, name calling. Second, I actually thought the same as you but digging into the history I don't see any records of a public release of Hotwire until December of 2020, and HTMX was public in May of that year. Both commit logs and first HN submissions are in agreement on those dates, but if you have other evidence I'm open to it. I'm pretty sure what I was thinking of was actually Turbolinks: https://github.com/turbolinks/turbolinks https://github.com/turbolinks/turbolinks
- madeofpalk 2y agoAnd then yes, Hotwire is just the next iteration of turbolinks.
- deleted 2y ago[deleted]
- lolinder 2y agoAh, yep, that accounts for my sense that I was using this back in 2012! Thanks!
- joshmanders 2y agoHtmx is the successor of Intercooler.js, which is like 10 years old already. https://github.com/bigskysoftware/intercooler-js https://github.com/bigskysoftware/intercooler-js
- lolinder 2y agoAs noted by @madeofpalk [0], Hotwire is the successor of Turbolinks, which dates back to at least 2012 [1]. That said, I'm not particularly interested in litigating who inspired who. Both libraries are neat and have developed in parallel for ten years. That's cool! [0] https://news.ycombinator.com/item?id=40555941 https://news.ycombinator.com/item?id=40555941 [1] https://news.ycombinator.com/item?id=4577169 https://news.ycombinator.com/item?id=4577169
- dopp0 2y agoASP.NET WebForms had an "Ajax component" called UpdatePanel, that was just a div and a HTTP call to rewrite the whole div from server. Seems like the same to me :D
- jrs235 2y agoGlad to see this is getting attention again. But for those that don't know, this is several years old. See https://news.ycombinator.com/item?id=25507942 https://news.ycombinator.com/item?id=25507942
- fofo44 2y agoall my 6 websites are using Hotwaire framework. and I love it
- llmblockchain 2y agoFor what it's worth, Hotwire isn't very interesting. The real magic is in Turbo or Turbolinks (the pre-Turbo version of Turbo). Turbolinks is the HTMX-Boost before HTMX was HTMX.
- josephernest 2y agoWith the same idea but more minimalistic, I have done Swap JS two years ago : https://github.com/josephernest/Swap https://github.com/josephernest/Swap Used it for a few projects it works well !
- gardenhedge 2y agoI must be missing something but React seems more straight-forward than this.
- recursive 2y agoDifferent points of view. To me react seems like the least straight forward way of making a web app I can think of.
- focom 2y agoYou should look at django-unicorn for the python equivalent
- andros 2y agoOr Django LiveView
- olebedev 2y agoHere we go again! I have been using it 15 years ago. I am a user of Hey and what I can say is the UX is dreadful. I am seeing spinner way more than I can handle, really. I assume this proposal is to moving backwards. Instead we would need to sort of data on client and full-body client app, doesn’t matter if it’s for web, ios, android. And the data should be given back to us - users. The problem with that is that services like Hey become a true commodity and doesn’t lock users by keep exclusive access to their data anymore. So it’s to be figured out what is the new business model.
- DoesntMatter22 2y agoIf you dislike it so much why do you still use it? Just curious.
- olebedev 2y agoIt’s too much of a hassle to move from it now, since I have alot on my plate and they don’t support any other GUIs (a classic vendor lock). I have planned it for the second half of this year though.
- bastawhiz 2y agoSo... I'm a paying customer for Hey since it launched. And frankly, if the experience of the Hey webapp is an example of the best of Hotwire, no fucking thanks. On a slow connection, it's bad. Maybe that's the developers not adding loading or error states. Maybe it's just a lot of complexity. Maybe it's bugs in Hey. I don't know, but it's not good. In the face of medium-high latency, stuff behaves in an unpredictable/buggy way. Boxes open with no content. Links don't work like you'd hope. Lots of actions in quick succession don't abort in a way I'd find intuitive. It just feels off. As bad as an SPA might be, this is a step away from UI feeling native and natural, in my opinion.
- graftak 2y agoI understand that hotwire is already an established term but it has hacky connotations and hyper(textlanguage)wire sounds infinitely cooler.
- JodieBenitez 2y agoIn the same vein, I've used Unpoly: https://unpoly.com https://unpoly.com
- deleted 2y ago[deleted]
- nojvek 2y agoFor frontend, one has to decide - am I making a website (informational pages) or an app (interactive widgets) ? For a website, SEO is important hence good ol html server rendering wins. There isn’t much interactivity. For an app, how fast UI responds to user input matters. This is where JavaScript shines because interactive logic lives in the client device. User could be under a tunnel or offline, and a well written app will work. Hey app had some Twitter discussions (can’t find thread), that it slows down to respond to clicks on 3G speeds. Because it had to call the server to load what UI snippet to show to user. Essentially - choose the tech that fixes the best user experience.
- JeremyNT 2y agoIt's perplexing to me that Hotwire isn't more popular. The main documentation site doesn't mention this prominently, but it's basically the canonical way to do this sort of stuff with Rails now, as it's all originally from Basecamp. It may be intentional that it's relatively low key, or broader promotion is at least a non-goal of the project. But if you're still doing anything with jquery - rails or not - you owe it to yourself to look at this as a great replacement, and a very strong competitor to bloated client side frameworks for most webapps. There are also helpers to build webview apps for both IOS and Android too [0]. [0] https://strada.hotwired.dev/ https://strada.hotwired.dev/
- castaigne 2y agoA bit late to the party here, but I’ve used Hotwire for a little while now. Turbo is wonderful and seemingly straightforward, but also has some real hidden gems that aren’t well-documented (a problem which plagues Stimulus as well). Stimulus is also great, but you can’t go into it expecting React. State management can get very tedious. I use Turbo and Stimulus for most interactions in my current project, but I pull in Preact and HTM where I really need them. It’s trivial to have a Stimulus controller mount a Preact component and sync state between them, so it’s all very transparent.
- fs0c13ty00 2y agoI love the idea of Hotwire and I'm already using it in one of my production project. Overall it saved me a lot of time and frustration having to deal with a separate frontend project, and the frustration having to manually manipulate the DOM with JavaScript in traditional MVC project. However I faced some other new frustration, such as when trying to make a dynamic nested form (similar to cocoon gem) but only with hotwire stack (turbo frame/stream). It is also hard to think of each hotwire controller as a component, you might face some problems when trying to do some nesting. I think Hotwire will be a perfect fit if you want a traditional websites with a few dynamic, interactive features. If your website is too much app-like, you should consider switching the frontend part to SPA entirely.