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.

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