Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The best is yet to come: the Future of React • ...

The best is yet to come: the Future of React • LIGHTNING

A wise man once said: "React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications".

In 2017, React Fiber was the thing in the community. In 2018, hooks – and the completely new mindset they brought along – took that role with a little help of Concurrent React.

But there are a few big things coming next: React Fire, React Flare and the Scheduler. These go from completely rethinking the event system to bringing cooperative scheduling to the browser environment; and much more!

In this talk, we’ll look at what are these, how they fit together with other changes and, hopefully, by the end of the talk, you'll be just as enthusiastic as I am about what's coming down the line.

Last but not least, we'll take a glimpse into the future of the Web platform.

Matheus Albuquerque

February 02, 2020
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. THE BEST IS YET TO COME: THE FUTURE OF REACT

    Matheus Albuquerque – Software Engineer, Front-End @ STRV lightning
  2. 3 Guillermo Rauch, CEO @ZEIT “React is such a good

    idea that we will spend the rest of the decade continuing to explore its implications and applications.“
  3. 02 PROVE THREE THEORIES I HAVE REGARDING THE WEB PLATFORM

    AND REACT.JS 6 6 GOALS no spoilers here, sorry
  4. 9 Consists of… • An effort to modernize React DOM

    • Focused on making React better aligned with how the DOM works • It also aims to make React smaller and faster It brings… • Attach events at the React root rather than the document • Migrate from onChange to onInput and don’t polyfill it for uncontrolled components • className → class • React Flare • … DOM • REACT FIRE
  5. 11 • Experimental React Events API (react-events) • Necolas is

    the creator of react-native-web and cares a lot about cross-platform consistency • The Event System umbrella under React Fire DOM • REACT FLARE
  6. 12 • Make it easy to build UIs that feel

    great on desktop and mobile, with mouse and touch, and that are accessible • It includes declarative APIs for managing interactions • Unlike with the current React event system, the Flare design doesn't inflate the bundle for events you don't use • It should allow to cut down the amount of code in UI libraries that deal with mouse and touch events DOM • REACT FLARE
  7. 13 • The Flare event system ended up being a

    too-high-level-abstraction • As parts of the event system considered unnecessary or outdated were removed, they discovered many edge cases where it was being very helpful and prevented bugs • Reducing library code to re-add it several times in the application code was not the best tradeoff • Even basic things like buttons feel very different with mouse and touch when you use events like onClick DOM • REACT FLARE
  8. 18 • Users expect immediate feedback • Events can happen

    at any time • We can’t look into the future SCHEDULING • OVERVIEW
  9. 21 • Provides a scalable solution to performance • Lets

    us coordinate CPU and network-bound updates • Improves perceived performance • Low/Idle priority work • It doesn’t solve React.js problems; it solves UI problems SCHEDULING • OVERVIEW
  10. 23 SCHEDULING • REACT Concurrent React • Allows rendering work

    to be paused and resumed later • Makes tasks smaller Scheduler • A way to schedule work in the browser • Unstable! API will change
  11. 26 SCHEDULING • REACT Immediate User Blocking Normal Low Idle

    "Do it now" Now! "Do it now" 250ms "Do it soon" 5s "Do it eventually” 10s "Do it if you can” No timeout
  12. 27 SCHEDULING • REACT Immediate User Blocking Normal Low Idle

    "Do it now" Now! "Do it now" 250ms "Do it soon" 5s "Do it eventually” 10s "Do it if you can” No timeout first one is really sync
  13. 32 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( <React.unstable_ConcurrentMode> <App /> </React.unstable_ConcurrentMode> )

    : ( <App /> ), rootElement ); SCHEDULING • REACT • DEMO Enabling the unstable Concurrent Mode
  14. 33 const handleChange = useCallback(event => { const value =

    event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO
  15. 34 const handleChange = useCallback(event => { const value =

    event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO Queue a task with a lower priority than the default priority of interaction callbacks.
  16. 35 const handleChange = useCallback(event => { const value =

    event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO
  17. 36 const handleChange = useCallback(event => { const value =

    event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO
  18. 37 const sendPing = value => { performance.mark("analytics-start"); someRandomOperation(25); performance.mark("analytics-end");

    performance.measure( "Analytics: " + value, "analytics-start", "analytics-end" ); }; const sendDeferredPing = value => { unstable_scheduleCallback(unstable_LowPriority, function() { sendPing(value); }); }; SCHEDULING • REACT • DEMO
  19. 38 const sendPing = value => { performance.mark("analytics-start"); someRandomOperation(25); performance.mark("analytics-end");

    performance.measure( "Analytics: " + value, "analytics-start", "analytics-end" ); }; const sendDeferredPing = value => { unstable_scheduleCallback(unstable_LowPriority, function() { sendPing(value); }); }; SCHEDULING • REACT • DEMO We can schedule a callback with an even lower priority.
  20. 41 SCHEDULING • REACT • DEMO Demo recap • Concurrent

    React can break long running tasks into chunks • The scheduler allows us to prioritize important updates
  21. 43 SCHEDULING • THE WEB • Everyone should use the

    same scheduler • Having more than one scheduler causes resource fighting • Interleaving tasks with browser work (rendering, GC)
  22. 44 SCHEDULING • THE WEB We have a few scheduling

    primitives: • setTimeout • requestAnimationFrame • requestIdleCallback • postMessage
  23. 48 SCHEDULING • THE WEB • Developed in cooperation with

    React, Polymer, Ember, Google Maps, and the Web Standards Community • Aligned with the work of the React Core Team • Integrated directly into the event loop
  24. 53 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { //

    Stop doing work if we have to handle an input event. break; } let job = workQueue.shift(); job.execute(); } SCHEDULING • THE WEB
  25. 54 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending(['mousedown', 'keydown'])) {

    // Stop doing work if we think we'll start receiving a mouse or key event. break; } let job = workQueue.shift(); job.execute(); } SCHEDULING • THE WEB
  26. 56 SCHEDULING • RECAP • Scheduling is necessary for responsive

    user interfaces • We can solve a lot at the framework level with Concurrent React and the Scheduler • A Web Standards proposal is in making that brins a scheduler API to the browser
  27. 62 CONTROL FLOW • EFFECT HANDLERS function getName(user) { let

    name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } }
  28. 63 CONTROL FLOW • EFFECT HANDLERS function getName(user) { let

    name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } } throw ↝ perform catch ↝ handle lets us jump back to where we performed the effect
  29. 72 CONTROL FLOW • REACT A component is able to

    suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework.
  30. 73 CONTROL FLOW • REACT A component is able to

    suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework. throw-handle-resume pattern
  31. 01 REACT.JS HAS BEEN PUSHING OTHER ECOSYSTEMS TO THE FUTURE

    79 79 TLDR • CONCLUSIONS e.g. Swift UI and other declarative-UIs efforts
  32. 02 REACT.JS HAS BEEN PUSHING WEB APIs TO THE FUTURE

    80 80 TLDR • CONCLUSIONS e.g. Scheduler API and Effect Handlers
  33. REACT.JS HAS BEEN PUSHED BY WEB APIs TO THE FUTURE

    81 81 TLDR • CONCLUSIONS e.g. React Fire & React Flare, effort on Hooks 03
  34. 82 Guillermo Rauch, CEO @ZEIT “React is such a good

    idea that we will spend the rest of the decade continuing to explore its implications and applications.“
  35. THE BEST IS YET TO COME THE FUTURE OF REACT

    Matheus Albuquerque – Software Engineer, Front-End @ STRV
  36. THE BEST IS YET TO COME THE FUTURE OF REACT

    Matheus Albuquerque – Software Engineer, Front-End @ STRV IS
  37. 87 87 This is me giving a talk about Ionic

    on an iOS developers meetup five years ago telling them that Angular would be the future.
  38. 88 88 This is me giving a talk about Ionic

    on an iOS developers meetup five years ago telling them that Angular would be the future.
  39. 89 89 This is me giving a talk about Ionic

    on an iOS developers meetup five years ago telling them that Angular would be the future.
  40. 90 90 This is me giving a talk about Ionic

    on an iOS developers meetup five years ago telling them that Angular would be the future.