Back to the Vueture: Stuck in the Event Loop

Slide 1

@halftes6

Slide 2

Syncopation @halftes6

Slide 3

“a disturbance or interruption of the regular flow of rhythm” — Miles Hoffman, NPR @halftes6

Slide 4

Syncopation @halftes6

Slide 5

Syncopation is hard @halftes6

Slide 6

Syncopation is hard in coding, too @halftes6

Slide 7

music = coding = confusing @halftes6

Slide 8

????? @halftes6 http://www.music-mind.com/Music/mpage6

Slide 9

????? @halftes6

Slide 10

@halftes6

Slide 11

Temporal experiment #1 @halftes6

Slide 12

@halftes6

Slide 13

@halftes6

Slide 14

Calibrate the clocks for travel • Destination time must be set to a future time • Present time must change to match Destination time • Last Departed time must change to the Present time @halftes6

Slide 15

The UI @halftes6

Slide 16

Destination time must be set to the future @halftes6

Slide 17

Last Departed time must change to Present @halftes6

Slide 18

Present must change to match Destination @halftes6

Slide 19

Present must change to match Destination @halftes6

Slide 20

Back to $nextTick… @halftes6

Slide 21

nextTick — what do the docs say • Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. • New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. Please note that Vue does not come with a Promise polyfill, so if you target browsers that don’t support Promises natively (looking at you, IE), you will have to provide a polyfill yourself. @halftes6

Slide 22

$nextTick to the Future! @halftes6

Slide 23

@halftes6

Slide 24

✋ @halftes6

Slide 25

@halftes6

Slide 26

@halftes6

Slide 27

@halftes6

Slide 28

hypothesis @halftes6

Slide 29

@halftes6

Slide 30

@halftes6

Slide 31

🤔 @halftes6

Slide 32

@halftes6

Slide 33

❗ @halftes6

Slide 34

$nextTick to the Future Part II! @halftes6

Slide 35

@halftes6

Slide 36

$nextTick to the Future Part III! @halftes6

Slide 37

@halftes6

Slide 38

hypothesis @halftes6

Slide 39

$nextTick and rAF @halftes6

Slide 40

@halftes6

Slide 41

@halftes6

Slide 42

timers @halftes6

Slide 43

@halftes6

Slide 44

requestAnimationFrame @halftes6

Slide 45

requestAnimationFrame @halftes6

Slide 46

??????????????????????? ??????????????????????? ??????????????????????? ??????????????????????? ??????????????????????? @halftes6

Slide 47

🎷event loop queues 🎷 • Task • Flush • Microtask @halftes6

Slide 48

@halftes6

Slide 49

@halftes6

Slide 50

@halftes6

Slide 51

@halftes6

Slide 52

@halftes6

Slide 53

@halftes6

Slide 54

@halftes6

Slide 55

@halftes6

Slide 56

@halftes6

Slide 57

@halftes6

Slide 58

@halftes6

Slide 59

@halftes6

Slide 60

@halftes6 gif by mercy hurst

Slide 61

@halftes6 clock by requestreduce.org

Slide 62

Back to the Source Code @halftes6

Slide 63

Back to the Source Code @halftes6

Slide 64

flushScheduler Queue @halftes6

Slide 65

queueWatcher @halftes6

Slide 66

🔬 @halftes6

Slide 67

@halftes6

Slide 68

@halftes6

Slide 69

@halftes6

Slide 70

@halftes6

Slide 71

@halftes6

Slide 72

@halftes6

Slide 73

@halftes6

Slide 74

@halftes6

Slide 75

@halftes6

Slide 76

queueWatcher @halftes6

Slide 77

@halftes6

Slide 78

@halftes6

Slide 79

@halftes6

Slide 80

@halftes6

Slide 81

@halftes6

Slide 82

@halftes6

Slide 83

@halftes6

Slide 84

@halftes6

Slide 85

@halftes6

Slide 86

@halftes6

Slide 87

@halftes6

Slide 88

😬 @halftes6

Slide 89

@halftes6

Slide 90

@halftes6

Slide 91

@halftes6

Slide 92

@halftes6

Slide 93

n @halftes6

Slide 94

@halftes6

Slide 95

n @halftes6

Slide 96

n @halftes6

Slide 97

n @halftes6

Slide 98

What we can extrapolate • $nextTick and nextTick callbacks always run in the Flush queue • The queue is flushed before the DOM updates • All $nextTicks nested at the same level will run top-to-bottom • Flush queues generated by Flush queues run consecutively • Don’t put time-consuming functions in $nextTick @halftes6

Slide 99

😩 @halftes6

Slide 100

nextTick — what two the docs say • Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. • New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. Please note that Vue does not come with a Promise polyfill, so if you target browsers that don’t support Promises natively (looking at you, IE), you will have to provide a polyfill yourself. @halftes6

Slide 101

@halftes6

Slide 102

Confession @halftes6

Slide 103

@halftes6

Slide 104

@halftes6

Slide 105

@halftes6

Slide 106

once more, with feeling @halftes6

Slide 107

@halftes6

Slide 108

@halftes6

Slide 109

😩 @halftes6

Slide 110

@halftes6

Slide 111

@halftes6

Slide 112

@halftes6

Slide 113

experience experience experience memory experience experience @halftes6

Slide 114

🤓 @halftes6

Slide 115

🗑 @halftes6

Slide 116

🚮 @halftes6

Slide 117

Ways to mitigate trash brain • Limit scope @halftes6

Slide 118

Ways to mitigate trash brain • Limit scope • Form a mental model of the bigger picture @halftes6

Slide 119

@halftes6

Slide 120

Ways to mitigate trash brain • Limit scope • Form a mental model of the bigger picture • Remind yourself to stay flexible @halftes6

Slide 121

Ways to mitigate trash brain • Limit scope • Form a mental model of the bigger picture • Remind yourself to stay flexible • Record hypotheses and their results @halftes6

Slide 122

@halftes6

Slide 123

Ways to mitigate trash brain • Limit scope • Form a mental model of the bigger picture • Remind yourself to stay flexible • Record hypotheses and their results • Remember it’s not the end of the world @halftes6

Slide 124

@halftes6

Slide 125

Slide 126

nextTick • a type of microtask • gets bucketed with other nextTicks • runs at a predictable(-ish) time • is after the DOM update not the DOM render • is like CSS @halftes6