What I think is even more significant than Hey’s backend stack is its _frontend_ stack. There’s no complex JavaScript framework; it’s all server side rendered HTML with a few touches of lightweight JS (mostly Turbolinks and StimulusJS, afaik) on the client to add basic interactivity. And it feels just as fast—if not faster—than any other modern, well-built web app.
It goes to show that libraries like React and Vue are _not_ necessary to build smooth, modern, and fully-featured web interfaces.
Edit: removed mention of Angular because, yes, it’s a framework, not a view library.
It depends on how much data is centralized. If creating a new email round trips to the server to render in the next email list page, it may feel instant on a fast connection. With a SPA framework, it could add it to the local list of emails and push to the server in the background, so it would transition instantly regardless of connectivity. It would also work offline. If you are doing all business logic on the server side anyway, then yeah SPAs vs a server is not much different. But there is a whole class of problem that the server rendering cannot solve. Most email clients work offline and have an outbox. With a SPA you could have the web and mobile apps have the same exact code and support offline. With their setup, you have to build a native (or at least separate) app from the web app. This decision matters a lot when you’re making an app that should work everywhere, online and offline, with the exact same code.
> With a SPA framework, it could add it to the local list of emails and push to the server in the background, so it would transition instantly regardless of connectivity.
With an SPA, it could be built to do this. But most SPAs aren't developed this way.
In virtually every implementation, every time you change pages, the app re-downloads everything it needs for that route. Click on an article and then go back to the feed? Every time you will see a blank feed for about 500ms and only then do the articles stream in.
You can say "well it doesn't have to be this way" or "this is just an example". But the reality is that it usually is this way. This real world example is a good representation of how most SPAs are built, and they lack the type of functionality you're describing. They instead end up creating an experience that poorly emulates server side rendering, since now many page changes end up with a blank page or a loading indicator before the data arrives in a subsequent request.
I don't know about you, but I'd rather wait 250ms once and then have the page arrive fully rendered over a transition that takes 2ms and then 200-400ms of multiple requests finishing and the page popping into place. The latter is really annoying, yet it's the experience most SPAs give you.
You’re also still paying a performance penalty for interacting with the virtual DOM in react. It’s not like react is just more complex to develop on, it’s also a noticeably slower experience in some cases (looking at you, Reddit.)
I’m also not completely convinced that the one-codebase ethos actually results in that much more efficiency, particularly given that one codebase is JavaScript. I’m sure there is a gain, but I don’t know that it completely offsets the costs of being so tightly bound to the JS community, but that could just be my experience
Turbolinks is a full front-end framework. It just makes you manage the DOM diffing yourself by annotating nodes with various data attributes so that they are replaced, persisted and cached properly as navigation occurs.
It might be smaller or faster than other frameworks, but it definitely has much of the complexity and pitfalls of its brethren.
Hrmmm... we have very different experiences with Turbolinks. Maybe older versions were more like that, but v5 is definitely not. Turbolinks doesn't look at the page at a node level, it replaces the <body> tag outright for each visit. You may want to turn Turbolinks off for a specific link, or make a DOM element that holds some sort of JS-driven state permanent across page loads, but there's really not much you _can_ do on a node level and the times you do use those things are certainly the exception, not the rule.
It seems to work quite well for me, so from my perspective, it's fine.Opening an email and fully loading that whole page takes less than 400ms for me, with he first meaningful pain around 200ms.Even on slow 3g throttling its faster than loading gmail.
And yet it actually works right? In many parts of the world I was not able to load GMail, because the first load is just too much. I take Hey approach any day as a user.
Amusingly, the comment right about yours contradicts this: saying HEY does not feel fast, and a tuned React SPA would be faster.
I would say that there's been a pendulum swing back towards no frameworks, no bloat. But the corollary (important to note) is: this assumes competence & knowledge of performance tuning - in React, VUE, or no framework. Significantly, it means you have to a little more than the defaults.
Because if you don't do any performance tuning, it's possible that a tuned React SPA could beat it. It seems possible that a HEY app written by someone who did that with React could be even faster than what we see on HEY right now, in this particular case.
> It goes to show that libraries like React, Vue, and Angular are _not_ necessary to build smooth, modern, and fully-featured web interfaces.
The main selling point of these libraries is the clear separation of concerns - frontend code is clearly isolated from the backend code. Previously it was common for backends to return dynamically generated javascript and to use the DOM as a frontend data storage layer. These weren't pitfalls if you had a solid foundation but if you were inexperienced these conventions gave you a lot of rope to hang yourself with.
> The main selling point of these libraries is the clear separation of concerns.
I've rarely heard this as a selling point, and it doesn't seem like a very good one to me.
Even when frontend code is clearly isolated from the backend code, it's quite easy to create a mess of it all.
Except now you're also dealing with 1) multiple separate tech stacks, 2) synchronizing state in at least two places, 3) duplication of code (validation being a common one), 4) payload size and possibly lazy-loading the front-end of your codebase, 5) and so on.
There might be /something/ to this selling point in a sufficiently large project or one where multiple client apps interact with a single backend, of course, but in and of itself I don't see the benefit of such 'forced' separation of concerns.
I agree that react/vue/etc. aren't necessary, however this approach is not diametrically opposed to using a JS framework.
For example, if you use a framework like Stencil or Next.js w/ React, you will be able to pre-render your page into static HTML to serve to clients, but you also get the benefit of having rich JS components and code sharing. And then you avoid a lot of the issues they seem to have around lack of DOM diffing and the like.
> It goes to show that libraries like React, Vue, and Angular are _not_ necessary to build smooth, modern, and fully-featured web interfaces.
I understand what you're saying but want to clarify: Angular is a full blown opinionated framework.
And from my experience in the enterprise which library or framework to use are decided by how productive the dev team can be. Not sure newbs would hit the ground running with the HEY stack.
> It goes to show that libraries like React and Vue are _not_ necessary to build smooth, modern, and fully-featured web interfaces.
Ugh, I hate this trend of hating on the front end frameworks “trend”.
You can build some things without a framework (some things you simply cannot). Sure, a basic email client can be done without much JS. I’m not convinced it’s better for having gone that route.
Noteworthy how they tout the success of their "magic" frontend stack made with vanilla JS, lack of a trendy framework, etc. But if you use the app, the UX is fairly laggy, requires frequent refreshes, all the animations and interactions are off - the list goes on and on. It's noticeably subpar (and I like Hey).
Seems to me that the proof is in the pudding wrt their stack, but it's probably not what they wanted to prove. I would take a well tuned React SPA over this any day of the week.
Unfortunately have to agree. I really wanted to love HEY, and while it’s certainly not super laggy or anything, I’m not overwhelmed with the “magic”.
Ran into a host of inconsistencies already, changing between imbox/feed/papertrail on iOS also feels very “unnative” in the sense of not fluid.
The Basecamp folks have always been JavaScript skeptics (my perception at least) so I’m not totally surprised. And while the “magic” may apply to the simplicity of their front end implementation, that’s unfortunately not the same as a magical user experience where in 2020 I do expect a more fluid feel.
It’s quite apparent that often it’s just replacing one HTML block with another without too much thought about transitions.
From the twitter feed: "React is so 2019. HTML + minimum JS is 2020"
Ok. Just as long as you don't get stuck in 2010 :-P
Something like a web email-client really lends itself perfectly to a pure client side JavaScript application. Use the browser's cache facilities to cache the client side javascript and save server resources by avoiding server side rendering. You don't care that much about initial load time. Or search engine visibility.
I don't really find that to be the case. All of the actions seem to be done for me in under 400ms which is to say under the Doherty Threshold. That mean's that they are largely imperceptible. Sure it doesn't have fancy animations, but there isn't really any time for them.
Can you cite an example of a popular React SPA that is less "laggy" in your opinion? I'm curious to compare the UX.
Ive never heard of the Doherty Threshold, but looking it up, it seems that its actually saying > 400 ms "is painful", not that its "imperceptible". And that aligns with previous rules of thumb I've used for mobile UX -- you generally want things to be < 100ms, and ideally < 50ms. If something results from user interaction the bar is much closer to the 50ms side of the range.
Sure, a fairly best in class example would probably be Notion. Switch between pages, move some elements around, etc. There's a level of interactivity and responsiveness that I just don't see with Hey.
Yeah, maybe it's different the further you are from the US or something, but from my use of hey, I have no idea what these people are talking about. It feels about as snappy as most other apps I use. If anything it feels snappier than my average app (though I think that has more to do with backend/network than the UI).
More server side rendering means that a lot of the experience depends on the internet connection. Even minor lag or jitter can drastically affect responsiveness.
They are using Turbolinks. They generate everything server-side and then Turbolinks calculates the delta between the existing loaded template in the client and the incoming template generated in the server and injects only the changes.
This has a lot of advantages, mainly that you don't need to care about state on the client side and you're always synced with the real estate on the backend. It has one major drawback though. If you want to create snappy interfaces, you still have to create some client visual state and modify the visual state before you receive the response from the server. Otherwise it becomes laggy because it's waiting for the response to re-render. If you don't do it this way it's going to feel slow for sure.
But again, the main advantage of this is that there's no complex state logic in the client. The server-rendering is the source of truth for your state.
It's definitely a different mindset because now you have to write JS to create UI states as they are expected to come fro the server (if you're looking for that quick SPA snappiness).
I think it's an interesting approach, but I'm not sure if I like it, though. I have build apps this way and always get the sense that I'm not creating something that feels fast.
Where is the "existing loaded template" kept server-side, sticky session cache? Seems maybe better for scale to send the whole small html and let client diff-apply.
Uh... did we use the same app? I signed up this week and found the whole thing very clean and zippy. Nothing in the animations / interactions felt off to me.
The experience might vary a lot depending on ping times to their servers, if most interactions require a server round-trip (and if they don't have nice animations to hide the lag).
But the reception of Hey also proofs that most people don't care about flawless animations and visual design with webapps. I don't like their visual brand either, but I still might get the app when I have to deal with more email stuff.
I wouldn't read too much into the reception of Hey at this stage. It has only been opened up to people who pre registered, which is to say followers of dhh/Basecamp, who are predisposed to like it.
What I find amusing is that all of today's SPA frameworks/views are kind of descended from Angular, which Google built internally after learning the lessons of how to build such a thing while putting the Gmail front-end together. We 15 years of SPA usage in email applications demonstrating their superiority. We have things like Facebook, the one true SPA which rules them all. And yet. Turbolinks.
The UI performance feels snappy to me, and opening up threads or going to commonly used pages feels about as fast as Gmail. From watching the performance w/ network tab open things happen in around 300 - 500 ms, which is inline w/ Gmail as well.
_Opening_ app.hey.com is a different story, and is far faster than opening a tab to gmail. I often wait for Gmail while staring at a blank tab as it loads, even one a fast broadband connection. Using Gmail over spotty broadbad, say while traveling, often leads to dropping down into "simple HTML mode".
Hey loads up very, very quickly, which isn't surprising given how small the bundle of html/js/css you are pulling down is.
Interesting note, on Twitter DHH mentioned that they have some additional "magic" that they're using to do frontend work. It sounds like HTML over websockets, not unlike Phoenix LiveView or (tooting my own horn here) our recently released Motion library (https://github.com/unabridged/motion) which both allow you to use the server as your single source of truth while providing reactive UI components on the frontend. He indicated they'll be releasing more later this year.
Nice, this is much closer to LiveView than Stimulus Reflex. Will check it out when I have time.
Slightly off topic:
>Github's ViewComponent is currently the de-facto standard for component/presenter-style libraries for use with Rails and likely will make it into Rails eventually.
It is probably like LiveView but i think its over http. Like Laravel Livewire https://laravel-livewire.com/
I am not sure websockets and ruby are best of friends.
I believe they don't have much of a frontend stack at all, it's just a little bit of JavaScript, so I don't understand how the UX would be laggy if it doesn't actually do much.
Because its hard to have seamless / performant UX when requests necessarily dont share DOM state. You run into the same issues on native mobile applications.
I've been using it for the last few days and I don't have this experience. It's better than Outlook (web or desktop), hotmail, yahoo, gmail and other email services I have tried.
On signup, it also tries to autofill my credit card number when asking me what my full name is. Maybe it is just a chrome UI issue and it will only give the form my full name and not my CC#, but it is a little bit concerning.
If they spent all this time and energy into building a high performant and minimal react/vue app instead of using their over-engineered in-house front end frameworks the result would be even better. Maybe they should just embrace Vue.js which, like rails, is also an indie open source project ,not backed by big co. Vue 3.0, while still in beta, brings lots of improvements on the table and the new custom renderer api would make it easier for their team to also target native mobile apps.
Idk,I actually don't understand the obsession of many with Tech Stack or predicting the doom of a language. Because Facebook uses PHP for their service, Would you still use PHP? A lot of people despise PHP. But there's PH maker Mubs, most of his indie products LAMP stack. The main lesson I get from any of these is that pick the one that you're comfortable with and deliver the project than looking for what's the best tool in 2020
> I actually don't understand the obsession of many with Tech Stack or predicting the doom of a language
Really? You don't understand why people have strong opinions about the tools they use for work every single day?
Most programmers don't get to choose the stack they work on. Even if they do, you're going to run into pain points and wonder, "Did I pick the right thing? Would I be equally frustrated if we had gone a different direction? What would be the most enjoyable stack to choose next time?"
People do (and should) care a lot about their tools. Facebook cares so much that they invented an entirely new programming language called Hack to replace PHP, and they also invented Flow and Reason as JavaScript alternatives.
Even for small companies, tools matter. If you spend all your time rebuilding libraries, debugging at runtime, or waiting for devs to learn your stack, you're losing money.
Yeah, tech stacks are important, but which one is right is so dependent on the specifics of a given project, which is what most of these tech-stack-hype conversations ignore. My small company pays out the ears in so many different ways to run our Python service, but we picked it because certain big companies can use Python at much larger scale than ours. Of course, those companies are mostly just doing CRUD operations to a database and often errors don't matter nearly as much because it's social media or whatever, and also they aren't as cost-sensitive as our business. Instead, we're fighting tooth and nail to keep our requests below a 60s HTTP timeout threshold when they could probably be on the order of a few seconds without optimization if we used a more performant application language like Java, C#, or Go (although the first two might involve some tradeoff on developer productivity; Go would probably improve developer productivity and it would certainly be a significant improvement to the tooling/deployment/etc story).
I'd argue that tech stacks are unimportant 99% of the time. It really doesn't matter if you use Java or PHP or Python or Node.
Failures that I have seen due to the choice of tech stack include:
- Technologies that your team doesn't know well
- Technologies where hiring is difficult (I've seen attempts to turn C# devs into F# devs and Java devs into Clojure devs and productivity suffered)
- Choosing the flavor of the week, whether that's the hottest Javascript framework or newest NoSQL database
- Over-architecting thinking you were Google-scale with the added complexity hurting velocity (it doesn't matter if you can scale to millions of users if you can't get there)
Generally boring tech stacks work. By the time your Ruby/MySQL monolith has performance issues, hopefully you're successful enough that you can scale out the worst performing parts in some other language/datastore combination. You'll be in a better position to fix performance problems are when you have them rather then when you are trying to predict them up front.
Startups are most likely to fail for either never existing or crashing after take off. Founders mistake the first for an engineering problem and the second for a culture problem. Engineers are smart, if they can write a server in Python they can write a server in Go. Don't waste millions on maintaining an awkward stack for anything but first principles engineering decisions.
> like Java, C#, or Go (although the first two might involve some tradeoff on developer productivity
When I first learned Java I though like this. I liked Python, Perl and even PHP.
Then after reluctantly joining a Java team I learned to like it.
Next I realized how much I actually missed from Java every time I went back to work on a hobby project. Having a
Still for a couple of years other languages still seemed to have an advantage when it came to bootstrapping something, but today? With Quarkus reloads are as fast as in PHP. Things just work and are maintained by grown-ups. If you cannot pair program, the compiler will still have your back.
I'd recommend everyone to look outside the box once in a while: if you use Java, try Rails. If you use Python, try Asp.Net or Java (Quarkus or JavaEE or something). Etc.
At least I feel I have learned a lot from being forced through this process.
If you’re interested in talking through this and are considering C#, you’re welcome to email me and bounce around some ideas. I have a lot of experience in both Python and C# and may be able to help!
Yeah, selecting a stack IMO has more to do with scoping your goals.
For example, if you are an indie dev who will be developing a project solo, pick whatever you're best at, because all that matters is the product.
If you're an open source project, that's a different story. If you're looking to hire engineers, also a different game. And if you're the creator of Ruby on Rails and have created a giant personal brand around being contrarian and ignoring the new-hotness in web dev, then your choice is made for you.
I'd also say that a lot of people expecting to eventually hire on developers don't have to pick the tech stack that will scale to a 30 developer team. I've known a lot of very successful companies where the core tech was rebuilt/replaced as the team demands grow. And a lot of them probably wouldn't have gotten there that quickly if they make decisions around a 30 person team when they were 2 people.
I agree with you, for >95% of projects most of the tools available to you have reasonable upside and downside. If you were equally skilled in all options, it more or less doesn't matter what you pick. There are definitely problems, and entire fields (like hardware) where you don't have much of a choice due to the performance demands. But if you're building a small company or website, for the most part the dogmatism around the tools you use are nonsense, and just get in the way of getting stuff done.
Selecting a tech stack is 75% about your developers skillsets and 25% about how easy it is to hire for that skillset, IMO. Anything else is just hype.
HEY picked their stack because their founder is literally the creator of Rails, so obviously they're going to use Rails and its related tie-ins (MySQL, Redis). This isn't really interesting as DHH has been a proponent of "Rails good everything else bad" for quite some time, and will probably only continue to double down on that stance.
I am a huge fan of server side rendering with progressively enhancing Javascript. It simply feels right to me:
* Search engine indexing works as expected.
* Informational web pages don't need a lot of interactivity anyway.
* You don't need crazy amount of build tools.
* You don't need extra browser extensions just to debug the JS.
* If for some reason there's one JS error, most of the pages are still functional.
* I am unconvinced that SPA is faster than server side rendering.
* Separation of concern is natural, business logic is handled by BFF, UI interaction is handled by JS.
* If you super love Javascript, you can write the BFF in Node.js.
I am glad that Hey is another high profile app exemplifying this.
Are you building an app? if so build an app. All UI is static hosted on CDN with content based urls that can be cached forever and all dynamic data coming in purely via REST apis.
If you are building a website, then serve html pages with sprinkled widgets here and there for interactivity.
Don't conflate the two. Users don't mind a slightly slow first load but super fast subsequent loads for an app. They'll love offline/PWA support, something that behaves like a native app. Search engines shouldn't care about indexing apps.
Web pages should behave like web pages. Search engines expect html as the format. Users expect the first load to be blazing fast. Proper href links, yada yada.
The worst is when its a half assed slow loading web page that wants to be an app, but is not an app.
I tried hey and was put off by its bulbous, fisher-price UI. Signing up and having to press "next" after every single bit of information they collected should have been my first clue at the brain-dead thinking that went into this product.
About the UI -- Why is there a trend in designers to add padding to an interface as a disguise for limited features? It's like, does a button really need to to take up half the screen? Oh yeah, that's right, it does if you only have a single feature.
Even the name is annoying. Hey is what you say to get someone's attention in dating app.
> It's like, does a button really need to to take up half the screen?
Bit of an exaggeration. Extra padding on buttons is more to do with enabling an increased hitbox for mobile and touch users, what with fingers being less precise than mice.
It’s rare for tech to be a determinant to a products success, which is why I’m confused at all the extrapolations here.
What’s working for Hey is years of brand development and marketing that allowed them to do such a hyped launch. It could’ve been written in php with jquery and it wouldn’t have made much a difference.
We’re talking about the tech stack here. It’s already a success because there’s a working product. No-one is arguing that the use of this stack guarantees business longevity.
All the comments here are about frontend (which honestly comes as no surprise if you know a bit Basecamp [1]) but the interesting one for me is Kubernetes. It totally makes sense but I expected Basecamp to use something more "old fashion" (somehow like the rest of their stack).
I've switched to Stimulus since seeing a presentation on it at last year's Railsconf and it has been a real joy to use.
This is really the bit Rails was lacking for a long time. JS always felt like a second class citizen in Rails before, but webpacker finally brings the two worlds together in a way that makes sense. And with Stimulus, I actually find it a joy to write well organized js that is easy to reuse across my app. It's minimal, but just opinionated enough to keep me from mucking things up badly, the way I did in the asset pipeline days.
I wish Stimulus got more attention. It really is all most web sites need, and it works so well with the well proven Rails way of server side html added to judicious js. It's also a good tool to use as glue while you migrate legacy js over from the asset pipeline, you can just load your old js in a Stimulus controller and go.
I kind of wish Basecamp would promote it more, maybe even optionally bundle it with Rails, because it really is the missing piece that almost any Rails app could take advantage of. Having a little more guidance here would really help new Rails developers :)
Honestly stimulus is great if you have constraints around what you want to do with your JavaScript. However after working with it in a larger application, it is quickly obvious that more complex tasks are made extra hard and that lack of opinion turns into a wild west of different implementation patterns. When you start trying to get multiple stimulus controllers talking together.... Good luck.
Readit News
It goes to show that libraries like React and Vue are _not_ necessary to build smooth, modern, and fully-featured web interfaces.
Edit: removed mention of Angular because, yes, it’s a framework, not a view library.
With an SPA, it could be built to do this. But most SPAs aren't developed this way.
Take a look at the "RealWorld" example SPA showcase (it's like a TodoMVC for SPAs), which has 43k stars on GitHub: https://github.com/gothinkster/realworld
And go ahead and click on the demo site: https://demo.realworld.io/
In virtually every implementation, every time you change pages, the app re-downloads everything it needs for that route. Click on an article and then go back to the feed? Every time you will see a blank feed for about 500ms and only then do the articles stream in.
You can say "well it doesn't have to be this way" or "this is just an example". But the reality is that it usually is this way. This real world example is a good representation of how most SPAs are built, and they lack the type of functionality you're describing. They instead end up creating an experience that poorly emulates server side rendering, since now many page changes end up with a blank page or a loading indicator before the data arrives in a subsequent request.
I don't know about you, but I'd rather wait 250ms once and then have the page arrive fully rendered over a transition that takes 2ms and then 200-400ms of multiple requests finishing and the page popping into place. The latter is really annoying, yet it's the experience most SPAs give you.
I’m also not completely convinced that the one-codebase ethos actually results in that much more efficiency, particularly given that one codebase is JavaScript. I’m sure there is a gain, but I don’t know that it completely offsets the costs of being so tightly bound to the JS community, but that could just be my experience
Basically it's a new, unreleased version of Turbolinks[1] + StimulusJS[2]
The "native" apps are wrappers [3] for the webapp, but with some native integrations for navigation, etc.
[1] https://github.com/turbolinks/turbolinks
[2] https://stimulusjs.org
[3] https://github.com/turbolinks/turbolinks-ios
It might be smaller or faster than other frameworks, but it definitely has much of the complexity and pitfalls of its brethren.
https://stimulusjs.org/handbook/origin
Deleted Comment
I would say that there's been a pendulum swing back towards no frameworks, no bloat. But the corollary (important to note) is: this assumes competence & knowledge of performance tuning - in React, VUE, or no framework. Significantly, it means you have to a little more than the defaults.
Because if you don't do any performance tuning, it's possible that a tuned React SPA could beat it. It seems possible that a HEY app written by someone who did that with React could be even faster than what we see on HEY right now, in this particular case.
The main selling point of these libraries is the clear separation of concerns - frontend code is clearly isolated from the backend code. Previously it was common for backends to return dynamically generated javascript and to use the DOM as a frontend data storage layer. These weren't pitfalls if you had a solid foundation but if you were inexperienced these conventions gave you a lot of rope to hang yourself with.
I've rarely heard this as a selling point, and it doesn't seem like a very good one to me.
Even when frontend code is clearly isolated from the backend code, it's quite easy to create a mess of it all.
Except now you're also dealing with 1) multiple separate tech stacks, 2) synchronizing state in at least two places, 3) duplication of code (validation being a common one), 4) payload size and possibly lazy-loading the front-end of your codebase, 5) and so on.
There might be /something/ to this selling point in a sufficiently large project or one where multiple client apps interact with a single backend, of course, but in and of itself I don't see the benefit of such 'forced' separation of concerns.
And by "you", you mean "you or anyone on your team"
For example, if you use a framework like Stencil or Next.js w/ React, you will be able to pre-render your page into static HTML to serve to clients, but you also get the benefit of having rich JS components and code sharing. And then you avoid a lot of the issues they seem to have around lack of DOM diffing and the like.
I understand what you're saying but want to clarify: Angular is a full blown opinionated framework.
And from my experience in the enterprise which library or framework to use are decided by how productive the dev team can be. Not sure newbs would hit the ground running with the HEY stack.
Ugh, I hate this trend of hating on the front end frameworks “trend”.
You can build some things without a framework (some things you simply cannot). Sure, a basic email client can be done without much JS. I’m not convinced it’s better for having gone that route.
Seems to me that the proof is in the pudding wrt their stack, but it's probably not what they wanted to prove. I would take a well tuned React SPA over this any day of the week.
Ran into a host of inconsistencies already, changing between imbox/feed/papertrail on iOS also feels very “unnative” in the sense of not fluid.
The Basecamp folks have always been JavaScript skeptics (my perception at least) so I’m not totally surprised. And while the “magic” may apply to the simplicity of their front end implementation, that’s unfortunately not the same as a magical user experience where in 2020 I do expect a more fluid feel.
It’s quite apparent that often it’s just replacing one HTML block with another without too much thought about transitions.
Ok. Just as long as you don't get stuck in 2010 :-P
Something like a web email-client really lends itself perfectly to a pure client side JavaScript application. Use the browser's cache facilities to cache the client side javascript and save server resources by avoiding server side rendering. You don't care that much about initial load time. Or search engine visibility.
I don't really find that to be the case. All of the actions seem to be done for me in under 400ms which is to say under the Doherty Threshold. That mean's that they are largely imperceptible. Sure it doesn't have fancy animations, but there isn't really any time for them.
Can you cite an example of a popular React SPA that is less "laggy" in your opinion? I'm curious to compare the UX.
This has a lot of advantages, mainly that you don't need to care about state on the client side and you're always synced with the real estate on the backend. It has one major drawback though. If you want to create snappy interfaces, you still have to create some client visual state and modify the visual state before you receive the response from the server. Otherwise it becomes laggy because it's waiting for the response to re-render. If you don't do it this way it's going to feel slow for sure.
But again, the main advantage of this is that there's no complex state logic in the client. The server-rendering is the source of truth for your state.
It's definitely a different mindset because now you have to write JS to create UI states as they are expected to come fro the server (if you're looking for that quick SPA snappiness).
I think it's an interesting approach, but I'm not sure if I like it, though. I have build apps this way and always get the sense that I'm not creating something that feels fast.
(And I say that as a big RoR fan!)
_Opening_ app.hey.com is a different story, and is far faster than opening a tab to gmail. I often wait for Gmail while staring at a blank tab as it loads, even one a fast broadband connection. Using Gmail over spotty broadbad, say while traveling, often leads to dropping down into "simple HTML mode".
Hey loads up very, very quickly, which isn't surprising given how small the bundle of html/js/css you are pulling down is.
Nice, this is much closer to LiveView than Stimulus Reflex. Will check it out when I have time.
Slightly off topic:
>Github's ViewComponent is currently the de-facto standard for component/presenter-style libraries for use with Rails and likely will make it into Rails eventually.
I thought DHH rejected the idea?
https://github.com/rails/rails/pull/36388
Dead Comment
Really? You don't understand why people have strong opinions about the tools they use for work every single day?
Most programmers don't get to choose the stack they work on. Even if they do, you're going to run into pain points and wonder, "Did I pick the right thing? Would I be equally frustrated if we had gone a different direction? What would be the most enjoyable stack to choose next time?"
People do (and should) care a lot about their tools. Facebook cares so much that they invented an entirely new programming language called Hack to replace PHP, and they also invented Flow and Reason as JavaScript alternatives.
Even for small companies, tools matter. If you spend all your time rebuilding libraries, debugging at runtime, or waiting for devs to learn your stack, you're losing money.
Deleted Comment
I'd argue that tech stacks are unimportant 99% of the time. It really doesn't matter if you use Java or PHP or Python or Node.
Failures that I have seen due to the choice of tech stack include:
- Technologies that your team doesn't know well
- Technologies where hiring is difficult (I've seen attempts to turn C# devs into F# devs and Java devs into Clojure devs and productivity suffered)
- Choosing the flavor of the week, whether that's the hottest Javascript framework or newest NoSQL database
- Over-architecting thinking you were Google-scale with the added complexity hurting velocity (it doesn't matter if you can scale to millions of users if you can't get there)
Generally boring tech stacks work. By the time your Ruby/MySQL monolith has performance issues, hopefully you're successful enough that you can scale out the worst performing parts in some other language/datastore combination. You'll be in a better position to fix performance problems are when you have them rather then when you are trying to predict them up front.
Startups are most likely to fail for either never existing or crashing after take off. Founders mistake the first for an engineering problem and the second for a culture problem. Engineers are smart, if they can write a server in Python they can write a server in Go. Don't waste millions on maintaining an awkward stack for anything but first principles engineering decisions.
When I first learned Java I though like this. I liked Python, Perl and even PHP.
Then after reluctantly joining a Java team I learned to like it.
Next I realized how much I actually missed from Java every time I went back to work on a hobby project. Having a
Still for a couple of years other languages still seemed to have an advantage when it came to bootstrapping something, but today? With Quarkus reloads are as fast as in PHP. Things just work and are maintained by grown-ups. If you cannot pair program, the compiler will still have your back.
I'd recommend everyone to look outside the box once in a while: if you use Java, try Rails. If you use Python, try Asp.Net or Java (Quarkus or JavaEE or something). Etc.
At least I feel I have learned a lot from being forced through this process.
Just don't do things the way Microsoft says to. ^_^
For example, if you are an indie dev who will be developing a project solo, pick whatever you're best at, because all that matters is the product.
If you're an open source project, that's a different story. If you're looking to hire engineers, also a different game. And if you're the creator of Ruby on Rails and have created a giant personal brand around being contrarian and ignoring the new-hotness in web dev, then your choice is made for you.
Deleted Comment
HEY picked their stack because their founder is literally the creator of Rails, so obviously they're going to use Rails and its related tie-ins (MySQL, Redis). This isn't really interesting as DHH has been a proponent of "Rails good everything else bad" for quite some time, and will probably only continue to double down on that stance.
I can't wait for the pendulum to swing back.
Are you building an app? if so build an app. All UI is static hosted on CDN with content based urls that can be cached forever and all dynamic data coming in purely via REST apis.
If you are building a website, then serve html pages with sprinkled widgets here and there for interactivity.
Don't conflate the two. Users don't mind a slightly slow first load but super fast subsequent loads for an app. They'll love offline/PWA support, something that behaves like a native app. Search engines shouldn't care about indexing apps.
Web pages should behave like web pages. Search engines expect html as the format. Users expect the first load to be blazing fast. Proper href links, yada yada.
The worst is when its a half assed slow loading web page that wants to be an app, but is not an app.
About the UI -- Why is there a trend in designers to add padding to an interface as a disguise for limited features? It's like, does a button really need to to take up half the screen? Oh yeah, that's right, it does if you only have a single feature.
Even the name is annoying. Hey is what you say to get someone's attention in dating app.
Bit of an exaggeration. Extra padding on buttons is more to do with enabling an increased hitbox for mobile and touch users, what with fingers being less precise than mice.
What’s working for Hey is years of brand development and marketing that allowed them to do such a hyped launch. It could’ve been written in php with jquery and it wouldn’t have made much a difference.
[1] https://basecamp.com/about/open-source
This is really the bit Rails was lacking for a long time. JS always felt like a second class citizen in Rails before, but webpacker finally brings the two worlds together in a way that makes sense. And with Stimulus, I actually find it a joy to write well organized js that is easy to reuse across my app. It's minimal, but just opinionated enough to keep me from mucking things up badly, the way I did in the asset pipeline days.
I wish Stimulus got more attention. It really is all most web sites need, and it works so well with the well proven Rails way of server side html added to judicious js. It's also a good tool to use as glue while you migrate legacy js over from the asset pipeline, you can just load your old js in a Stimulus controller and go.
I kind of wish Basecamp would promote it more, maybe even optionally bundle it with Rails, because it really is the missing piece that almost any Rails app could take advantage of. Having a little more guidance here would really help new Rails developers :)