Twitter | Search | |
Addy Osmani
2019 wishlist for a React framework 🤞 📦 Small initial vendor bundle ✂️ Automated code-splitting (route/component) 💰 JS perf budgets (dev/prod) ⚡️ Constraints to stay on the fast path 🍽 Differential bundling ES2015+ 💄 Extract & optimize CSS 🚿 Progressive hydration for SSR
Reply Retweet Like More
tom byrer Dec 29
Replying to @addyosmani @gatsbyjs
Reply Retweet Like
Addy Osmani Dec 30
Replying to @tombyrer @gatsbyjs
Next & Gatsby do a *great* job trying to help out of the box (e.g Next's FS-based page splitting, Gatsby prefetching). There's still quite a bit we can do here for easy-peasy guaranteed perf on mobile. Looking fwd to working more on this problem space w/folks :)
Reply Retweet Like
Elliott Sprehn Dec 30
Replying to @addyosmani
I'm currently working on progressive hydration, the costs are currently too high in many apps and having to delay load parts of the page that should otherwise be server rendered to avoid hydration cost isn't a trade-off a modern framework should require. :)
Reply Retweet Like
Addy Osmani Dec 30
This is useful insight. Is your work on progressive hydration public? :) Would be great to hear if folks looking at progressive/incremental hydration solutions reached similar conclusions about the cost being high in Svelte or Glimmer cc
Reply Retweet Like
Elliott Sprehn Dec 30
I'm hoping to have demo and code to share soon! I too am curious what other frameworks are doing.
Reply Retweet Like
Addy Osmani Dec 30
Amazing! Looking forward to anything you can share. Thanks, Elliott!
Reply Retweet Like
Minko Gechev Dec 30
In Angular we have an early prototype. Looking forward to sharing it officially in the next a couple of months.
Reply Retweet Like
Addy Osmani Dec 30
Awesome. I could see some frameworks opting for a flag/attribute to indicate which portions were skipped in the SSR content and need CSR to avoid a full teardown/rebuild. Will be fun to compare approaches.
Reply Retweet Like
Pavel Klimashkin Dec 30
Replying to @addyosmani
What do you mean by 'Extract and optimize CSS'? React is, thankfully, css agnostic. Or, by calling React a framework you expect it to start including everything out of the box next year?
Reply Retweet Like
Addy Osmani Dec 30
Replying to @p_klimashkin
I’m distinguishing between React (the core library) and React frameworks (like Next.js). I would like to see opinionated abstractions explore solutions to some of these other problems. Core’s doing great enabling work via React.lazy(), Suspense etc
Reply Retweet Like
vjeux ✪ Dec 30
Replying to @addyosmani
I just wanted to say thank you for being involved in the React ecosystem, having you onboard is going to help make it a lot better for everyone in the world!
Reply Retweet Like
Addy Osmani Dec 30
Replying to @Vjeux
Thanks to everyone in the React ecosystem that’s been so open to sharing learnings and collaborating. Hopeful and excited we can come up with something useful here :)
Reply Retweet Like
Dan Abramov Dec 30
We’ll be working on progessive hydration in React itself as part of new streaming SSR in 2019
Reply Retweet Like
tim arney Dec 30
Replying to @addyosmani
Where can I find out more about what differential bundling is?
Reply Retweet Like
Andrew Ray Dec 30
Replying to @addyosmani @Vjeux
Does Next.js satisfy these criteria?
Reply Retweet Like
Addy Osmani Dec 30
Replying to @andrewray @Vjeux
Today Next.js handles automated code-splitting (with their pages pattern) but the other items (like budgets, constraints etc) are still ideas I would love to see considered.
Reply Retweet Like
Bjorn 'Bjeaurn' Dec 30
Replying to @walkbytech @addyosmani
Angular has most of these things, if not out of the box directly, then implementable with only a few lines (like Universal for SSR)
Reply Retweet Like
Addy Osmani Dec 30
covered part of this in his deloying ES2015+ code write-up wrote about it in
Reply Retweet Like
Addy Osmani Dec 30
Angular is headed on a great trajectory with Ivy, smaller RxJS and CLI, but is missing automated splitting (by default), a constraint system, differential serving and progressive hydration (which is WIP I believe). & could probably correct me :)
Reply Retweet Like