Back to the Vueture: Stuck in the Event Loop

@halftes6

Syncopation @halftes6

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

Syncopation @halftes6

Syncopation is hard @halftes6

Syncopation is hard in coding, too @halftes6

music = coding = confusing @halftes6

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

????? @halftes6

@halftes6

Temporal experiment #1 @halftes6

@halftes6

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

The UI @halftes6

Destination time must be set to the future @halftes6

Last Departed time must change to Present @halftes6

Present must change to match Destination @halftes6

Back to $nextTick… @halftes6

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

$nextTick to the Future! @halftes6

@halftes6

✋ @halftes6

@halftes6

hypothesis @halftes6

@halftes6

🤔 @halftes6

@halftes6

❗ @halftes6

$nextTick to the Future Part II! @halftes6

@halftes6

$nextTick to the Future Part III! @halftes6

@halftes6

hypothesis @halftes6

$nextTick and rAF @halftes6

@halftes6

timers @halftes6

@halftes6

requestAnimationFrame @halftes6

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

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

@halftes6

@halftes6 gif by mercy hurst

@halftes6 clock by requestreduce.org

Back to the Source Code @halftes6

flushScheduler Queue @halftes6

queueWatcher @halftes6

🔬 @halftes6

@halftes6

queueWatcher @halftes6

@halftes6

😬 @halftes6

@halftes6

n @halftes6

@halftes6

n @halftes6

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

😩 @halftes6

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

@halftes6

Confession @halftes6

@halftes6

once more, with feeling @halftes6

@halftes6

😩 @halftes6

@halftes6

experience experience experience memory experience experience @halftes6

🤓 @halftes6

🗑 @halftes6

🚮 @halftes6

Ways to mitigate trash brain • Limit scope @halftes6

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

@halftes6

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

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

@halftes6

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

@halftes6

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

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

????? @halftes6

💡 1 @halftes6

💡 1 2 2 2 2 2 2 @halftes6

@halftes6

💡 1 2 2 2 2 2 2 @halftes6

💡 1 2 2 3 2 2 2 2 @halftes6

💡 1 2 2 3 2 2 4 2 4 2 @halftes6

💡 1 2 2 3 5 2 2 5 4 2 4 2 @halftes6

💡 1 2 6 2 3 5 2 2 5 4 2 4 2 @halftes6

💡 1 2 6 7 2 3 5 2 2 5 4 2 4 2 @halftes6

💡 1 8 2 6 7 2 3 5 2 2 5 4 2 4 2 @halftes6

@halftes6

📝 1 8 2 6 7 2 3 5 2 2 5 4 2 4 2 @halftes6

@halftes6

tessa.dev @halftes6 @halftes6

@halftes6