Share
Embed
Slide 1
Slide 1 text
Warping Time with
Async / Await
@cassilup, Jun 2017
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
JS History (simplified)
1995 2005 2015
JS ES5 ES6
Slide 5
Slide 5 text
JS History (simplified)
1995 2005 2015
JS ES5 ES6
Page
Load
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Ok, I’m grabbing something.
WHEN it appears and IF it appears,
I’ll show it to you.
Slide 8
Slide 8 text
JS History (simplified)
1995 2005 2015
Page
Load
AJAX
JS ES5 ES6
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
JS History (simplified)
1995 2005 2015
JS ES5 ES6
Page
Load
AJAX Promises
JS ES5 ES6
Slide 11
Slide 11 text
Promises
.then(…,…)
deferred
asynchronous
synchronous
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
asynchronous
synchronous
synchronous
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Promises
.then(…,…)
deferred
asynchronous
synchronous
If only if there was a way to convert the async back into sync.
Slide 19
Slide 19 text
JS History (there’s hope)
1995 2005 2015
JS ES5 ES6 ES2017
Page
Load
AJAX Promises Async/
Await
You are here.
Slide 20
Slide 20 text
ES5 ES2017
Slide 21
Slide 21 text
ES5 ES2017
1
Slide 22
Slide 22 text
1
2
ES5 ES2017
Slide 23
Slide 23 text
1
2
3
ES5 ES2017
Slide 24
Slide 24 text
Treating Promise Rejections with Async/Await
Pending Resolved
Rejected
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
As long as it returns a promise,
it can be awaited.
Slide 28
Slide 28 text
What’s in it for me?
tiny.cc/jsheroes-demo
Slide 29
Slide 29 text
1. jscodeshift, Facebook tool
https://github.com/facebook/jscodeshift
2. Based on ASTs
https://astexplorer.net
3. Check out js-codemod
https://github.com/cpojer/js-codemod
Demo Explained: Async / Await codeshift
Slide 30
Slide 30 text
1. Delayed execution
2. Promise.all() for making awaited HTTP calls run
concurrently
3. Non-promises can also be awaited:
await calls Promise.resolve with the value itself.
Async / Await Gotchas
Slide 31
Slide 31 text
1. History: Page Load → AJAX → Promises → Async / Await
2. Syntactic sugar making promises seem sync
(promise pitfalls still apply)
3. Shared state (no more isolated scopes)
4. async functions return Promises
5. try-catch is now possible
6. You can await anything
7. node.js >= 7.6.0, browsers friendly
Recap
Slide 32
Slide 32 text
Thank You.
@cassilup
You guys rock!
Slide 33
Slide 33 text
● https://tc39.github.io/ecmascript-asyncawait/
● https://github.com/tc39/ecmascript-asyncawait
● https://ponyfoo.com/articles/understanding-javascript-async-await
● https://dzone.com/articles/unit-testing-with-jasmine-and-asyncawait
● https://applyhead.com/javascript-callback-promise-async-await/
● http://thecodebarbarian.com/80-20-guide-to-async-await-in-node.js.html
● http://www.jstips.co/en/javascript/improving-your-async-functions-with-webworkers/
● http://www.2ality.com/2016/02/async-functions.html
● https://zeit.co/blog/async-and-await
● https://node.university/blog/498412/es7-es8#async-functions
Resources