Slide 1
Slide 1 text
THE BEST IS YET TO COME:
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
lightning
Slide 2
Slide 2 text
2
01
GOALS
Slide 3
Slide 3 text
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.“
Slide 4
Slide 4 text
01
PRESENT A FEW THOUGHTS
ON DOM, SCHEDULING
AND CONTROL FLOW
4
4
GOALS
Slide 5
Slide 5 text
02
PROVE THREE THEORIES I
HAVE REGARDING THE WEB
PLATFORM AND REACT.JS
5
5
GOALS
Slide 6
Slide 6 text
02
PROVE THREE THEORIES I
HAVE REGARDING THE WEB
PLATFORM AND REACT.JS
6
6
GOALS
no spoilers here, sorry
Slide 7
Slide 7 text
7
03
DOM
Slide 8
Slide 8 text
REACT FIRE
8
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
REACT FLARE
10
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
14
DOM • REACT FLARE
Slide 15
Slide 15 text
15
DOM • REACT FLARE
Slide 16
Slide 16 text
16
04
SCHEDULING
Slide 17
Slide 17 text
OVERVIEW
17
Slide 18
Slide 18 text
18
• Users expect immediate feedback
• Events can happen at any time
• We can’t look into the future
SCHEDULING • OVERVIEW
Slide 19
Slide 19 text
19
SCHEDULING • OVERVIEW
Slide 20
Slide 20 text
20
SCHEDULING • OVERVIEW
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
REACT
22
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
24
SCHEDULING • REACT
Slide 25
Slide 25 text
25
http://bit.ly/fiber-in-depth
SCHEDULING • REACT
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
28
SCHEDULING • REACT
Slide 29
Slide 29 text
29
SCHEDULING • REACT • DEMO
Slide 30
Slide 30 text
30
SCHEDULING • REACT • DEMO
Slide 31
Slide 31 text
31
ReactDOM.render(
CONCURRENT_AND_SCHEDULED ? (
) : (
),
rootElement
);
SCHEDULING • REACT • DEMO
Slide 32
Slide 32 text
32
ReactDOM.render(
CONCURRENT_AND_SCHEDULED ? (
) : (
),
rootElement
);
SCHEDULING • REACT • DEMO
Enabling the unstable
Concurrent Mode
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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.
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
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.
Slide 39
Slide 39 text
39
SCHEDULING • REACT • DEMO
Slide 40
Slide 40 text
40
SCHEDULING • REACT • DEMO
Slide 41
Slide 41 text
41
SCHEDULING • REACT • DEMO
Demo recap
• Concurrent React can break long running tasks into chunks
• The scheduler allows us to prioritize important updates
Slide 42
Slide 42 text
THE WEB
42
Slide 43
Slide 43 text
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)
Slide 44
Slide 44 text
44
SCHEDULING • THE WEB
We have a few scheduling primitives:
• setTimeout
• requestAnimationFrame
• requestIdleCallback
• postMessage
Slide 45
Slide 45 text
WE NEED SCHEDULING
PRIMITIVES
45
45
SCHEDULING • THE WEB
Slide 46
Slide 46 text
46
SCHEDULING • THE WEB
Slide 47
Slide 47 text
47
SCHEDULING • THE WEB
https://github.com/WICG/main-thread-scheduling
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
49
SCHEDULING • THE WEB
Slide 50
Slide 50 text
50
SCHEDULING • THE WEB
https://engineering.fb.com/developer-tools/isinputpending-api/
Slide 51
Slide 51 text
51
SCHEDULING • THE WEB
Slide 52
Slide 52 text
52
SCHEDULING • THE WEB
https://wicg.github.io/is-input-pending
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
RECAP
55
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
57
05
CONTROL FLOW
Slide 58
Slide 58 text
EFFECT HANDLERS
58
Slide 59
Slide 59 text
59
###
CONTROL FLOW • EFFECT HANDLERS
Slide 60
Slide 60 text
60
CONTROL FLOW • EFFECT HANDLERS
Slide 61
Slide 61 text
61
CONTROL FLOW • EFFECT HANDLERS
https://overreacted.io/algebraic-effects-for-the-rest-of-us
Slide 62
Slide 62 text
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';
}
}
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
64
CONTROL FLOW • EFFECT HANDLERS
Slide 65
Slide 65 text
65
CONTROL FLOW • EFFECT HANDLERS
https://github.com/macabeus/js-proposal-algebraic-effects
Slide 66
Slide 66 text
REACT
66
Slide 67
Slide 67 text
67
CONTROL FLOW • REACT
Slide 68
Slide 68 text
68
CONTROL FLOW • REACT
Slide 69
Slide 69 text
69
https://esdiscuss.org/topic/one-shot-delimited-continuations-with-effect-handlers
CONTROL FLOW • REACT
Slide 70
Slide 70 text
70
###
CONTROL FLOW • REACT
Slide 71
Slide 71 text
71
CONTROL FLOW • REACT
Slide 72
Slide 72 text
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.
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
74
06
TLDR
Slide 75
Slide 75 text
75
###
TLDR • THEORIES
Slide 76
Slide 76 text
76
TLDR • THEORIES
Slide 77
Slide 77 text
77
TLDR • THEORIES
Slide 78
Slide 78 text
78
TLDR • THEORIES
Slide 79
Slide 79 text
01
REACT.JS HAS BEEN
PUSHING OTHER
ECOSYSTEMS TO THE FUTURE
79
79
TLDR • CONCLUSIONS
e.g. Swift UI and other declarative-UIs efforts
Slide 80
Slide 80 text
02 REACT.JS HAS BEEN PUSHING
WEB APIs TO THE FUTURE
80
80
TLDR • CONCLUSIONS
e.g. Scheduler API and Effect Handlers
Slide 81
Slide 81 text
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
Slide 82
Slide 82 text
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.“
Slide 83
Slide 83 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
Slide 84
Slide 84 text
THE BEST IS YET TO COME
THE FUTURE OF REACT
Matheus Albuquerque – Software Engineer, Front-End @ STRV
IS
Slide 85
Slide 85 text
ONE MORE THING
85
85
Slide 86
Slide 86 text
86
86
Slide 87
Slide 87 text
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.
Slide 88
Slide 88 text
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.
Slide 89
Slide 89 text
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.
Slide 90
Slide 90 text
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.
Slide 91
Slide 91 text
04
DON’T TRUST MY FUTURE
PREDICTIONS
91
91
TLDR • CONCLUSIONS
Slide 92
Slide 92 text
92
07
THIS TALK
Slide 93
Slide 93 text
93
MATHEUS
ALBUQUERQUE
@ythecombinator
www.ythecombinator.space
[email protected]
Slide 94
Slide 94 text
THIS TALK • KEYNOTE
94
Slide 95
Slide 95 text
THIS TALK • KEYNOTE
95
https://speakerdeck.com/ythecombinator
Slide 96
Slide 96 text
Matheus Albuquerque – Software Engineer, Front-End @ STRV
THANK YOU!
Slide 97
Slide 97 text
Matheus Albuquerque – Software Engineer, Front-End @ STRV
FORTE ABRAÇO