A presentation at VueConf US in in Tampa, FL, USA by tessa
@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
@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
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
@halftes6
@halftes6
hypothesis @halftes6
@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
@halftes6
timers @halftes6
@halftes6
requestAnimationFrame @halftes6
requestAnimationFrame @halftes6
??????????????????????? ??????????????????????? ??????????????????????? ??????????????????????? ??????????????????????? @halftes6
🎷event loop queues 🎷 • Task • Flush • Microtask @halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6 gif by mercy hurst
@halftes6 clock by requestreduce.org
Back to the Source Code @halftes6
Back to the Source Code @halftes6
flushScheduler Queue @halftes6
queueWatcher @halftes6
🔬 @halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
queueWatcher @halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
@halftes6
😬 @halftes6
@halftes6
@halftes6
@halftes6
@halftes6
n @halftes6
@halftes6
n @halftes6
n @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
@halftes6
@halftes6
once more, with feeling @halftes6
@halftes6
@halftes6
😩 @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
@halftes6
Do you feel like you’re stuck in the event loop of hell, forced to fumble through setTimeout after setTimeout day after day when all you want to do is leap out of bed singing “I got Vue babe” and wielding nextTick in style? Join us as we dive into the source code of nextTick and microtasks and make nextTick work for you today!
for free. You
can too.