JavaScript Sync & Async Programming Workshop

 

Muhammad Ahsan Ayaz

Senior Software Engineer

Klarna

@Tech Karo

Synchronous Code

console.log('App started');
const a = 5;
const b = 6;
const c = a + b;
console.log(c);
console.log('App closed');

JavaScript Callback

function main(callbackFunction) {
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
  // calling callback function now
  callbackFunction(); 
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
  // calling callback function now
  callbackFunction(); 
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
  // calling callback function now
  callbackFunction(); 
}

main(/*define callback function here*/);

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
  // calling callback function now
  callbackFunction(); 
}

main(function() {
  
});

JavaScript Callback

function main(callbackFunction) {
  // do something
  // could take much time
  // i'm bored....
  // calling callback function now
  callbackFunction(); 
}

main(function() {
  console.log('everything is done');
});

Clone the Repository

https://bit.ly/js-sa-tech-karo

git clone https://github.com/AhsanAyaz/js-sync-async-workshop.git

Step 1

git checkout step-1

JS execution and Functions

Asynchronous Code

let user;
fetch("https://api.randomuser.me")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    user = data.results[0];
  });
console.log(user); <--- ???

Asynchronous Code

let user;
fetch("https://api.randomuser.me")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    user = data.results[0];
  });
console.log(user); <--- undefined

Asynchronous Code

Atif

asks for a pen

Zunair

had a pen. gives to Atif

Let me tell you a story of Sync(s)

  • Straight deal
  • No waiting time
  • Synchronous execution

A story full of promises

Atif

asks for a pen

Zunair

promised to give when he would get one

Atif

Fatima

asks for the math's book

gives Atif the book

Atif

receives a pen from somewhere

sends to Atif 

Step 2

git checkout step-2

JavaScript Promises

git checkout .

Async Await

An example of multiple async chunks with Promises

function makeRequest() {
  return callAPromise()
    .then(function () {
      return callAPromise();
    })
    .then(function () {
      return callAPromise()
    	.then(function () {
          return callAnotherPromise();
        });
    })
    .then(function () {
      return callAPromise();
    })
    .then(function () {
      return callAPromise();
    });
}

makeRequest();

With JavaScript ES6

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise().then(() => callAnotherPromise()))
    .then(() => callAPromise())
    .then(() => callAPromise());
}

makeRequest();

Problem

  • Two many indents
  • Each promise is async individually and it becomes hard to set breakpoints
  • Code gets messier

An example of multiple async chunks with Async Await

async function makeRequest() {
  await callAPromise();
  await callAPromise();
  await callAPromise();
  await callAnotherPromise();
  await callAPromise();
  await callAPromise();
}

makeRequest();

Benefits?

  • The main function is async
  • You can set breakpoints in a much easier manner
  • The code execution in debugger is synchronous

Step 3

git checkout step-3

JavaScript Async Await

git checkout .

That's it!

JavaScript Sync & Async Programming Workshop

By Muhammad Ahsan Ayaz

JavaScript Sync & Async Programming Workshop

JavaScript Sync & Async Programming Workshop @TechKaro

  • 172
Loading comments...

More from Muhammad Ahsan Ayaz