js event loop, promises, async await etcwebdevelopment.mit.edu/2018/pages/lectures/webday6... ·...
TRANSCRIPT
![Page 1: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/1.jpg)
JS Event Loop, Promises, Async Await etc
Slava Kim
![Page 2: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/2.jpg)
SynchronousHappens consecutively, one after another
![Page 3: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/3.jpg)
![Page 4: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/4.jpg)
AsynchronousHappens later at some point in time
![Page 5: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/5.jpg)
![Page 6: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/6.jpg)
Parallelism vs Concurrency
![Page 7: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/7.jpg)
What are those????
Concurrency - multiple tasks are handled
Parallelism - doing multiple tasks at the same time
![Page 8: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/8.jpg)
Parallelism vs Concurrency
TA
![Page 9: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/9.jpg)
Parallelism vs Concurrency
TA Student
![Page 10: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/10.jpg)
Parallelism vs Concurrency
TA
![Page 11: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/11.jpg)
Parallelism vs Concurrency
TA
![Page 12: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/12.jpg)
Parallelism vs Concurrency
TA
![Page 13: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/13.jpg)
Parallelism vs Concurrency
TA
![Page 14: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/14.jpg)
Parallelism vs Concurrency
TA
![Page 15: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/15.jpg)
Is TA concurrent or parallel?
TA is not parallel - there is only one TA
TA is concurrent tho, the TA goes around and is helping 3 students “simultaneously”, but some students need to wait
![Page 16: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/16.jpg)
Parallelism vs Concurrency
TATA
![Page 17: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/17.jpg)
Parallelism vs Concurrency
TA TA
![Page 18: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/18.jpg)
Parallelism vs Concurrency
TA
TA
![Page 19: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/19.jpg)
Parallelism vs Concurrency
TATA
![Page 20: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/20.jpg)
Parallelism vs Concurrency
TA
TA
![Page 21: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/21.jpg)
Is TA concurrent or parallel?
There are multiple TAs - we can achieve parallelism with concurrency
Still handling multiple students at the same time
![Page 22: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/22.jpg)
CPU analogy
Each TA - one CPU
Each student - a separate task
Some programming languages allow you to use multiple cores (C++, Java)
JavaScript is single threaded, can only use one core, but is still concurrent
How?
![Page 23: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/23.jpg)
Queue
TA
![Page 24: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/24.jpg)
Queue
TA
![Page 25: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/25.jpg)
Queue
TA
![Page 26: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/26.jpg)
Queue
JS click keypressclick click timeout
![Page 27: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/27.jpg)
Why callbacks?
![Page 28: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/28.jpg)
Why callbacks?
click
![Page 29: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/29.jpg)
Callbacks to handle a result of an operation
result
![Page 30: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/30.jpg)
Time outs and intervals
timeout
![Page 31: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/31.jpg)
Event Loop
click result click timeoutJS
Each individual event is handled in some orderNew events are queued up in the end
![Page 32: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/32.jpg)
Somewhere in C++ implementation of JS Engine
![Page 33: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/33.jpg)
Event Loops example
![Page 34: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/34.jpg)
Event Loops example
AC… (2 second delay)B
![Page 35: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/35.jpg)
Event Loops example
![Page 36: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/36.jpg)
Event Loops example
AC… (virtually no delay)B
![Page 37: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/37.jpg)
Event Loops: Good
It is a “simple” model to work with to achieve concurrency
No need for locks, or critical sections. Each function is a critical section
Good when you have a lot of I/O work (most web servers, UI systems)
Examples of I/O: talking to database, handling requests, waiting for user to click
![Page 38: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/38.jpg)
Event Loop: bad
CPU intensive operations will bring down your browser/server
Can be confusing for new users
No real way to predict in which order events will happen
![Page 39: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/39.jpg)
Promises - motivation
![Page 40: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/40.jpg)
Promises - motivation
Callback hell!
![Page 41: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/41.jpg)
Possible solution with promises
Only one additional level of nesting
Error handling can be grouped together
Only one branch of continuation
![Page 42: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/42.jpg)
Possible solution with promises
Only one additional level of nesting
Error handling can be grouped together
Only one branch of continuation
![Page 43: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/43.jpg)
Promises - await all
![Page 44: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/44.jpg)
Promises - await all
![Page 45: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/45.jpg)
Promises - race
![Page 46: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/46.jpg)
Promises - availability
Available in all modern browsers (rip IE)
Available in latest Node.js
Works with MongoDB client
Might need to wrap other libraries into promises interface with “promisify”
Makes code cleaner and easier to manage, yay!
Your interviewers will impressed
![Page 47: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/47.jpg)
Async/Await
New feature in the latest spec of JavaScript
Can await on anything that returns a promise
Is not yet available widely without special setup
Makes code even nicer
![Page 48: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/48.jpg)
Callback hell!
![Page 49: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/49.jpg)
Possible solution with promises
![Page 50: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/50.jpg)
Solution with Async/Await
No extra indentation or nesting at all
Code “reads” synchronous but actually is async
Handle errors with try/catch construct just like synchronous code
![Page 51: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/51.jpg)
Solution with Async/Await
No extra indentation or nesting at all
Code “reads” synchronous but actually is async
Handle errors with try/catch construct just like synchronous code
![Page 52: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/52.jpg)
Why don’t we use it now?
To make it work, you need to setup a compiler from “newest JS” to “old JS”
Every function that makes use of “await” needs to be marked “async”
Can make code difficult to follow
![Page 53: JS Event Loop, Promises, Async Await etcwebdevelopment.mit.edu/2018/pages/lectures/WEBday6... · 2018-01-16 · Event Loops: Good It is a “simple” model to work with to achieve](https://reader033.vdocuments.site/reader033/viewer/2022042104/5e827d89a3ec2f13cb428c27/html5/thumbnails/53.jpg)
But you still can use it
Supported in latest node, latest Chrome and latest Firefox
Probably will break on a lot of other places
[demo]