Slide 1
Slide 1 text
FIBER
TLDR
f
by Mathe Albuquрque
ide
the -depth рview y w ted a
Slide 2
Slide 2 text
Goals
2
Slide 3
Slide 3 text
1 CLARIFY A BIT ABOUT WHAT HAPPENS
UNDER OUR REACT COMPONENTS
3
3
GOALS
Slide 4
Slide 4 text
2
INTRODUCE YOU TO SOME CS
CONCEPTS WE USUALLY FACE WHEN
READING REACT.JS DISCUSSION
THREADS ON TWITTER AND GITHUB
4
4
GOALS
Slide 5
Slide 5 text
Disclaimers
5
Slide 6
Slide 6 text
1 REACT SOURCE CODE IS NOT EASY TO
READ; IT IS CONSTANTLY CHANGING,
AND SOME THOUGHTS ARE SPECULATIVE
6
6
DISCLAIMERS
Slide 7
Slide 7 text
1 REACT SOURCE CODE IS NOT EASY TO
READ; IT IS CONSTANTLY CHANGING,
AND SOME THOUGHTS ARE SPECULATIVE
7
7
DISCLAIMERS
REACT SOURCE BE LIKE
Slide 8
Slide 8 text
2 MAYBE THIS TALK WON’T BE 100%
WHAT YOU’D CALL A TLDR
8
8
DISCLAIMERS
Slide 9
Slide 9 text
Some Context
9
Slide 10
Slide 10 text
10
10
Slide 11
Slide 11 text
11
11
HTTPS://GITHUB.COM/MACABEUS/JS-PROPOSAL-ALGEBRAIC-EFFECTS
Slide 12
Slide 12 text
12
12
CONTINUATIONS
ALGEBRAIC EFFECTS
COROUTINES
FIBERS
THREADS
GENERATORS
Slide 13
Slide 13 text
13
13
CONTINUATIONS
ALGEBRAIC EFFECTS
COROUTINES
FIBERS
THREADS
GENERATORS
Slide 14
Slide 14 text
Agenda
14
Slide 15
Slide 15 text
↝ FIBER(S)
↝ COROUTINES
↝ CONTINUATIONS
↝ EFFECT HANDLERS
↝ CONCLUSIONS
15
15
AGENDA
Slide 16
Slide 16 text
Fiber
16
Slide 17
Slide 17 text
OVERVIEW
17
Slide 18
Slide 18 text
18
18
Slide 19
Slide 19 text
19
19
HTTPS://YOUTU.BE/ZCUYPIUIONS
Slide 20
Slide 20 text
BRIEFLY, IT'S A REWRITE OF REACT’S
CORE RECONCILIATION ALGORITHM TO
PROVIDE GREATER CONTROL OVER THE
RENDER CYCLE
20
20
FIBER • OVERVIEW
Slide 21
Slide 21 text
THE FIBER ARCHITECTURE IS A REACT-
SPECIFIC IMPLEMENTATION OF A CALL-
STACK-LIKE MODEL WHERE REACT HAS
FULL CONTROL OF SCHEDULING WHAT
SHOULD BE DONE
21
21
FIBER • OVERVIEW
Slide 22
Slide 22 text
THE FIBER ARCHITECTURE IS A REACT-
SPECIFIC IMPLEMENTATION OF A CALL-
STACK-LIKE MODEL WHERE REACT HAS
FULL CONTROL OF SCHEDULING WHAT
SHOULD BE DONE
22
22
FIBER • OVERVIEW
AND A FIBER ITSELF
COULD BE SEEN AS A
STACK FRAME FOR A
REACT COMPONENT
Slide 23
Slide 23 text
23
23
function add(x,y) {
const result = x + y;
return result;
}
add(2, 2)
FIBER • OVERVIEW
Slide 24
Slide 24 text
24
24
FIBER • OVERVIEW
Slide 25
Slide 25 text
25
25
FIBER • OVERVIEW
Slide 26
Slide 26 text
26
26
FIBER • OVERVIEW
Slide 27
Slide 27 text
27
27
FIBER • OVERVIEW
Slide 28
Slide 28 text
28
28
FIBER • OVERVIEW
Slide 29
Slide 29 text
29
29
FIBER • OVERVIEW
Slide 30
Slide 30 text
ITS EXCITING FEATURES DEPEND
MOSTLY ON THE ABILITY TO PAUSE AND
RESUME IN THE MIDDLE OF A RENDER
CYCLE.
30
30
FIBER • OVERVIEW
Slide 31
Slide 31 text
SOME OF THOSE FEATURES ARE:
↝ ERROR BOUNDARIES
↝ SUSPENSE
↝ TIME SLICING
31
31
FIBER • OVERVIEW
Slide 32
Slide 32 text
32
32
Slide 33
Slide 33 text
33
33
HTTPS://YOUTU.BE/NLF0N9SACD4
Slide 34
Slide 34 text
ELEMENTS
AND
NODES
34
Slide 35
Slide 35 text
35
35
Slide 36
Slide 36 text
ONCE A TEMPLATE GOES THROUGH THE
JSX COMPILER, YOU END UP WITH A
BUNCH OF REACT ELEMENTS.
36
36
FIBER • ELEMENTS AND NODES
Slide 37
Slide 37 text
37
37
Slide 38
Slide 38 text
THIS IS WHAT’S REALLY RETURNED
FROM THE RENDER METHOD OF REACT
COMPONENTS, NOT HTML.
38
38
FIBER • ELEMENTS AND NODES
Slide 39
Slide 39 text
REACT ADDS THE PROPERTY $$TYPEOF TO THESE
OBJECTS TO UNIQUELY IDENTIFY THEM AS REACT
ELEMENTS. THEN WE HAVE PROPERTIES TYPE,
KEY AND PROPS THAT DESCRIBE THE ELEMENT.
39
39
FIBER • ELEMENTS AND NODES
Slide 40
Slide 40 text
DURING RECONCILIATION DATA FROM
EVERY REACT ELEMENT RETURNED FROM
THE RENDER METHOD IS MERGED INTO
THE TREE OF FIBER NODES.
40
40
FIBER • ELEMENTS AND NODES
Slide 41
Slide 41 text
DURING RECONCILIATION DATA FROM
EVERY REACT ELEMENT RETURNED FROM
THE RENDER METHOD IS MERGED INTO
THE TREE OF FIBER NODES.
41
41
FIBER • ELEMENTS AND NODES
DEPENDING ON THE TYPE OF
A REACT ELEMENT THE
FRAMEWORK NEEDS TO
PERFORM DIFFERENT
ACTIVITIES.
Slide 42
Slide 42 text
DURING RECONCILIATION DATA FROM
EVERY REACT ELEMENT RETURNED FROM
THE RENDER METHOD IS MERGED INTO
THE TREE OF FIBER NODES.
42
42
FIBER • ELEMENTS AND NODES
DEPENDING ON THE TYPE OF
A REACT ELEMENT THE
FRAMEWORK NEEDS TO
PERFORM DIFFERENT
ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO
A FIBER NODE THAT DESCRIBES THE
WORK THAT NEEDS TO BE DONE.
Slide 43
Slide 43 text
YOU CAN THINK OF A FIBER AS A DATA
STRUCTURE THAT REPRESENTS A UNIT
OF WORK.
43
43
FIBER • ELEMENTS AND NODES
Slide 44
Slide 44 text
44
44
FIBER • ELEMENTS AND NODES
YOU CAN THINK OF A FIBER AS A DATA
STRUCTURE THAT REPRESENTS A UNIT
OF WORK.
AND THAT MAKES IT A
CONVENIENT WAY TO
TRACK, SCHEDULE,
PAUSE AND ABORT THE
WORK.
Slide 45
Slide 45 text
45
45
Slide 46
Slide 46 text
46
46
Slide 47
Slide 47 text
47
47
HostRoot
App
div
Header
img
Display
div
Control
div
Control
div
CHILD
RETURN
SIBLING
Slide 48
Slide 48 text
CURRENT TREE
48
48
FIBER • ELEMENTS AND NODES
WORK IN PROGRESS TREE
Slide 49
Slide 49 text
CURRENT TREE
49
49
FIBER • ELEMENTS AND NODES
REFLECTS THE STATE OF THE
APPLICATION THAT WAS USED TO
RENDER THE UI.
Slide 50
Slide 50 text
WORK IN PROGRESS TREE
50
50
FIBER • ELEMENTS AND NODES
REFLECTS THE FUTURE STATE TO BE
FLUSHED TO THE SCREEN.
Slide 51
Slide 51 text
CURRENT TREE
51
51
FIBER • ELEMENTS AND NODES
WORK IN PROGRESS TREE
REACT ALWAYS UPDATES THE DOM IN
ONE GO — IT DOESN’T SHOW PARTIAL
RESULTS.
Slide 52
Slide 52 text
SIDE
EFFECTS
52
Slide 53
Slide 53 text
A COMPONENT IS A FUNCTION THAT
USES THE STATE AND PROPS TO
COMPUTE THE UI. EVERY OTHER
ACTIVITY SHOULD BE CONSIDERED A
SIDE-EFFECT.
53
53
FIBER • SIDE EFFECTS
Slide 54
Slide 54 text
SINCE APPLYING EFFECTS IS A TYPE OF
WORK, A FIBER NODE IS A CONVENIENT
MECHANISM TO TRACK EFFECTS IN
ADDITION TO UPDATES.
54
54
FIBER • SIDE EFFECTS
Slide 55
Slide 55 text
REACT PROCESSES UPDATES VERY
QUICKLY. ONE OF THE TECHNIQUES IT
USES IS BUILDING A LINEAR LIST OF
FIBER NODES WITH EFFECTS FOR QUICK
ITERATION.
55
55
FIBER • SIDE EFFECTS
Slide 56
Slide 56 text
NODE
STRUCTURE
56
Slide 57
Slide 57 text
EVERY REACT APPLICATION HAS ONE OR
MORE DOM ELEMENTS THAT ACT AS
CONTAINERS. REACT CREATES A FIBER
ROOT OBJECT FOR EACH OF THOSE
CONTAINERS.
57
57
FIBER • NODE STRUCTURE
Slide 58
Slide 58 text
58
58
Slide 59
Slide 59 text
59
59
Slide 60
Slide 60 text
60
60
TAG
DEFINES THE TYPE OF THE FIBER.
IT’S USED DURING
RECONCILIATION TO DETERMINE
WHAT WORK NEEDS TO BE DONE.
Slide 61
Slide 61 text
61
61
Slide 62
Slide 62 text
62
62
Slide 63
Slide 63 text
63
63
Slide 64
Slide 64 text
64
64
KEY
UNIQUE IDENTIFIER WITH A GROUP OF
CHILDREN TO HELP REACT FIGURE OUT
WHICH ITEMS HAVE CHANGED, HAVE BEEN
ADDED OR REMOVED FROM THE LIST.
Slide 65
Slide 65 text
65
65
UPDATEQUEUE
A QUEUE OF STATE
UPDATES, CALLBACKS AND
DOM UPDATES.
Slide 66
Slide 66 text
66
66
MEMOIZEDSTATE
STATE OF THE FIBER THAT
WAS USED TO CREATE THE
OUTPUT.
Slide 67
Slide 67 text
67
67
MEMOIZEDPROPS
PROPS OF THE FIBER THAT
WERE USED TO CREATE THE
OUTPUT DURING THE
PREVIOUS RENDER.
Slide 68
Slide 68 text
68
68
PENDINGPROPS
PROPS THAT HAVE BEEN UPDATED
FROM NEW DATA IN REACT ELEMENTS
AND NEED TO BE APPLIED TO CHILD
COMPONENTS OR DOM ELEMENTS.
Slide 69
Slide 69 text
ALGORITHM
PHASES
69
Slide 70
Slide 70 text
REACT PERFORMS WORK IN TWO MAIN
PHASES: RENDER AND COMMIT.
70
70
FIBER • ALGORITHM PHASES
Slide 71
Slide 71 text
!!!
71
71
FIBER • ALGORITHM PHASES
Slide 72
Slide 72 text
72
72
FIBER • ALGORITHM PHASES
constructor
componentWillMount
Mounting
componentWillReceiveProps
New Props setState()
shouldComponentUpdate
componentWillUpdate
Updating Unmounting
render
componentDidMount componentDidUpdate
componentWillUnmount
Slide 73
Slide 73 text
73
73
FIBER • ALGORITHM PHASES
constructor
getDerivedStateFromProps
Mounting
New Props setState()
shouldComponentUpdate
getSnapshotBeforeUpdate
Updating Unmounting
render
componentDidMount
componentDidUpdate
componentWillUnmount
Slide 74
Slide 74 text
THE ORIGINAL LIFECYCLE MODEL WAS
NOT INTENDED FOR SOME OF THE
UPCOMING FEATURES LIKE ASYNC
RENDERING.
74
74
FIBER • ALGORITHM PHASES
Slide 75
Slide 75 text
THE ORIGINAL LIFECYCLE MODEL WAS
NOT INTENDED FOR SOME OF THE
UPCOMING FEATURES LIKE ASYNC
RENDERING.
75
75
FIBER • ALGORITHM PHASES
CALLS FROM
COMPONENTWILLRECEIVE
PROPS THAT CHANGE THE
STORE
Slide 76
Slide 76 text
THE ORIGINAL LIFECYCLE MODEL WAS
NOT INTENDED FOR SOME OF THE
UPCOMING FEATURES LIKE ASYNC
RENDERING.
76
76
FIBER • ALGORITHM PHASES
CALLING SETSTATE IN
COMPONENTWILLUPDATE
WILL TRIGGER
SHOULDCOMPONENTUPDATE
Slide 77
Slide 77 text
WHAT NOW?
getDerivedStateFromProps()
getSnapshotBeforeUpdate()
77
77
FIBER • ALGORITHM PHASES
Slide 78
Slide 78 text
78
78
FIBER • ALGORITHM PHASES • getDerivedStateFromProps()
static getDerivedStateFromProps(props, state) {
if (state.value !!" props.value) {
return {
derivedValue: deriveValueFromProps(props),
mirroredProp: props.value
}
}
return null;
}
Slide 79
Slide 79 text
↝ IT'S A PURE FUNCTION
↝ EXPECTED TO RETURN AN OBJECT TO UPDATE THE STATE OF
THE COMPONENT
↝ IF NULL IS RETURNED THEN, NOTHING IS CHANGED IN THE
STATE
↝ A SAFER REPLACEMENT OF componentWillReceiveProps()
79
79
FIBER • ALGORITHM PHASES • getDerivedStateFromProps()
Slide 80
Slide 80 text
80
80
FIBER • ALGORITHM PHASES • getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.list.length < this.props.list.length) {
return this.listRef.value.scrollHeight;
}
return null;
}
Slide 81
Slide 81 text
↝ GETS CALLED AFTER THE RENDER CREATED THE REACT
ELEMENT AND BEFORE IT IS ACTUALLY UPDATED FROM
VIRTUAL DOM TO ACTUAL DOM
↝ IT'S USEFUL IF YOU WANT TO KEEP SYNC IN-BETWEEN STATE
OF CURRENT DOM WITH THE UPDATED DOM
↝ A SAFER REPLACEMENT OF componentWillUpdate()
81
81
FIBER • ALGORITHM PHASES • getSnapshotBeforeUpdate()
Slide 82
Slide 82 text
APPLIES SCHEDULED UPDATES TO
COMPONENTS AND FIGURES OUT WHAT
NEEDS TO BE UPDATED IN THE UI.
82
82
FIBER • ALGORITHM PHASES • RENDER PHASE
Slide 83
Slide 83 text
APPLIES SCHEDULED UPDATES TO
COMPONENTS AND FIGURES OUT WHAT
NEEDS TO BE UPDATED IN THE UI.
83
83
FIBER • ALGORITHM PHASES • RENDER PHASE
THE RESULT OF THE PHASE IS
A TREE OF FIBER NODES
MARKED WITH SIDE-
EFFECTS.
Slide 84
Slide 84 text
APPLIES SCHEDULED UPDATES TO
COMPONENTS AND FIGURES OUT WHAT
NEEDS TO BE UPDATED IN THE UI.
84
84
FIBER • ALGORITHM PHASES • RENDER PHASE
THE RESULT OF THE PHASE IS
A TREE OF FIBER NODES
MARKED WITH SIDE-
EFFECTS.
WORK DURING THIS PHASE
CAN BE PERFORMED
ASYNCHRONOUSLY.
Slide 85
Slide 85 text
APPLIES SCHEDULED UPDATES TO
COMPONENTS AND FIGURES OUT WHAT
NEEDS TO BE UPDATED IN THE UI.
85
85
FIBER • ALGORITHM PHASES • RENDER PHASE
THE RESULT OF THE PHASE IS
A TREE OF FIBER NODES
MARKED WITH SIDE-
EFFECTS.
WORK DURING THIS PHASE
CAN BE PERFORMED
ASYNCHRONOUSLY.
ASYNCHRONOUSLY
Slide 86
Slide 86 text
↝ [UNSAFE_]componentWillMount
↝ [UNSAFE_]componentWillReceiveProps
↝ getDerivedStateFromProps
↝ shouldComponentUpdate
↝ [UNSAFE_]componentWillUpdate
↝ render
86
86
FIBER • ALGORITHM PHASES • RENDER PHASE
Slide 87
Slide 87 text
WHEN REACT GETS TO THIS PHASE, IT
HAS TWO TREES AND THE EFFECTS LIST.
87
87
FIBER • ALGORITHM PHASES • COMMIT PHASE
Slide 88
Slide 88 text
↝ CALLS THE getSnapshotBeforeUpdate LIFECYCLE METHOD ON
NODES TAGGED WITH THE SNAPSHOT EFFECT
↝ CALLS THE componentWillUnmount LIFECYCLE METHOD ON
NODES TAGGED WITH THE DELETION EFFECT
↝ PERFORMS ALL THE DOM INSERTIONS, UPDATES AND DELETIONS
↝ SETS THE FINISHEDWORK TREE AS CURRENT
88
88
FIBER • ALGORITHM PHASES • COMMIT PHASE
Slide 89
Slide 89 text
↝ CALLS componentDidMount() LIFECYCLE METHOD ON NODES
TAGGED WITH THE PLACEMENT EFFECT
↝ CALLS componentDidUpdate() LIFECYCLE METHOD ON NODES
TAGGED WITH THE UPDATE EFFECT
89
89
FIBER • ALGORITHM PHASES • COMMIT PHASE
Slide 90
Slide 90 text
IN
COMPUTER
SCIENCE
90
Slide 91
Slide 91 text
A FIBER IS A GENERIC MODEL OF
EXECUTION WHERE EACH UNIT WORKS
TOGETHER COOPERATIVELY
91
91
FIBER • IN COMPUTER SCIENCE
Slide 92
Slide 92 text
FIBERS ARE USED IN SYSTEMS LIKE
WINDOWS AND OCALM
PROGRAMMING LANGUAGE
92
92
FIBER • IN COMPUTER SCIENCE
Slide 93
Slide 93 text
Coroutines
93
Slide 94
Slide 94 text
OVERVIEW
94
Slide 95
Slide 95 text
95
95
COROUTINES • OVERVIEW
Slide 96
Slide 96 text
96
96
COROUTINES • OVERVIEW
Slide 97
Slide 97 text
1 A GENERATOR (PRODUCER) THAT CAN
ALSO CONSUME VALUES.
97
97
COROUTINES • OVERVIEW
Slide 98
Slide 98 text
1
A GENERATOR (PRODUCER) THAT CAN
ALSO CONSUME VALUES. JAVASCRIPT
GENERATORS CAN CONSUME VALUES
THROUGH .next() AND SO BY THIS
DEFINITION ARE COROUTINES.
98
98
COROUTINES • OVERVIEW
Slide 99
Slide 99 text
2 A GENERATOR THAT CAN RESOLVE
ASYNCHRONOUS VALUES, LIKE ASYNC/
AWAIT.
99
99
COROUTINES • OVERVIEW
Slide 100
Slide 100 text
2
A GENERATOR THAT CAN RESOLVE
ASYNCHRONOUS VALUES, LIKE ASYNC/
AWAIT. THIS MEANING IS THE MOST
COMMON MEANING OF “COROUTINE”
IN THE JAVASCRIPT WORLD.
100
100
COROUTINES • OVERVIEW
Slide 101
Slide 101 text
3 A GENERATOR THAT CAN YIELD WITH A
STACKFUL CONTINUATION.
101
101
COROUTINES • OVERVIEW
Slide 102
Slide 102 text
3 A GENERATOR THAT CAN YIELD WITH A
STACKFUL CONTINUATION DEEP AWAIT.
102
102
COROUTINES • OVERVIEW
Slide 103
Slide 103 text
3 A GENERATOR THAT CAN YIELD WITH A
STACKFUL CONTINUATION. WITH REACT
SUSPENSE WE CAN PAUSE
RECONCILIATION AT ANY DEPTH.
103
103
COROUTINES • OVERVIEW
Slide 104
Slide 104 text
3 A GENERATOR THAT CAN YIELD WITH A
STACKFUL CONTINUATION.
104
104
COROUTINES • OVERVIEW
THAT MIGHT BE WHAT ANDREW MEANT IN
HIS TWEET.
Slide 105
Slide 105 text
105
105
COROUTINES • OVERVIEW
CONTROL IS PASSED TO
THE CALLER AND HANDLED
BY APPLICATION CODE
COROUTINES
WHEN YIELDING…
Slide 106
Slide 106 text
106
106
COROUTINES • OVERVIEW
CONTROL IS PASSED TO
THE CALLER AND HANDLED
BY APPLICATION CODE
COROUTINES
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT
FIBERS
WHEN YIELDING…
WHEN YIELDING…
Slide 107
Slide 107 text
107
107
COROUTINES • OVERVIEW
WHEN YIELDING…
CONTROL IS PASSED TO
THE CALLER AND HANDLED
BY APPLICATION CODE
COROUTINES
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT.
CONTROLLED AT THE LEVEL OF THE
OPERATING SYSTEM OR
FRAMEWORK.
FIBERS
Slide 108
Slide 108 text
COROUTINES
IN REACT
108
Slide 109
Slide 109 text
COROUTINES APPEARED WHEN WORK
ON FIBER WAS FIRST GETTING GOING AS
A SPECIFIC COMPONENT TYPE.
109
109
COROUTINES • IN REACT
Slide 110
Slide 110 text
110
110
Slide 111
Slide 111 text
111
111
Slide 112
Slide 112 text
THE IDEA BEHIND COROUTINES — AS
OPPOSED TO FIBERS — WAS TO GIVE
COMPONENTS EXPLICIT CONTROL OVER
YIELDING AND RESUMPTION.
112
112
COROUTINES • IN REACT
Slide 113
Slide 113 text
COROUTINES IN REACT NO LONGER
EXIST.
113
113
COROUTINES • IN REACT
Slide 114
Slide 114 text
COROUTINES IN REACT NO LONGER
EXIST.
IT WILL BE FASCINATING TO SEE WHAT
FORM COROUTINES TAKE WHEN THEY
RETURN TO REACT FIBER.
114
114
COROUTINES • IN REACT
IT WILL BE FASCINATING TO SEE WHAT
FORM COROUTINES TAKE WHEN THEY
RETURN TO REACT FIBER.
Slide 115
Slide 115 text
Continuations
115
Slide 116
Slide 116 text
OVERVIEW
116
Slide 117
Slide 117 text
117
117
Slide 118
Slide 118 text
AN ABSTRACTION THAT REPRESENTS
THE REMAINING STEPS IN A
COMPUTATION.
118
118
CONTINUATIONS • OVERVIEW
Slide 119
Slide 119 text
AN ABSTRACTION THAT REPRESENTS
THE REMAINING STEPS IN A
COMPUTATION.
119
119
A CONTINUATION IS A
CONTROL FLOW PRIMITIVE.
CONTINUATIONS • OVERVIEW
Slide 120
Slide 120 text
CONTINUATIONS
IN REACT
120
Slide 121
Slide 121 text
121
121
Slide 122
Slide 122 text
122
122
HTTPS://GITHUB.COM/REACTJS/REACT-BASIC#CONTINUATIONS
Slide 123
Slide 123 text
123
123
Slide 124
Slide 124 text
124
124
HTTPS://GITHUB.COM/FACEBOOK/REACT/PULL/13595
Slide 125
Slide 125 text
FOR ANDREW CLARK,
“A CONTINUATION IS A CALLBACK THAT
IS SCHEDULED WHEN YIELDING
EXECUTION”
125
125
CONTINUATIONS • IN REACT
Slide 126
Slide 126 text
126
126
CONTINUATIONS • IN REACT
function performWork(deadline) {
while (tasks.length > 0) {
const task = tasks.shift();
doTask(task);
if (
tasks.length > 0 &&
!deadline.didTimeout &&
deadline.timeRemaining() <= 0
) {
return performWork;
}
}
}
scheduleWork(performWork);
Slide 127
Slide 127 text
SO A CONTINUATION MIGHT BE A
PARTICULAR CHILD FIBER, WHETHER
HANDLED BY THE FRAMEWORK OR THE
USER, OR A CALLBACK TO BEGIN
PROCESSING THAT CHILD.
127
127
CONTINUATIONS • IN REACT
Slide 128
Slide 128 text
SO A CONTINUATION MIGHT BE A
PARTICULAR CHILD FIBER, WHETHER
HANDLED BY THE FRAMEWORK OR THE
USER, OR A CALLBACK TO BEGIN
PROCESSING THAT CHILD.
128
128
CONTINUATIONS • IN REACT
Slide 129
Slide 129 text
Effect
Handlers
129
Slide 130
Slide 130 text
OVERVIEW
130
Slide 131
Slide 131 text
EFFECTS ASK THE CALLING
ENVIRONMENT TO HANDLE A
PARTICULAR TASK, LIKE LOGGING,
READING FROM DATABASE, MUTATING
SOME GLOBAL STATE.
131
131
EFFECT HANDLERS • OVERVIEW
Slide 132
Slide 132 text
WHEN AN EFFECT IS USED, THE NEAREST
EFFECT HANDLER IS CALLED, WHICH
ALLOWS YOU TO RUN CODE IN
RESPONSE TO THE EFFECT AND RETURN
SOME VALUE.
132
132
EFFECT HANDLERS • OVERVIEW
Slide 133
Slide 133 text
133
133
Slide 134
Slide 134 text
134
134
HTTPS://OVERREACTED.IO/ALGEBRAIC-EFFECTS-FOR-THE-REST-OF-US
Slide 135
Slide 135 text
135
135
EFFECT HANDLERS • OVERVIEW
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 136
Slide 136 text
136
136
EFFECT HANDLERS • OVERVIEW
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 137
Slide 137 text
EFFECT
HANDLERS
IN REACT
137
Slide 138
Slide 138 text
138
138
Slide 139
Slide 139 text
139
139
THE REACT TEAM APPARENTLY SPENT SOME TIME
EXPERIMENTING WITH USING EFFECT-HANDLER
CONTROL STRUCTURES FOR MANAGING LAYOUT
Slide 140
Slide 140 text
140
140
Slide 141
Slide 141 text
141
141
AND ALSO FOR IMPLEMENTING THE CONTEXT API
Slide 142
Slide 142 text
142
142
Slide 143
Slide 143 text
143
143
SEBASTIAN POINTS THAT
“CONCEPTUALLY, THEY [HOOKS]
ARE ALGEBRAIC EFFECTS”.
Slide 144
Slide 144 text
!!!
144
144
EFFECT HANDLERS • IN REACT
Slide 145
Slide 145 text
145
145
Slide 146
Slide 146 text
146
146
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 147
Slide 147 text
147
147
WHEN THE PROMISE RESOLVES,
ITS VALUE IS ADDED TO A CACHE,
THE FIBER IS RESTARTED, AND THE
NEXT TIME THE DATA IS
REQUESTED IT IS ACCESSED
SYNCHRONOUSLY FROM CACHE.
Slide 148
Slide 148 text
148
148
THROW-HANDLE-RESUME
PATTERN.
Slide 149
Slide 149 text
149
149
SINCE REACT USES FIBERS
INSTEAD OF NATIVE CALL STACK, IT
CAN USE THROW TO INTERRUPT
RENDERING WITH MINIMAL
OVERHEAD.
Slide 150
Slide 150 text
Conclusions
150
Slide 151
Slide 151 text
1
I AM NOT QUITE SURE ABOUT TC39
APPROVAL BECAUSE:
↝ DIFFICULT TO OPTIMIZE
↝ AFFECTS CODE THAT DOESN'T USE
THE FUNCTIONALITY
151
151
CONCLUSIONS
Slide 152
Slide 152 text
2
152
152
CONCLUSIONS
REACT FIBER WAS A REWRITE OF REACT
FOCUSED ON GIVING MORE LOW-LEVEL
CONTROL OVER PROGRAM EXECUTION
Slide 153
Slide 153 text
2
153
153
CONCLUSIONS
REACT FIBER WAS A REWRITE OF REACT
FOCUSED ON GIVING MORE LOW-LEVEL
CONTROL OVER PROGRAM EXECUTION
FIBERS/COROUTINES AS LOW-LEVEL
COOPERATIVE WAYS TO MODEL
PROGRAM EXECUTION
Slide 154
Slide 154 text
2
154
154
CONCLUSIONS
REACT FIBER WAS A REWRITE OF REACT
FOCUSED ON GIVING MORE LOW-LEVEL
CONTROL OVER PROGRAM EXECUTION
FIBERS/COROUTINES AS LOW-LEVEL
COOPERATIVE WAYS TO MODEL
PROGRAM EXECUTION
ALGEBRAIC EFFECTS AS A WAY TO HANDLE
EFFECTS WHERE EFFECTS AND THEIR
BEHAVIOUR ARE INDEPENDENT
Slide 155
Slide 155 text
3 REACT TRIES TO OVERCOME THE LACK OF
SOME FEATURES BY IMPLEMENTING
SOME HACKY SOLUTIONS TO MOCK
THEIR BEHAVIOUR
155
155
CONCLUSIONS
Slide 156
Slide 156 text
4 NON-END-USER-APPLICATION-
DEVELOPERS MISS A LOT OF LESS
KNOWN FUNCTIONAL PROGRAMMING
CONCEPTS IN JAVASCRIPT
156
156
CONCLUSIONS
Slide 157
Slide 157 text
This Talk
157
Slide 158
Slide 158 text
158
158
Slide 159
Slide 159 text
159
159
HTTPS://SPEAKERDECK.COM/YTHECOMBINATOR
Slide 160
Slide 160 text
MATHEUS ALBUQUERQUE
@ythecombinator
www.ythecombinator.space
[email protected]
Slide 161
Slide 161 text
THANKS
tha f today
f
by Mathe Albuquрque