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

97d21da8e0ffa8f81218a293482c253a?s=47 Matheus
February 02, 2020

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.

97d21da8e0ffa8f81218a293482c253a?s=128

Matheus

February 02, 2020
Tweet

Transcript

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

    Matheus Albuquerque – Software Engineer, Front-End @ STRV lightning
  2. 2 01 GOALS

  3. 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.“
  4. 01 PRESENT A FEW THOUGHTS ON DOM, SCHEDULING AND CONTROL

    FLOW 4 4 GOALS
  5. 02 PROVE THREE THEORIES I HAVE REGARDING THE WEB PLATFORM

    AND REACT.JS 5 5 GOALS
  6. 02 PROVE THREE THEORIES I HAVE REGARDING THE WEB PLATFORM

    AND REACT.JS 6 6 GOALS no spoilers here, sorry
  7. 7 03 DOM

  8. REACT FIRE 8

  9. 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
  10. REACT FLARE 10

  11. 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
  12. 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
  13. 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
  14. 14 DOM • REACT FLARE

  15. 15 DOM • REACT FLARE

  16. 16 04 SCHEDULING

  17. OVERVIEW 17

  18. 18 • Users expect immediate feedback • Events can happen

    at any time • We can’t look into the future SCHEDULING • OVERVIEW
  19. 19 SCHEDULING • OVERVIEW

  20. 20 SCHEDULING • OVERVIEW

  21. 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
  22. REACT 22

  23. 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
  24. 24 SCHEDULING • REACT

  25. 25 http://bit.ly/fiber-in-depth SCHEDULING • REACT

  26. 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
  27. 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
  28. 28 SCHEDULING • REACT

  29. 29 SCHEDULING • REACT • DEMO

  30. 30 SCHEDULING • REACT • DEMO

  31. 31 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( <React.unstable_ConcurrentMode> <App /> </React.unstable_ConcurrentMode> )

    : ( <App /> ), rootElement ); SCHEDULING • REACT • DEMO
  32. 32 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( <React.unstable_ConcurrentMode> <App /> </React.unstable_ConcurrentMode> )

    : ( <App /> ), rootElement ); SCHEDULING • REACT • DEMO Enabling the unstable Concurrent Mode
  33. 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
  34. 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.
  35. 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
  36. 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
  37. 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
  38. 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.
  39. 39 SCHEDULING • REACT • DEMO

  40. 40 SCHEDULING • REACT • DEMO

  41. 41 SCHEDULING • REACT • DEMO Demo recap • Concurrent

    React can break long running tasks into chunks • The scheduler allows us to prioritize important updates
  42. THE WEB 42

  43. 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)
  44. 44 SCHEDULING • THE WEB We have a few scheduling

    primitives: • setTimeout • requestAnimationFrame • requestIdleCallback • postMessage
  45. WE NEED SCHEDULING PRIMITIVES 45 45 SCHEDULING • THE WEB

  46. 46 SCHEDULING • THE WEB

  47. 47 SCHEDULING • THE WEB https://github.com/WICG/main-thread-scheduling

  48. 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
  49. 49 SCHEDULING • THE WEB

  50. 50 SCHEDULING • THE WEB https://engineering.fb.com/developer-tools/isinputpending-api/

  51. 51 SCHEDULING • THE WEB

  52. 52 SCHEDULING • THE WEB https://wicg.github.io/is-input-pending

  53. 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
  54. 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
  55. RECAP 55

  56. 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
  57. 57 05 CONTROL FLOW

  58. EFFECT HANDLERS 58

  59. 59 ### CONTROL FLOW • EFFECT HANDLERS

  60. 60 CONTROL FLOW • EFFECT HANDLERS

  61. 61 CONTROL FLOW • EFFECT HANDLERS https://overreacted.io/algebraic-effects-for-the-rest-of-us

  62. 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'; } }
  63. 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
  64. 64 CONTROL FLOW • EFFECT HANDLERS

  65. 65 CONTROL FLOW • EFFECT HANDLERS https://github.com/macabeus/js-proposal-algebraic-effects

  66. REACT 66

  67. 67 CONTROL FLOW • REACT

  68. 68 CONTROL FLOW • REACT

  69. 69 https://esdiscuss.org/topic/one-shot-delimited-continuations-with-effect-handlers CONTROL FLOW • REACT

  70. 70 ### CONTROL FLOW • REACT

  71. 71 CONTROL FLOW • REACT

  72. 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.
  73. 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
  74. 74 06 TLDR

  75. 75 ### TLDR • THEORIES

  76. 76 TLDR • THEORIES

  77. 77 TLDR • THEORIES

  78. 78 TLDR • THEORIES

  79. 01 REACT.JS HAS BEEN PUSHING OTHER ECOSYSTEMS TO THE FUTURE

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

    80 80 TLDR • CONCLUSIONS e.g. Scheduler API and Effect Handlers
  81. 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
  82. 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.“
  83. THE BEST IS YET TO COME THE FUTURE OF REACT

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

    Matheus Albuquerque – Software Engineer, Front-End @ STRV IS
  85. ONE MORE THING 85 85

  86. 86 86

  87. 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.
  88. 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.
  89. 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.
  90. 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.
  91. 04 DON’T TRUST MY FUTURE PREDICTIONS 91 91 TLDR •

    CONCLUSIONS
  92. 92 07 THIS TALK

  93. 93 MATHEUS ALBUQUERQUE @ythecombinator www.ythecombinator.space land@ythecombinator.space

  94. THIS TALK • KEYNOTE 94

  95. THIS TALK • KEYNOTE 95 https://speakerdeck.com/ythecombinator

  96. Matheus Albuquerque – Software Engineer, Front-End @ STRV THANK YOU!

  97. Matheus Albuquerque – Software Engineer, Front-End @ STRV FORTE ABRAÇO