Download to read offline
![22
useKeyboard({
preventKeys: [
'Space',
[ 'Enter', { metaKey: true } ]
'Enter+Meta'
]
});
DOM•REACTFLARE](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-22-2048.jpg)
![23
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
<div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
{String(focused)}
<input />
<input />
<button>A button</button>
</div>
);
DOM•REACTFLARE](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-23-2048.jpg)
![24
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
<div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
{String(focused)}
<input />
<input />
<button>A button</button>
</div>
);
DOM•REACTFLARE](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-24-2048.jpg)
![25
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
<div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
{String(focused)}
<input />
<input />
<button>A button</button>
</div>
);
DOM•REACTFLARE](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-25-2048.jpg)
![70
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 • THEWEB](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-70-2048.jpg)
![78
CONTROLFLOW•EFFECTHANDLERS
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';
}
}](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-78-2048.jpg)
![79
CONTROLFLOW•EFFECTHANDLERS
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](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-79-2048.jpg)
![91
CONTROLFLOW•REACT
Sebastian points that
“conceptually, they [hooks] are
algebraic effects”.](https://image.slidesharecdn.com/thebestisyettocomethefutureofreactkiyv-200317151307/75/Matheus-Albuquerque-The-best-is-yet-to-come-the-Future-of-React-91-2048.jpg)
Uploaded byFwdays
Matheus Albuquerque "The best is yet to come: the Future of React"
The document is a presentation by Matheus Albuquerque on the future of React, focusing on updates such as modernizing React DOM, scheduling improvements for better UI responsiveness, and experimental APIs like React Fire and React Flare. It discusses how these advancements align with web standards and the impact on developer experiences, especially in addressing performance and user interaction complexities. The overarching theme emphasizes React's evolution as a tool that pushes the boundaries of web APIs and its continuous exploration and application in modern development.
More Related Content
Similar to Matheus Albuquerque "The best is yet to come: the Future of React"
Matheus Albuquerque "The best is yet to come: the Future of React"
- 1. THEBESTISYETTOCOME: THEFUTUREOF REACTMatheus Albuquerque– Software Engineer, Front-End @ STRV full
- 2.
- 3. 3 contextType createRef() forwardRef() LifecycleChanges<StrictMode/> act() MigratingStuffReactDOM.createRoot() lazy() <Suspense/>react-cache Profiler memo()scheduler CreateReactAppv3 GOALS•REACTRECAP
- 4. 4 contextType createRef() forwardRef() LifecycleChanges<StrictMode/> act() MigratingStuffReactDOM.createRoot() lazy() <Suspense/>react-cache Profiler memo()scheduler CreateReactAppv3 ALL OFTHISSTARTINGON 16.3… GOALS•REACTRECAP
- 5. 5 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.“
- 6.
- 7. 02 PROVETHREETHEORIES I HAVEREGARDINGTHE WEB PLATFORMANDREACT.JS 77 GOALS
- 8. 02 PROVETHREETHEORIES I HAVEREGARDINGTHE WEB PLATFORMANDREACT.JS 88 GOALS no spoilers here, sorry
- 9.
- 10.
- 11.
- 12. 03 = TO0COMPLEX; REACHME OUTONTHE AFTERPARTY 1212 DISCLAIMERS 🍻
- 13.
- 14.
- 15. 15 Consists of… • Aneffort 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•REACTFIRE
- 16. 16 • Attaching eventhandlers to the document becomes an issue when embedding React apps into larger systems • Any big application eventually faces complex edge cases related to stopPropagation interacting with non- React code or across React roots • The Atom editor was one of the first cases that bumped into this DOM•REACTFIRE •ATTACHEVENTSATTHEREACTROOT
- 17. 17 • Stop usinga different event name for what's known as input event in the DOM • Stop polyfilling it for uncontrolled components DOM•REACTFIRE •ONCHANGE →ONINPUT
- 18.
- 19. 19 • Experimental ReactEvents 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•REACTFLARE
- 20. 20 • Make iteasy 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•REACTFLARE
- 21. 21 • It includesdeclarative APIs for managing interactions DOM•REACTFLARE • useTap • useKeyboard • usePress • useResponder • useFocusManager • listeners={…}
- 22. 22 useKeyboard({ preventKeys: [ 'Space', [ 'Enter',{ metaKey: true } ] 'Enter+Meta' ] }); DOM•REACTFLARE
- 23. 23 const [focused, setFocusState]= useState(false); const { onBlur, onFocus } = useFocusManager({ onChange: nextFocused => setFocusState(nextFocused) }); return ( <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}> {String(focused)} <input /> <input /> <button>A button</button> </div> ); DOM•REACTFLARE
- 24. 24 const [focused, setFocusState]= useState(false); const { onBlur, onFocus } = useFocusManager({ onChange: nextFocused => setFocusState(nextFocused) }); return ( <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}> {String(focused)} <input /> <input /> <button>A button</button> </div> ); DOM•REACTFLARE
- 25. 25 const [focused, setFocusState]= useState(false); const { onBlur, onFocus } = useFocusManager({ onChange: nextFocused => setFocusState(nextFocused) }); return ( <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}> {String(focused)} <input /> <input /> <button>A button</button> </div> ); DOM•REACTFLARE
- 26. 26 • The Flareevent 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•REACTFLARE
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. 32 SCHEDULING • OVERVIEW•PROBLEMSINUIs • Users expect immediate feedback • Events can happen at any time • We can’t look into the future
- 33.
- 34.
- 35.
- 36. 36 • Provides ascalable solution to performance • Lets us coordinate CPU and network-bound updates • Improves perceived performance • It doesn’t solve React.js problems; it solves UI problems SCHEDULING • OVERVIEW
- 37.
- 38.
- 39. 39 SCHEDULING • REACT ConcurrentReact • 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
- 40.
- 41.
- 42. 42 SCHEDULING • REACT Immediate UserBlocking 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 🤷
- 43. 43 SCHEDULING • REACT Immediate UserBlocking 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
- 44.
- 45.
- 46.
- 47. 47 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( <React.unstable_ConcurrentMode> <App/> </React.unstable_ConcurrentMode> ) : ( <App /> ), rootElement ); SCHEDULING • REACT• DEMO
- 48. 48 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( <React.unstable_ConcurrentMode> <App/> </React.unstable_ConcurrentMode> ) : ( <App /> ), rootElement ); SCHEDULING • REACT• DEMO Enabling the unstable Concurrent Mode
- 49. 49 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
- 50. 50 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.
- 51. 51 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
- 52. 52 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
- 53. 53 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
- 54. 54 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.
- 55.
- 56.
- 57. 57 SCHEDULING • REACT•DEMO Demo recap • Concurrent React can break long running tasks into chunks • The scheduler allows us to prioritize important updates
- 58.
- 59. 59 SCHEDULING • THEWEB •Everyone should use the same scheduler • Having more than one scheduler causes resource fighting • Interleaving tasks with browser work (rendering, GC)
- 60. 60 SCHEDULING • THEWEB Wehave a few scheduling primitives: • setTimeout • requestAnimationFrame • requestIdleCallback • postMessage
- 61.
- 62.
- 63.
- 64. 64 SCHEDULING • THEWEB •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
- 65.
- 66.
- 67.
- 68.
- 69. 69 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 • THEWEB
- 70. 70 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 • THEWEB
- 71. 71 SCHEDULING • CONCLUSIONS •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
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. 78 CONTROLFLOW•EFFECTHANDLERS function getName(user) { letname = 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'; } }
- 79. 79 CONTROLFLOW•EFFECTHANDLERS function getName(user) { letname = 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
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87. 87 CONTROLFLOW•REACT The React teamapparently spent some time experimenting with using effect-handler control structures for managing layout
- 88.
- 89. 89 CONTROLFLOW•REACT …and also forimplementing the context API.
- 90.
- 91. 91 CONTROLFLOW•REACT Sebastian points that “conceptually,they [hooks] are algebraic effects”.
- 92.
- 93.
- 94. 94 CONTROLFLOW•REACT A component isable to suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework.
- 95. 95 CONTROLFLOW•REACT A component isable to suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework. throw-handle-resume pattern
- 96. 96 2016 2016 2017 2018 2019 Effect Handlers asECMAScript proposal CONTROLFLOW•REACT Effect Handlers experiments (Layout) Effect Handlers experiments (Context) Effect Handlers as Hooks Effect Handlers as Suspense
- 97.
- 98.
- 99.
- 100.
- 101.
- 102. 102 • Help obliterateDOM XSS • Allow you to lock down the dangerous injection sinks OTHERCOOLSTUFF• TRUSTEDTYPES
- 103.
- 104.
- 105.
- 106. 106 • It's areimplementation of hot reloading with full support from React • It's originally shipping for React Native but most of the implementation is platform-independent • The plan is to use it across the board — as a replacement for purely userland solutions (like react-hot-loader) • Adoption requires integration with existing bundlers common on the web (e.g. Webpack, Parcel etc.) OTHERCOOLSTUFF• FAST REFRESH
- 107.
- 108.
- 109. 109 • A newgeneration of hot reloading • Changes include initial scaffolding, infrastructure, and Babel plugin implementation OTHERCOOLSTUFF• REACTFRESH
- 110.
- 111.
- 112.
- 113.
- 114.
- 115. 115 • ”An experimentalAPI aimed to greatly improve server side rendering experience” – Philipp Spiess • ”A non-GraphQL solution for composing arbitrary data logic in a parallel hierarchy to your components” – Dan Abramov • Probably somehow related to mapping URLs to data and views (similar to Navi) OTHERCOOLSTUFF• REACTFLIGHT
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124. 01 REACT.JSHASBEEN PUSHINGOTHER ECOSYSTEMSTOTHEFUTURE 124124 e.g. Swift UIand other declarative-UIs efforts CONCLUSIONS• THEORIES
- 125. 02 REACT.JSHASBEENPUSHING WEBAPIsTOTHE FUTURE 125125 e.g. SchedulerAPI, Fast Refresh, React Fresh, Trusted Types & Effect Handlers CONCLUSIONS• THEORIES
- 126. REACT.JSHASBEEN PUSHED BYWEBAPIs TOTHEFUTURE 126126 e.g.React Fire and React Flare, Trusted Types 03 CONCLUSIONS• THEORIES
- 127. 127 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.“
- 128. THEBESTISYETTOCOME THEFUTUREOF REACTMatheus Albuquerque– Software Engineer, Front-End @ STRV
- 129. THEBESTISYETTOCOME THEFUTUREOFREACTMatheus Albuquerque –Software Engineer, Front-End @ STRV IS
- 130.
- 131.
- 132. 132 Walking this wholetree… …just to update this value CONCLUSIONS• THEFUTURE
- 133.
- 134.
- 135.
- 136.
- 137. 137 Languages for describingreactive user interfaces. CONCLUSIONS• THEFUTURE
- 138. THEBESTISYETTOCOME THEFUTUREOFREACTMatheus Albuquerque –Software Engineer, Front-End @ STRV IS
- 139. THEBESTISYETTOCOME THEFUTUREOFREACTMatheus Albuquerque –Software Engineer, Front-End @ STRV IS NOT
- 140.
- 141. 141141 This is megiving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future. CONCLUSIONS• THEPAST
- 142. 142142 This is megiving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future. CONCLUSIONS• THEPAST
- 143. 143143 This is megiving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future. CONCLUSIONS• THEPAST
- 144. 144144 This is megiving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future. CONCLUSIONS• THEPAST
- 145.
- 146.
- 147.
- 148.
- 149.
- 150. 150 THIS TALK •STICKERS
- 151. 151 THIS TALK •STICKERS IGOT STICKERS! 🎆
- 152. Matheus Albuquerque –Software Engineer, Front-End @ STRV FORTEABRAÇO 🤙