Async Workshop

You will learn on this workshop:

• Why javascript is working asynchron way? How does it affects the browser?
• What are Promises, how they are working?
• How can you chain promises?
• Error handling with promises.
• Async await 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 we need async code execution in Javascript?

• Start the live server.
• Open the http://localhost:5500/demo
• Check the responseiveness 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 this longer book chapters, articles, videos and playgrounds if you have some extra time and interested in deeper explanations.

• MDN: Promises
• Philip Roberts: What the heck is the event loop anyway?
• Javascript info: Async chapters
• Eloquent Javascript: Asynchronous Programming