Last time, I promised to write about “getting the benefits that SPAs enjoy, without suffering the consequences they extremely don’t enjoy”. And the...
For further actions, you may consider blocking this person and/or reporting abuse
Watching this I have to wonder how much of "the web is slower than native" is just a self-fulfilling prophecy (or even an excuse).
Tell that to the "nobody cares in the end if things are < 100kb" and "premature optimization" types (who presumably never heard of avoiding gratuitous pessimization).
"So the engineers at Facebook in a stroke of maniacal genius said “to hell with the W3C and to hell with best practices!” and decided to completely abstract away the browser, …"
Mark Nutter - Modern Web Development (2016)
React Server Components seem to take the whole "build a browser just for React" notion to an entirely new level.
… really?
"What is clear: right now, if you’re using a framework to build your site, you’re making a trade-off in terms of initial performance—even in the best of scenarios.
Some trade-off may be acceptable in the right situations, but it’s important that we make that exchange consciously."
Tim Kadlec - The Cost of Javascript Frameworks (2020)
If the platform is the fundamental limiting component then it's the platform's fault …
No honourable(, hopeful) mention for Solid Start? 😁
Great post as always, Thank You!
Funny thing about Solid: I asked @ryansolid if it met my checklist, and he was humble and well-reasoned enough to say he wasn’t certain it qualified. Now he got his link at the bottom in the end anyway!
Apparently I was too humble. On further discussion Solid has been added to the article. Thanks @taylorhuntkr.
"how likely will a new architecture actually be faster if it’s put through the same people, processes, and culture as the last architecture?" Concur 100%. It's not your framework that's slow it's your team!
That's a wild generalisation. Teams evolve, learn, and do better when the framework they use has better built-in patterns and practices. This is why React is so hard to get right and I wouldn't recommend it to 99% of the teams/projects.
Yeah, my grapes were probably a little sour
At work I'm working on seeing if we can port some of the React code over the simpler HTMX library. But between React and other complex tools I'm wondering if I can pull it off. It is just so confusing. You want a details/summary action? In React they built or used some library that uses divs to recreate it! You want to search for and add to a select element that can do multiple? Sure here's a really complex way to do it?
Why can't I use some simple web components to do that?
<multi-select><option value=1>Whatever</option></multi-select>. That seems like a nice simple and elegant way to add that.I just don't understand why front end devs make everything so complicated. I know complexity is needed sometimes. But React and other technologies make it much more difficult than it should be. All we are doing is serving simple forms for goodness sake! Yes, we want the forms to have some added benefits like searching in a long list of values for a multi-select form, but I don't need a whole framework to do that!
And after the front end devs left the company to make $50k+ elsewhere they leave this terrible mess. One coworker had asked, "Why is it doing that weird thing there?" Front end dev, "I have no idea!" Well, maybe if we went with simpler technology we would have an idea.
Simpler CSS too. Yes, I know we can't have my ideal CSS for my really simple web pages I make on my own. But we definitely don't need the complexity of some of these frameworks out there.
Anyways, I had to rant. I really don't like how complicated React has made the front end. Especially for business facing apps which are basically just forms. It isn't all that complex but we have made it super complex as a developer industry. For no reason that I can tell.
So… what about Quik? And Quik City?
Not sure. I didn’t see anything about streaming on its site, but I could have missed it.
For the site I built, Qwik’s code-on-interaction didn’t improve the initial download — where Qwik
import()s somethingonclick, my use of classica[href]andform[action]accomplished the same goal.Qwik pure HTML streaming: youtube.com/watch?v=yVOI81GKZBo
Thanks for the excellent series on this topic. I never really gave much thought about giving up on client side routing, even with server side rendering. Turbolinks and Hotwire also go in that direction, suggesting client side routing is a must if you want a fast website, but I started to consider the opposite point of view, maybe it's not crucial...
I must admit that I'm happy with the direction that React is going, with progressive and concurrent hydration, streaming etc. It will result in HTML getting in the browser more quickly and not blocking the main thread by hydration not being done in a single chunk. Adding Remix to the mix, even before hydration is complete, basic functionality is there. I'm also excited about Remix integrating with other libraries.
This may seem like I'm too invested in React, and it's probably true. I like the development experience, rich ecosystem, and of course familiarity is a real thing. Even though I'm hopeful about React's future, it's still materializing and I don't have the hard numbers in my hand. I need to have my own metrics to optimize for and actually measure if new streaming and hydration strategies improve my metrics or not. Remix' server components blog was an eye opener for me and I plan to do my own testing in the future.
Again, thanks for the great series and it will be on my bookshelf.
Yeah, as far as the state-of-React, those upcoming additions are inarguable improvements, and I’m glad React is getting them. And if you’re measuring your own numbers, that’s the most important part by far.
Copy-Paste the whole
“software is faster is you don’t import a framework that you only 10% use”
thing across the entire software industry please. 👍
That was an incredibly valuable and insightful 5 articles. Thank you for this!!
@taylorhuntkr FYI - the "Rendering on the Web § A Rehydration Problem: One App for the Price of Two" link has a quote that is making it a 404.
Ah, thank you! Fixed
What a great series! Aside from the content, first I'm hearing that the demo actually happened and that you left Kroger. But really cool to see how far this has come and where you've landed!
Just wanted to say thanks for your meticulous attention to accessibility in the alt text of the images and even a text description of the demo video.
Reading this in 2023, I think Astro Build is worth trying that controls Islands component astro.build/
Astro 2.0 released recently, Astro 1.0 supported HTML streaming.
twitter.com/matthewcp/status/15571...
Also reading this in 2023 thanks to all the anti-SPA sentiment swirling around Mastodon. Marko doesn't do TypeScript so trying Solid right now. Thanks for your superb series, I'm sure I'm not the only one who is most grateful!
Oh, you replied under my comment. Recently, Tanstack router has beta release for Astro, it feel like SPA experience although I don't think I will use Tanstack.