Async Workshop

You will learn in this workshop:

• Why javascript is working asynchronous way? How does it affect the browser?
• What are Promises, and how do they work?
• How can you chain promises?
• Error handling with promises.
• Async awaits syntax.
• How can you handle multiple promises?

Setting up the repo

• Make sure that the Live Server VS code extension is installed.

Async Demo

Why do we need async code execution in Javascript?

• Start the live server.
• Open the http://localhost:5500/demo
• Check the responsiveness of the page:
  • Try out the on/off button.
  • Scroll the text.
  • Hover the buttons.
• Click on the blocking button
  • Check the responsivness again.
  • After the browser's unresponsive alert is shown, click to reload.
• Click the non-blocking button
  • Check the responsiveness again

Tasks

• The tasks are in js files, task<n>.js.
• Each js file contains the task's description.
• You can run the task with the node task<n>.js command for testing.

Do you want to dig into the details?

Check these longer book chapters, articles, videos and playgrounds if you have some extra time and are interested in deeper explanations.

• Philip Roberts: What the heck is the event loop anyway?
• Javascript info: Async chapters
• MDN: Promises
• Eloquent Javascript: Asynchronous Programming
• Inside Look at a Modern Browser series by Google (extra)
  • https://developer.chrome.com/blog/inside-browser-part1
  • https://developer.chrome.com/blog/inside-browser-part2
  • https://developer.chrome.com/blog/inside-browser-part3
  • https://developer.chrome.com/blog/inside-browser-part4