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