Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
1–10 of 66 posts
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#2It's interesting that Lin Clark basically demoed Time Slicing a -year- ago at ReactConf: https://www.youtube.com/watch?v=ZCuYPiUIONs and in the first 10 mins of Dan's talk you see basically the same thing with user interaction applied.
createFetcher is brand new and here's the metaconversation on Twitter/Github: https://twitter.com/acdlite/status/969168681644179456 and https://github.com/facebook/react/pull/12279/files#diff-50d8...
with a couple implementations here (https://twitter.com/jamiebuilds/status/969169357094842368) and here (https://twitter.com/actualhypercrab/status/94131894239559680...)
// style discussion below
one thing I really appreciate about this talk is hard it is to even communicate asynchronous problems and the solutions to them. Personally the lagging animationFrame clock display (for time slicing) and the loading state devtools (for "react suspense") were actually the bigger "wow" moments. (Yes I know this talk is not about the tools or the charts)
he does another thing I'm a fan of - starting with a question. this helps frame the rest of the talk: explaining why the question is a big deal, breaking the question down, proposing some solutions, showing how the solutions answer the question.
bottom line - there's more to learn from this talk than just React.
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#3At the 15 minute mark, he introduces a new paradigm for asynchronous IO within render functions; see a screenshot here: https://www.dropbox.com/s/wybqgtftuyqipk8/Screenshot%202018-.... This is groundbreaking, to say the least, as previously this needed to be done by adding higher-order components to inject the result of the fetch as a prop at some higher level; now, it's as simple as changing the src property in a single line of code.
One of Dan's colleagues, Andrew Clark, described how this is implemented on Twitter: https://twitter.com/acdlite/status/969171217356746752
Here's how suspending works:
- in the render method, read a value from the cache.
- if the value is already cached, the render continues like normal
- if the value is not already cached, the cache *throws a promise*
- when the promise resolves, React retries where it left off
Digging into the source code released in this companion tweet, imageFetcher.read() indeed throws (instead of an exception) a Promise that is apparently caught by React's new error handling infrastructure and handled somewhere up the chain. https://github.com/facebook/react/blob/master/packages/simpl...The talk indicated that there will be tons of support for granularly choosing when/how to show spinners, allowing interactivity with the rest of the interface, etc. while this loading is ongoing.
It's a bit magical, but promising to say the least!
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#4typo in the title - its Abramov not Ambramov It's interesting that Lin Clark basically demoed Time Slicing a -year- ago at ReactConf: https://www.youtube.com/watch?v=ZCuYPiUIONs and in the first 10 mins of Dan's talk you see basically the same thing with user interaction applied. createFetcher is brand new and here's the metaconversation on Twitter/Github: https://twitter.com/acdlite/status/969168681644179456 and htt…
Also see the summary post on the React blog for the key takeaways from the demo:
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-...
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#5I can see that being compiled to webassembly for browsers and react-native can have multiple language support ?
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#6In my experience React has had 2 major paint points. async anything, and styling. And this fixes the former, and I'd argue that the latter isn't necessarily their job to fix.
Also, to have done this in a way that keeps a LOT of backwards compatibility is amazing.
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#7Is there plan to implement the react-core in C or other native language ? I can see that being compiled to webassembly for browsers and react-native can have multiple language support ?
Lin Clark, who works for Mozilla, gave a talk on "What WebAssembly Means for React" last year ( https://www.youtube.com/watch?v=3GHJ4cbxsVQ ). In a recent Twitter thread, she said that some more useful WASM pieces are in the works, but still not likely to be a big improvement or worth the effort to rewrite React ( https://twitter.com/linclark/status/967860936550879232 ).
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#8Is there plan to implement the react-core in C or other native language ? I can see that being compiled to webassembly for browsers and react-native can have multiple language support ?
No, there's no plans to rewrite the React core in C, Rust, Reason, WASM, or anything else right now. Lin Clark, who works for Mozilla, gave a talk on "What WebAssembly Means for React" last year ( https://www.youtube.com/watch?v=3GHJ4cbxsVQ ). In a recent Twitter thread, she said that some more useful WASM pieces are in the works, but still not likely to be a big improvement or worth the effort to rewrite React ( htt…
Then it could compile directly to native.
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#9typo in the title - its Abramov not Ambramov It's interesting that Lin Clark basically demoed Time Slicing a -year- ago at ReactConf: https://www.youtube.com/watch?v=ZCuYPiUIONs and in the first 10 mins of Dan's talk you see basically the same thing with user interaction applied. createFetcher is brand new and here's the metaconversation on Twitter/Github: https://twitter.com/acdlite/status/969168681644179456 and htt…
Yep, nice link roundup - beat me to it :) Also see the summary post on the React blog for the key takeaways from the demo: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-...
But boy, the Apple presentation style is so heavy in that blog post. "We call this...", "We can't wait..."
Re: Beyond React 16 by Dan Ambramov – Async Rendering and React Suspense
#10So glad someone captured this talk! At the 15 minute mark, he introduces a new paradigm for asynchronous IO within render functions; see a screenshot here: https://www.dropbox.com/s/wybqgtftuyqipk8/Screenshot%202018-... . This is groundbreaking, to say the least, as previously this needed to be done by adding higher-order components to inject the result of the fetch as a prop at some higher level; now, it's as simple…