↝ FIBER ARCHITECTURE ⇢ REACT-SPECIFIC
IMPLEMENTATION OF A CALL-STACK-LIKE MODEL
WHERE REACT HAS FULL CONTROL OF SCHEDULING
WHAT SHOULD BE DONE
↝ FIBER ⇢ A STACK FRAME FOR A REACT
COMPONENT
FIBERS
Slide 13
Slide 13 text
Fibers as
Units of Work
THE COMPUTER SCIENCE OF FIBERS
Slide 14
Slide 14 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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 15
Slide 15 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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 16
Slide 16 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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 17
Slide 17 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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 18
Slide 18 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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. A UNIT OF WORK.
Slide 19
Slide 19 text
ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER 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. A UNIT OF WORK.
AND THAT MAKES
IT A CONVENIENT
WAY TO TRACK,
SCHEDULE, PAUSE
AND ABORT THE
WORK.
Slide 20
Slide 20 text
THE COMPUTER SCIENCE OF FIBERS
Slide 21
Slide 21 text
Visualizing
Units of Work
THE COMPUTER SCIENCE OF FIBERS
Slide 22
Slide 22 text
#EXPERIMENT 💻
#1 Inspecting Elements
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
let fiberNode
=
fiberRoot.current;
let fibersMap
=
new Map();
while (fiberNode) {
if (fiberNode.stateNode
!
=
=
null) {
fibersMap.set(fiberNode.stateNode, fiberNode);
}
if (fiberNode.child === null) {
while (fiberNode
!
=
=
null
&
&
fiberNode.sibling === null) {
fiberNode
=
fiberNode.return;
}
fiberNode
=
fiberNode?.sibling;
continue;
}
fiberNode
=
fiberNode.child;
}
Slide 26
Slide 26 text
let fiberNode
=
fiberRoot.current;
let fibersMap
=
new Map();
while (fiberNode) {
if (fiberNode.stateNode
!
=
=
null) {
fibersMap.set(fiberNode.stateNode, fiberNode);
}
if (fiberNode.child === null) {
while (fiberNode
!
=
=
null
&
&
fiberNode.sibling === null) {
fiberNode
=
fiberNode.return;
}
fiberNode
=
fiberNode?.sibling;
continue;
}
fiberNode
=
fiberNode.child;
}
🤯
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
THE COMPUTER SCIENCE OF FIBERS
Slide 29
Slide 29 text
THE COMPUTER SCIENCE OF FIBERS
Slide 30
Slide 30 text
Manipulating
Units of Work
THE COMPUTER SCIENCE OF FIBERS
Slide 31
Slide 31 text
#QUESTION 🤔
Have you ever heard about
homoiconicity?
Slide 32
Slide 32 text
(let [x 1]
(inc x)) ;
=
>
2
HOMOICONICITY
Slide 33
Slide 33 text
(let [x 1]
(inc x)) ;
=
>
2
HOMOICONICITY
PERFORMS A TEMPORARY BINDING
(BINDS X TO THE VALUE 1)
Slide 34
Slide 34 text
INCREMENTS X TO GIVE
THE RETURN VALUE OF 2
(let [x 1]
(inc x)) ;
=
>
2
HOMOICONICITY
Slide 35
Slide 35 text
IT CAN BE THOUGHT OF AS A LIST WITH THREE
ELEMENTS
↝ A SYMBOL NAMED LET
↝ A VECTOR WITH TWO ELEMENTS
↝ A LIST WITH TWO ELEMENTS
HOMOICONICITY
Slide 36
Slide 36 text
IT CAN BE THOUGHT OF AS A LIST WITH THREE
ELEMENTS
↝ A SYMBOL NAMED LET
↝ A VECTOR WITH TWO ELEMENTS
↝ A LIST WITH TWO ELEMENTS
HOMOICONICITY
A SYMBOL (X) AND AN INTEGER
A SYMBOL (INC) AND A SYMBOL (X)
Slide 37
Slide 37 text
#QUOTE 🤔
“…Homoiconicity is a property of some
programming languages in which the code
used to express a program is written using the
data structures of that language.”
— Wikipedia
Slide 38
Slide 38 text
↝ REACT ELEMENTS ARE JUST DATA
↝ JUST LIKE IN LISP, REACT COMPONENTS CAN
MANIPULATE THEIR CHILDREN AND RETURN
COMPLETELY DIFFERENT THINGS
HOMOICONICITY
Slide 39
Slide 39 text
#EXPERIMENT 💻
#2 Pattern Matching in React
Slide 40
Slide 40 text
#QUOTE 🤔
“[…] Pattern matching consists of specifying
patterns to which some data should conform
and then checking to see if it does and
deconstructing the data according to those
patterns.”
— Learn You a Haskell
Slide 41
Slide 41 text
factorial
:
:
(Integral a)
=
>
a
-
>
a
factorial 0
=
1
factorial n
=
n * factorial (n - 1)
PATTERN MATCHING
Slide 42
Slide 42 text
fib
:
:
(Integral a)
=
>
a
-
>
a
fib 0
=
1
fib 1
=
1
fib n | n
>
=
2
=
fib (n-1) + fib (n-2)
PATTERN MATCHING
factorial
factorial 0
factorial n
=
const supportsSensor
const AmbientLight
const Fallback
export default function MyComponent() {
const { Match, When, Otherwise }
return (
);
}
PATTERN MATCHING
+ REACT.SUSPENSE
+ REACT.LAZY()
= USERS DOWNLOAD ONLY
THE COMPONENT BUNDLE
THAT MATCHES
MANIPULATING BASED ON
ELEMENTS DATA.
Slide 49
Slide 49 text
THE COMPUTER SCIENCE OF FIBERS
Slide 50
Slide 50 text
USING FIBERS, REACT CAN:
↝ PAUSE, RESUME, AND RESTART RENDERING WORK
ON COMPONENTS AS NEW UPDATES COME IN
↝ REUSE PREVIOUSLY COMPLETED WORK
↝ SPLIT WORK INTO CHUNKS AND PRIORITIZE TASKS
BASED ON IMPORTANCE
FIBERS IN REACT (RECAP)
Slide 51
Slide 51 text
Fibers out
there
THE COMPUTER SCIENCE OF FIBERS
Slide 52
Slide 52 text
↝ A FIBER IS A GENERIC MODEL OF EXECUTION
WHERE EACH UNIT WORKS TOGETHER
COOPERATIVELY
↝ FIBERS ARE A COMMON RESOURCE IN SOME
OPERATING SYSTEMS (E.G. WINDOWS) AND IN
SOME PROGRAMMING LANGUAGES (E.G. OCAML)
FIBERS OUT THERE
Slide 53
Slide 53 text
THE COMPUTER SCIENCE OF FIBERS
Slide 54
Slide 54 text
Coroutines
THE COMPUTER SCIENCE OF FIBERS
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
#1 A GENERATOR (PRODUCER)
THAT CAN ALSO CONSUME
VALUES.
THE COMPUTER SCIENCE OF FIBERS
Slide 57
Slide 57 text
#1
THE COMPUTER SCIENCE OF FIBERS
↝ JAVASCRIPT GENERATORS
CAN CONSUME VALUES
↝ BY THIS DEFINITION,
THEY ARE COROUTINES
A GENERATOR (PRODUCER)
THAT CAN ALSO CONSUME
VALUES.
Slide 58
Slide 58 text
#2 A GENERATOR THAT CAN
RESOLVE ASYNCHRONOUS
VALUES, LIKE ASYNC/AWAIT.
THE COMPUTER SCIENCE OF FIBERS
Slide 59
Slide 59 text
#2
THE COMPUTER SCIENCE OF FIBERS
↝ THIS IS THE MOST COMMON
MEANING OF “COROUTINE”
IN THE JAVASCRIPT WORLD
↝ WE HAD CO AND BLUEBIRD,
WHICH HAD ASYNC/AWAIT
IMPLEMENTATIONS BASED
ON GENERATORS
VALUES, LIKE ASYNC/AWAIT.
Slide 60
Slide 60 text
#3 A GENERATOR THAT CAN
YIELD WITH A STACKFUL
CONTINUATION
THE COMPUTER SCIENCE OF FIBERS
Slide 61
Slide 61 text
#3
THE COMPUTER SCIENCE OF FIBERS
↝ "DEEP AWAIT"
↝ e.g. WITH SUSPENSE, WE
CAN PAUSE
RECONCILIATION AT ANY
DEPTH
A GENERATOR THAT CAN
YIELD WITH A STACKFUL
CONTINUATION
Slide 62
Slide 62 text
Fibers
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT
↝ = CONTROLLED AT THE LEVEL OF THE
OPERATING SYSTEM OR FRAMEWORK
↝ E.G. NODE.JS EVENT LOOP
Slide 63
Slide 63 text
Coroutines
CONTROL IS PASSED TO THE
CALLER AND HANDLED BY
APPLICATION CODE
Fibers
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT
Slide 64
Slide 64 text
Coroutines &
React
THE COMPUTER SCIENCE OF FIBERS
Slide 65
Slide 65 text
COROUTINES APPEARED WHEN WORK ON FIBER
WAS FIRST GOING AS A SPECIFIC COMPONENT
TYPE.
THE IDEA BEHIND COROUTINES — AS
OPPOSED TO FIBERS — WAS TO GIVE
COMPONENTS EXPLICIT CONTROL
OVER YIELDING AND RESUMPTION.
Slide 66
Slide 66 text
THE COMPUTER SCIENCE OF FIBERS
Slide 67
Slide 67 text
COROUTINES & REACT
↝ COROUTINES PER SI IN REACT NO LONGER EXIST.
↝ IT WILL BE FASCINATING TO SEE WHAT FORM
COROUTINES TAKE WHEN THEY RETURN TO REACT
FIBER.
Slide 68
Slide 68 text
Coroutines &
Concurrent
React
THE COMPUTER SCIENCE OF FIBERS
Slide 69
Slide 69 text
THE COMPUTER SCIENCE OF FIBERS
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
THE COMPUTER SCIENCE OF FIBERS
Slide 72
Slide 72 text
function resourcefulOperation(value: number) {
let newValue
=
String(value);
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
function ResourcefulComponent(props: { value: number }) {
const { value }
=
props;
const result
=
resourcefulOperation(value);
return
{result}
;
}
Slide 73
Slide 73 text
#QUESTION 🤔
How could we improve that?
Slide 74
Slide 74 text
#EXPERIMENT 💻
#3 Building a coroutines-based
scheduler
Slide 75
Slide 75 text
THE COMPUTER SCIENCE OF FIBERS
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
function resourcefulOperation(value: number) {
let newValue
=
String(value);
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
function ResourcefulComponent(props: { value: number }) {
const { value }
=
props;
const result
=
resourcefulOperation(value);
return
{result}
;
}
Slide 78
Slide 78 text
function* resourcefulOperation(value: number) {
let newValue
=
String(value);
while (true) {
yield;
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
}
const initialValue
=
0;
const scheduler
=
new Scheduler(resourcefulOperation, initialValue);
function ResourcefulComponent(props: { value: number }) {
const { value }
=
props;
const result
=
scheduler.performUnitOfWork(value);
return
{result}
;
}
Slide 79
Slide 79 text
function* resourcefulOperation(value: number) {
let newValue
=
String(value);
while (true) {
yield;
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
}
const initialValue
=
0;
const scheduler
=
new Scheduler(resourcefulOperation, initialValue);
function ResourcefulComponent(props: { value: number }) {
const { value }
=
props;
const result
=
scheduler.performUnitOfWork(value);
return
{result}
;
}
PROMOTED TO A GENERATOR
YIELDING EXECUTION
DOING CONCURRENT TASKS
function resourcefulOperation(value: number) {
let newValue
=
String(value);
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
function ResourcefulComponent(props: { value: number }) {
const { value }
=
props;
const result
=
resourcefulOperation(value);
return
{result}
;
}
Slide 85
Slide 85 text
function resourcefulOperation(value: number) {
let newValue
=
String(value);
for (let i
=
0; i < 1000000; i++) {
newValue
=
`${value} + ${i}
=
${value + i}`;
}
return newValue;
}
function ResourcefulComponent(props: { value: number }) {
const [_, startTransition]
=
useTransition();
const [result, setResult]
=
useState("");
useEffect(()
=
>
{
startTransition(()
=
>
{
const newResult
=
resourcefulOperation(props.value);
setResult(newResult);
});
}, [props.value]);
return
{result}
;
}
Slide 86
Slide 86 text
YES, WE DID 🤓
WITH OUR OWN, COROUTINES-BASED, SCHEDULER
Slide 87
Slide 87 text
↝ A COOPERATIVE MULTITASKING MODEL
↝ A SINGLE INTERRUPTIBLE RENDERING THREAD
↝ RENDERING CAN BE INTERLEAVED WITH OTHER
MAIN THREAD TASKS AND OTHER REACT RENDERS
↝ AN UPDATE CAN HAPPEN IN THE BACKGROUND
WITHOUT BLOCKING THE RESPONSE TO NEW INPUT
COROUTINES & SCHEDULING
Slide 88
Slide 88 text
↓ ORIGINAL RENDER TASK
USER INPUT →
↑ HIGHER PRIORITY RENDER TASK
↓ RESUME ORIGINAL RENDER TASK
Slide 89
Slide 89 text
↝ IT YIELDS EXECUTION IS BACK TO THE MAIN
THREAD EVERY 5MS
↝ IT'S SMALLER THAN A SINGLE FRAME EVEN ON
120FPS, SO IT WON'T BLOCK ANIMATIONS
↝ IN PRACTICE, RENDERING IS INTERRUPTIBLE
COROUTINES & SCHEDULING
Slide 90
Slide 90 text
THE COMPUTER SCIENCE OF FIBERS
Slide 91
Slide 91 text
Coroutines out
there
THE COMPUTER SCIENCE OF FIBERS
Slide 92
Slide 92 text
↝ ASYNCHRONY IN JAVASCRIPT IS CONTAGIOUS
↝ IF ANY FUNCTION IS ASYNC, THEN EVERYTHING
THAT CALLS IT MUST ALSO BE ASYNC…
↝ …AND SO ON UNTIL THE ENTIRE PROGRAM
IS ASYNCHRONOUS 🤷
ASYNCHRONY & JS
Slide 93
Slide 93 text
THE COMPUTER SCIENCE OF FIBERS
Slide 94
Slide 94 text
↝ ASYNCHRONY IN JAVASCRIPT ISN’T FREE
↝ EVERY ASYNCHRONOUS FUNCTION CALL HAS TO:
↝ ALLOCATE CALLBACKS & STORE THEM SOMEWHERE
↝ TAKE A TRIP BACK TO THE EVENT LOOP BEFORE
INVOKING THOSE CALLBACKS
ASYNCHRONY & JS
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
↝ ITS API HAS TWO MAIN FUNCTIONS FOR
COMPILING SASS FILES: ONE SYNC AND ONE
ASYNC
↝ THE ASYNC ONE BECAME WIDELY USED IN
PRACTICE BECAUSE IT ENABLED ASYNC PLUGINS
(E.G. WEBPACK’S SASS-LOADER)
ASYNCHRONY & SASS
Slide 97
Slide 97 text
↝ FOR NODE SASS, THE PERFORMANCE DIFFERENCE
WAS NEGLIGIBLE, BECAUSE IT WAS BUILT ON C++
↝ HOWEVER, DART SASS RUNS AS PURE JAVASCRIPT,
WHICH MAKES IT SUBJECT TO JAVASCRIPT’S
ASYNC RULES
ASYNCHRONY & SASS
Slide 98
Slide 98 text
↝ THE ASYNC VERSION IN DART SASS WAS 2-3X
SLOWER THAN THE SYNC ONE
↝ THEY STARTED USING NODE-FIBERS TO IMPLEMENT
THE ASYNC API USING THE FAST, SYNC, CODE
ASYNCHRONY & SASS
Slide 99
Slide 99 text
THE COMPUTER SCIENCE OF FIBERS
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
Effect Handlers
THE COMPUTER SCIENCE OF FIBERS
Slide 102
Slide 102 text
🤯
APPROACH TO REASONING ABOUT COMPUTATIONAL
EFFECTS IN PURE CONTEXTS
↝ EFFECT ⇢ A SET OF OPERATIONS
↝ EFFECT HANDLER ⇢ RESPONSIBLE FOR HANDLING
THE SEMANTICS OF HOW TO IMPLEMENT EFFECTS
EFFECT HANDLERS
Slide 103
Slide 103 text
(* state.eff *)
type user
=
string * int
effect Get: user
effect Set: user
-
>
unit
🤯
EFFECT HANDLERS IN EFF
Slide 104
Slide 104 text
(* state.eff *)
type user
=
string * int
effect Get: user
effect Set: user
-
>
unit
A USER WITH A NAME AND AGE
EFFECT HANDLERS IN EFF
Slide 105
Slide 105 text
(* state.eff *)
type user
=
string * int
effect Get: user
effect Set: user
-
>
unit
WE DEFINE EFFECTS WITH THE effect
KEYWORD AND A TYPE SIGNATURE.
EFFECT HANDLERS IN EFF
Slide 106
Slide 106 text
let state
=
handler
| y
-
>
fun currentState
-
>
(y, currentState)
| effect Get k
-
>
(fun currentState
-
>
(continue k currentState) currentState)
| effect (Set newState) k
-
>
(fun _
-
>
(continue k ()) newState)
;;
🤯
EFFECT HANDLERS IN EFF
Slide 107
Slide 107 text
let state
=
handler
| y
-
>
fun currentState
-
>
(y, currentState)
| effect Get k
-
>
(fun currentState
-
>
(continue k currentState) currentState)
| effect (Set newState) k
-
>
(fun _
-
>
(continue k ()) newState)
;;
WE HAVE A handler WITH THREE BRANCHES,
AND ALL OF THEM RETURN A FUNCTION.
EFFECT HANDLERS IN EFF
Slide 108
Slide 108 text
let state
=
handler
| y
-
>
fun currentState
-
>
(y, currentState)
| effect Get k
-
>
(fun currentState
-
>
(continue k currentState) currentState)
| effect (Set newState) k
-
>
(fun _
-
>
(continue k ()) newState)
;;
NO EFFECT (WHEN WE REACH THE END OF THE BLOCK).
y IS THE RETURN VALUE.
EFFECT HANDLERS IN EFF
Slide 109
Slide 109 text
let state
=
handler
| y
-
>
fun currentState
-
>
(y, currentState)
| effect Get k
-
>
(fun currentState
-
>
(continue k currentState) currentState)
| effect (Set newState) k
-
>
(fun _
-
>
(continue k ()) newState)
;;
MATCHING OUR EFFECTS.
EFFECT HANDLERS IN EFF
Slide 110
Slide 110 text
let state
=
handler
| y
-
>
fun currentState
-
>
(y, currentState)
| effect Get k
-
>
(fun currentState
-
>
(continue k currentState) currentState)
| effect (Set newState) k
-
>
(fun _
-
>
(continue k ()) newState)
;;
k IS A CONTINUATION. IT REPRESENTS THE REST OF THE
COMPUTATION AFTER WHERE WE PERFORM AN EFFECT.
EFFECT HANDLERS IN EFF
Slide 111
Slide 111 text
THE COMPUTER SCIENCE OF FIBERS
Slide 112
Slide 112 text
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 113
Slide 113 text
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 114
Slide 114 text
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 115
Slide 115 text
↝ IT DOESN'T REALLY MATTER HOW WE HOLD STATE.
IF WE WERE TO CHANGE IN THE FUTURE, WE’D
NEED TO START HANDLING PROMISES, WHICH
WOULD REQUIRE CHANGES ACROSS EVERYTHING.
↝ WITH ALGEBRAIC EFFECTS, WE CAN SIMPLY STOP
THE CURRENT PROCESS ALTOGETHER UNTIL OUR
EFFECTS ARE FINISHED.
EFFECT HANDLERS
Slide 116
Slide 116 text
Effect
handlers in
React
THE COMPUTER SCIENCE OF FIBERS
Slide 117
Slide 117 text
#1
THE COMPUTER SCIENCE OF FIBERS
LAYOUT
ALGORITHM
Slide 118
Slide 118 text
THE REACT TEAM APPARENTLY
SPENT SOME TIME
EXPERIMENTING WITH EFFECT-
HANDLER CONTROL STRUCTURES
FOR MANAGING LAYOUT
Slide 119
Slide 119 text
THE COMPUTER SCIENCE OF FIBERS
Slide 120
Slide 120 text
#2 CONTEXT API
DRAFTS
THE COMPUTER SCIENCE OF FIBERS
Slide 121
Slide 121 text
THEY’VE ALSO REMODELED THE CONTEXT
API USING ALGEBRAIC EFFECTS
Slide 122
Slide 122 text
THE COMPUTER SCIENCE OF FIBERS
Slide 123
Slide 123 text
#3 SIDE EFFECTS
WITHIN A
COMPONENT
THE COMPUTER SCIENCE OF FIBERS
Slide 124
Slide 124 text
THE COMPUTER SCIENCE OF FIBERS
Slide 125
Slide 125 text
function ThemeBorderColorRequest() { }
function FancyBox(children) {
const color
=
raise new ThemeBorderColorRequest();
return {
borderWidth: '1px',
borderColor: color,
children: children
};
}
function BlueTheme(children) {
return try {
children();
} catch effect ThemeBorderColorRequest
-
>
[, continuation] {
continuation('blue');
}
}
function App(data) {
return BlueTheme(
FancyUserList.bind(null, data.users)
);
}
Slide 126
Slide 126 text
function ThemeBorderColorRequest() { }
function FancyBox(children) {
const color
=
raise new ThemeBorderColorRequest();
return {
borderWidth: '1px',
borderColor: color,
children: children
};
}
function BlueTheme(children) {
return try {
children();
} catch effect ThemeBorderColorRequest
-
>
[, continuation] {
continuation('blue');
}
}
function App(data) {
return BlueTheme(
FancyUserList.bind(null, data.users)
);
}
THROW → RAISE
CATCH → CATCH EFFECT
Slide 127
Slide 127 text
#4 HOOKS
API
THE COMPUTER SCIENCE OF FIBERS
Slide 128
Slide 128 text
THE COMPUTER SCIENCE OF FIBERS
Slide 129
Slide 129 text
SEBASTIAN POINTS THAT
“CONCEPTUALLY, HOOKS ARE
ALGEBRAIC EFFECTS”.
Slide 130
Slide 130 text
HOOKS API
↝ ALGEBRAIC EFFECTS = A SET OF OPERATIONS AND
A SET OF EFFECT HANDLERS
↝ THE OPERATIONS HERE ARE OUR HOOKS (E.G.
useState, useEffect, AND SO ON)
↝ WE HAVE TO SET UP HANDLERS IN EFF; IN REACT
THEY'RE SET UP AS PART OF THE RENDER CYCLE
Slide 131
Slide 131 text
HOOKS API
↝ REACT IS RESPONSIBLE FOR MUCH OF THE
IMPLEMENTATION OF WHEN/HOW OUR EFFECTS RUN
↝ IT ALLOWS US TO STASH ENORMOUS AMOUNTS OF
COMPLEXITY WITHIN REACT
↝ BY SPLITTING EFFECTS AND RENDERING, WE
ALLOW IT TO RELIEVE US OF SOME COMPLEXITY
Slide 132
Slide 132 text
#5 SUSPENSE
INTERNALS
THE COMPUTER SCIENCE OF FIBERS
Slide 133
Slide 133 text
#QUESTION 🤔
Have you ever built any suspense-
ready API?
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
THE COMPUTER SCIENCE OF FIBERS
Slide 137
Slide 137 text
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 138
Slide 138 text
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 139
Slide 139 text
Effect
handlers out
there
THE COMPUTER SCIENCE OF FIBERS
Slide 140
Slide 140 text
EFFECT HANDLERS OUT THERE
Slide 141
Slide 141 text
EFFECT HANDLERS OUT THERE
Slide 142
Slide 142 text
EFFECT HANDLERS OUT THERE
Slide 143
Slide 143 text
Continuations
THE COMPUTER SCIENCE OF FIBERS
Slide 144
Slide 144 text
#QUOTE 🤔
“At my heart, I am something like the goto
instruction; my creation sets the label, and my
methods do the jump. However, this is a really
powerful kind of goto instruction. […]”
— GNU Smalltalk Continuation documentation
Slide 145
Slide 145 text
↝ IT’S AN ABSTRACTION THAT REPRESENTS THE
REMAINING STEPS IN A COMPUTATION,
AFTER WHERE WE PERFORM AN EFFECT.
↝ IT'S A CONTROL FLOW PRIMITIVE.
↝ DIFFERENT FROM goto. ALL THE VARIABLES,
POINTERS, ETC. ARE VALID.
CONTINUATIONS
Slide 146
Slide 146 text
CONTINUATIONS IN REACT
Slide 147
Slide 147 text
THE COMPUTER SCIENCE OF FIBERS
Slide 148
Slide 148 text
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);
CONTINUATIONS IN REACT
Slide 149
Slide 149 text
↝ IT HANDLES A QUEUE OF TASKS IN A WHILE LOOP
↝ IF THERE ARE STILL TASKS ON THE QUEUE, IT
RETURNS performWork AND SCHEDULE IT FOR
RESUMPTION AT SOME LATER TIME
↝ IN THIS CONTEXT, IT REPRESENTS THE
CONTINUATION OF A QUEUE OF TASKS
CONTINUATIONS IN REACT
Slide 150
Slide 150 text
CONTINUATIONS ON THE WEB
Slide 151
Slide 151 text
async function doWork() {
while (true) {
let hasMoreWork
=
doSomeWork();
if (!hasMoreWork) {
return;
}
if (!navigator.scheduling.isInputPending()) {
continue;
}
await scheduler.yield();
}
}
🤯
CONTINUATIONS ON THE WEB
Slide 152
Slide 152 text
THE COMPUTER SCIENCE OF FIBERS
Slide 153
Slide 153 text
CONTINUATIONS OUT THERE
Slide 154
Slide 154 text
THE COMPUTER SCIENCE OF FIBERS
Closing Notes
Slide 155
Slide 155 text
#1 REACT FIBER WAS A REWRITE
OF REACT FOCUSED ON
GIVING MORE LOW-LEVEL
CONTROL OVER PROGRAM
EXECUTION
THE COMPUTER SCIENCE OF FIBERS
Slide 156
Slide 156 text
#1
THE COMPUTER SCIENCE OF FIBERS
↝ FIBERS AS A LOW-LEVEL
COOPERATIVE WAY TO
MODEL EXECUTION
↝ ALGEBRAIC EFFECTS AS A
WAY TO HANDLE EFFECTS
WHERE THESE AND THEIR
BEHAVIOR ARE
INDEPENDENT
EXECUTION
Slide 157
Slide 157 text
#2
THE COMPUTER SCIENCE OF FIBERS
REACT TRIES TO ADDRESS
THE LACK OF SOME
JAVASCRIPT FEATURES/
LANGUAGE-LEVEL RESOURCES
BY IMPLEMENTING SOME
ALTERNATIVE SOLUTIONS TO
ACHIEVE SIMILAR BEHAVIORS
E.G. EFFECT HANDLERS & CONTINUATIONS
Slide 158
Slide 158 text
#3
THE COMPUTER SCIENCE OF FIBERS
UNDERSTANDING SOME OF
THESE CONCEPTS GIVES US A
BETTER MENTAL MODEL FOR
WHAT SOME REACT FEATURES
ARE DOING BEHIND THE
SCENES
E.G. HOOKS AND EFFECT HANDLERS
Slide 159
Slide 159 text
#4
THE COMPUTER SCIENCE OF FIBERS
UNDERSTANDING THESE
INTERNALS AND THEIR
RATIONALES HELPS US
IMPLEMENT OUR OWN
ABSTRACTIONS
E.G. THE COROUTINES-BASED SCHEDULER &
THE PATTERN MATCHING COMPONENTS
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
#5 THE FACT WE'RE DISCUSSING
ALL OF THESE TOPICS SHOWS
THAT REACT ACTS AS A
DEMOCRATIC AGENT FOR THIS
KIND OF KNOWLEDGE IN THE
FRONT-END WORLD
THE COMPUTER SCIENCE OF FIBERS
Slide 162
Slide 162 text
THAT’S ALL, FOLKS!
THANKS! 👋 🇮🇳
QUESTIONS?
MATHEUS ALBUQUERQUE • @ythecombinator
↑ ALL THE LINKS! 🤓
THE COMPUTER SCIENCE OF FIBERS