Slide 1
Slide 1 text
THE BEST IS YET TO COME:
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
full
Slide 2
Slide 2 text
2
01
GOALS
Slide 3
Slide 3 text
3
contextType createRef() forwardRef()
Lifecycle Changes act()
Migrating Stuff
ReactDOM.createRoot()
lazy()
react-cache Profiler
memo()
scheduler Create React App v3
GOALS • REACT RECAP
Slide 4
Slide 4 text
4
contextType createRef() forwardRef()
Lifecycle Changes act()
Migrating Stuff
ReactDOM.createRoot()
lazy()
react-cache Profiler
memo()
scheduler Create React App v3
ALL OF THIS STARTING ON 16.3…
GOALS • REACT RECAP
Slide 5
Slide 5 text
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.“
Slide 6
Slide 6 text
01
PRESENT A FEW THOUGHTS
ON DOM, SCHEDULING
AND CONTROL FLOW
6
6
GOALS
Slide 7
Slide 7 text
02
PROVE THREE THEORIES I
HAVE REGARDING THE WEB
PLATFORM AND REACT.JS
7
7
GOALS
Slide 8
Slide 8 text
02
PROVE THREE THEORIES I
HAVE REGARDING THE WEB
PLATFORM AND REACT.JS
8
8
GOALS
no spoilers here, sorry
Slide 9
Slide 9 text
9
02
DISCLAIMERS
Slide 10
Slide 10 text
01
REACT SOURCE CODE IS
NOT EASY TO READ AND IT
IS CONSTANTLY CHANGING
10
10
DISCLAIMERS
Slide 11
Slide 11 text
02
SOME THOUGHTS HERE
ARE SPECULATIVE
11
11
DISCLAIMERS
Slide 12
Slide 12 text
03
= TO0 COMPLEX;
REACH ME OUT ON THE
AFTERPARTY
12
12
DISCLAIMERS
Slide 13
Slide 13 text
13
03
DOM
Slide 14
Slide 14 text
REACT FIRE
14
Slide 15
Slide 15 text
15
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
Slide 16
Slide 16 text
16
• Attaching event handlers 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 • REACT FIRE • ATTACH EVENTS AT THE REACT ROOT
Slide 17
Slide 17 text
17
• Stop using a different event name for what's known as input event in the DOM
• Stop polyfilling it for uncontrolled components
DOM • REACT FIRE • ONCHANGE → ONINPUT
Slide 18
Slide 18 text
REACT FLARE
18
Slide 19
Slide 19 text
19
• 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
Slide 20
Slide 20 text
20
• 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
Slide 21
Slide 21 text
21
• It includes declarative APIs for managing interactions
DOM • REACT FLARE
• useTap
• useKeyboard
• usePress
• useResponder
• useFocusManager
• listeners={…}
Slide 22
Slide 22 text
22
useKeyboard({
preventKeys: [
'Space',
[ 'Enter', { metaKey: true } ]
'Enter+Meta'
]
});
DOM • REACT FLARE
Slide 23
Slide 23 text
23
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
{String(focused)}
A button
);
DOM • REACT FLARE
Slide 24
Slide 24 text
24
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
{String(focused)}
A button
);
DOM • REACT FLARE
Slide 25
Slide 25 text
25
const [focused, setFocusState] = useState(false);
const { onBlur, onFocus } = useFocusManager({
onChange: nextFocused => setFocusState(nextFocused)
});
return (
{String(focused)}
A button
);
DOM • REACT FLARE
Slide 26
Slide 26 text
26
• 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
Slide 27
Slide 27 text
27
DOM • REACT FLARE
Slide 28
Slide 28 text
28
DOM • REACT FLARE
Slide 29
Slide 29 text
REACT.JS HAS BEEN PUSHED
BY WEB APIs TO THE FUTURE
29
29
DOM • CONCLUSIONS
Slide 30
Slide 30 text
30
04
SCHEDULING
Slide 31
Slide 31 text
OVERVIEW
31
Slide 32
Slide 32 text
32
SCHEDULING • OVERVIEW • PROBLEMS IN UIs
• Users expect immediate feedback
• Events can happen at any time
• We can’t look into the future
Slide 33
Slide 33 text
33
SCHEDULING • OVERVIEW
Slide 34
Slide 34 text
34
SCHEDULING • OVERVIEW
Slide 35
Slide 35 text
35
SCHEDULING • OVERVIEW
Slide 36
Slide 36 text
36
• Provides a scalable 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
Slide 37
Slide 37 text
REACT
37
Slide 38
Slide 38 text
38
SCHEDULING • REACT
Slide 39
Slide 39 text
39
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
Slide 40
Slide 40 text
40
SCHEDULING • REACT
Slide 41
Slide 41 text
41
http://bit.ly/fiber-in-depth
SCHEDULING • REACT
Slide 42
Slide 42 text
42
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
Slide 43
Slide 43 text
43
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
Slide 44
Slide 44 text
44
SCHEDULING • REACT
Slide 45
Slide 45 text
45
SCHEDULING • REACT • DEMO
Slide 46
Slide 46 text
46
SCHEDULING • REACT • DEMO
Slide 47
Slide 47 text
47
ReactDOM.render(
CONCURRENT_AND_SCHEDULED ? (
) : (
),
rootElement
);
SCHEDULING • REACT • DEMO
Slide 48
Slide 48 text
48
ReactDOM.render(
CONCURRENT_AND_SCHEDULED ? (
) : (
),
rootElement
);
SCHEDULING • REACT • DEMO
Enabling the unstable
Concurrent Mode
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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.
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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.
Slide 55
Slide 55 text
55
SCHEDULING • REACT • DEMO
Slide 56
Slide 56 text
56
SCHEDULING • REACT • DEMO
Slide 57
Slide 57 text
57
SCHEDULING • REACT • DEMO
Demo recap
• Concurrent React can break long running tasks into chunks
• The scheduler allows us to prioritize important updates
Slide 58
Slide 58 text
THE WEB
58
Slide 59
Slide 59 text
59
SCHEDULING • THE WEB
• Everyone should use the same scheduler
• Having more than one scheduler causes resource fighting
• Interleaving tasks with browser work (rendering, GC)
Slide 60
Slide 60 text
60
SCHEDULING • THE WEB
We have a few scheduling primitives:
• setTimeout
• requestAnimationFrame
• requestIdleCallback
• postMessage
Slide 61
Slide 61 text
WE NEED SCHEDULING
PRIMITIVES
61
61
SCHEDULING • THE WEB
Slide 62
Slide 62 text
62
SCHEDULING • THE WEB
Slide 63
Slide 63 text
63
SCHEDULING • THE WEB
https://github.com/WICG/main-thread-scheduling
Slide 64
Slide 64 text
64
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
Slide 65
Slide 65 text
65
SCHEDULING • THE WEB
Slide 66
Slide 66 text
66
SCHEDULING • THE WEB
https://engineering.fb.com/developer-tools/isinputpending-api/
Slide 67
Slide 67 text
67
SCHEDULING • THE WEB
Slide 68
Slide 68 text
68
SCHEDULING • THE WEB
https://wicg.github.io/is-input-pending
Slide 69
Slide 69 text
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 • THE WEB
Slide 70
Slide 70 text
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 • THE WEB
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
REACT.JS HAS BEEN PUSHING
WEB APIs TO THE FUTURE
72
72
SCHEDULING • CONCLUSIONS
Slide 73
Slide 73 text
73
05
CONTROL FLOW
Slide 74
Slide 74 text
EFFECT HANDLERS
74
Slide 75
Slide 75 text
75
$$$
CONTROL FLOW • EFFECT HANDLERS
Slide 76
Slide 76 text
76
CONTROL FLOW • EFFECT HANDLERS
Slide 77
Slide 77 text
77
CONTROL FLOW • EFFECT HANDLERS
https://overreacted.io/algebraic-effects-for-the-rest-of-us
Slide 78
Slide 78 text
78
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';
}
}
Slide 79
Slide 79 text
79
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
Slide 80
Slide 80 text
80
CONTROL FLOW • EFFECT HANDLERS
Slide 81
Slide 81 text
81
CONTROL FLOW • EFFECT HANDLERS
https://github.com/macabeus/js-proposal-algebraic-effects
Slide 82
Slide 82 text
REACT
82
Slide 83
Slide 83 text
83
CONTROL FLOW • REACT
Slide 84
Slide 84 text
84
CONTROL FLOW • REACT
Slide 85
Slide 85 text
85
https://esdiscuss.org/topic/one-shot-delimited-continuations-with-effect-handlers
CONTROL FLOW • REACT
Slide 86
Slide 86 text
86
CONTROL FLOW • REACT
Slide 87
Slide 87 text
87
CONTROL FLOW • REACT
The React team apparently spent some time
experimenting with using effect-handler control
structures for managing layout
Slide 88
Slide 88 text
88
CONTROL FLOW • REACT
Slide 89
Slide 89 text
89
CONTROL FLOW • REACT
…and also for implementing the context API.
Slide 90
Slide 90 text
90
CONTROL FLOW • REACT
Slide 91
Slide 91 text
91
CONTROL FLOW • REACT
Sebastian points that
“conceptually, they [hooks] are
algebraic effects”.
Slide 92
Slide 92 text
92
$$$
CONTROL FLOW • REACT
Slide 93
Slide 93 text
93
CONTROL FLOW • REACT
Slide 94
Slide 94 text
94
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.
Slide 95
Slide 95 text
95
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
Slide 96
Slide 96 text
96
2016
2016
2017
2018
2019
Effect Handlers as ECMAScript proposal
CONTROL FLOW • REACT
Effect Handlers experiments (Layout)
Effect Handlers experiments (Context)
Effect Handlers as Hooks
Effect Handlers as Suspense
Slide 97
Slide 97 text
REACT.JS HAS BEEN PUSHING
WEB APIs TO THE FUTURE
97
97
CONTROL FLOW • CONCLUSIONS
Slide 98
Slide 98 text
98
06
OTHER COOL STUFF
Slide 99
Slide 99 text
TRUSTED TYPES
99
Slide 100
Slide 100 text
100
OTHER COOL STUFF • TRUSTED TYPES
Slide 101
Slide 101 text
101
https://developers.google.com/web/updates/2019/02/trusted-types
OTHER COOL STUFF • TRUSTED TYPES
Slide 102
Slide 102 text
102
• Help obliterate DOM XSS
• Allow you to lock down the dangerous injection sinks
OTHER COOL STUFF • TRUSTED TYPES
Slide 103
Slide 103 text
103
OTHER COOL STUFF • TRUSTED TYPES
Slide 104
Slide 104 text
104
OTHER COOL STUFF • TRUSTED TYPES
Slide 105
Slide 105 text
FAST REFRESH
105
Slide 106
Slide 106 text
106
• It's a reimplementation 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.)
OTHER COOL STUFF • FAST REFRESH
Slide 107
Slide 107 text
107
OTHER COOL STUFF • FAST REFRESH
Slide 108
Slide 108 text
REACT FRESH
108
Slide 109
Slide 109 text
109
• A new generation of hot reloading
• Changes include initial scaffolding, infrastructure, and Babel plugin implementation
OTHER COOL STUFF • REACT FRESH
Slide 110
Slide 110 text
110
OTHER COOL STUFF • REACT FRESH
Slide 111
Slide 111 text
111
OTHER COOL STUFF • REACT FRESH
Slide 112
Slide 112 text
112
OTHER COOL STUFF • REACT FRESH
Z
Slide 113
Slide 113 text
113
OTHER COOL STUFF • REACT FRESH
Z
Slide 114
Slide 114 text
REACT FLIGHT
114
Slide 115
Slide 115 text
115
• ”An experimental API 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)
OTHER COOL STUFF • REACT FLIGHT
Slide 116
Slide 116 text
116
Z
OTHER COOL STUFF • REACT FLIGHT
Slide 117
Slide 117 text
117
Z
OTHER COOL STUFF • REACT FLIGHT
Slide 118
Slide 118 text
118
OTHER COOL STUFF • REACT FLIGHT
Slide 119
Slide 119 text
119
07
CONCLUSIONS
Slide 120
Slide 120 text
120
$$$
CONCLUSIONS • THEORIES
Slide 121
Slide 121 text
121
CONCLUSIONS • THEORIES
Slide 122
Slide 122 text
122
CONCLUSIONS • THEORIES
Slide 123
Slide 123 text
123
CONCLUSIONS • THEORIES
Slide 124
Slide 124 text
01
REACT.JS HAS BEEN
PUSHING OTHER
ECOSYSTEMS TO THE FUTURE
124
124
e.g. Swift UI and other declarative-UIs efforts
CONCLUSIONS • THEORIES
Slide 125
Slide 125 text
02 REACT.JS HAS BEEN PUSHING
WEB APIs TO THE FUTURE
125
125
e.g. Scheduler API, Fast Refresh, React Fresh,
Trusted Types & Effect Handlers
CONCLUSIONS • THEORIES
Slide 126
Slide 126 text
REACT.JS HAS BEEN PUSHED
BY WEB APIs TO THE FUTURE
126
126
e.g. React Fire and React Flare, Trusted Types
03
CONCLUSIONS • THEORIES
Slide 127
Slide 127 text
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.“
Slide 128
Slide 128 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
Slide 129
Slide 129 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
IS
Slide 130
Slide 130 text
ONE MORE THING
130
130
CONCLUSIONS • THE FUTURE
Slide 131
Slide 131 text
131
CONCLUSIONS • THE FUTURE
Slide 132
Slide 132 text
132
Walking this whole tree…
…just to update this value
CONCLUSIONS • THE FUTURE
Slide 133
Slide 133 text
133
133
CONCLUSIONS • THE FUTURE
Slide 134
Slide 134 text
134
shouldComponentUpdate()
PureComponent
useMemo()
useCallback()
memo
Concurrent React
CONCLUSIONS • THE FUTURE
Slide 135
Slide 135 text
135
shouldComponentUpdate()
PureComponent
useMemo()
useCallback()
memo
Concurrent React
AMORTIZATIONS FOR A CRUCIAL PERF ISSUE
CONCLUSIONS • THE FUTURE
Slide 136
Slide 136 text
136
CONCLUSIONS • THE FUTURE
Slide 137
Slide 137 text
137
Languages for describing reactive user interfaces.
CONCLUSIONS • THE FUTURE
Slide 138
Slide 138 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
IS
Slide 139
Slide 139 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
IS
NOT
Slide 140
Slide 140 text
140
140
CONCLUSIONS • THE PAST
Slide 141
Slide 141 text
141
141
This is me giving a talk about Ionic on
an iOS developers meetup five years
ago telling them that Angular would be
the future.
CONCLUSIONS • THE PAST
Slide 142
Slide 142 text
142
142
This is me giving a talk about Ionic on
an iOS developers meetup five years
ago telling them that Angular would be
the future.
CONCLUSIONS • THE PAST
Slide 143
Slide 143 text
143
143
This is me giving a talk about Ionic on
an iOS developers meetup five years
ago telling them that Angular would be
the future.
CONCLUSIONS • THE PAST
Slide 144
Slide 144 text
144
144
This is me giving a talk about Ionic on
an iOS developers meetup five years
ago telling them that Angular would be
the future.
CONCLUSIONS • THE PAST
Slide 145
Slide 145 text
04
DON’T TRUST MY FUTURE
PREDICTIONS
145
145
CONCLUSIONS • THE PAST
Slide 146
Slide 146 text
146
08
THIS TALK
Slide 147
Slide 147 text
147
THIS TALK • KEYNOTE
Slide 148
Slide 148 text
148
THIS TALK • KEYNOTE
https://speakerdeck.com/ythecombinator
Slide 149
Slide 149 text
149
MATHEUS ALBUQUERQUE
@ythecombinator
www.ythecombinator.space
[email protected]
Slide 150
Slide 150 text
150
THIS TALK • STICKERS
Slide 151
Slide 151 text
151
THIS TALK • STICKERS
I GOT STICKERS!
Slide 152
Slide 152 text
Matheus Albuquerque – Software Engineer, Front-End @ STRV
FORTE ABRAÇO