OOP in WinJS #6 : Asynchronous Programming

Welcome to the last article of OOP in WinJS series.If you feel lost, let me share the links of previous articles:

Async Programming is perhaps the most exciting thing a developer can do, as the knowledge in it is a must-have.

In this article, I'll be speaking about real world events and uses in programming.

Programming World

Let's give some example in programming world:

Facebook's Messaging System: If they hadn't added async operations,we wouldn't chat while navigating through the news feed.
Facebook's Notification System: While exploring through website and at the same time reading notifications (friend requests,comments,likes,messages).
Skype's Notification System: While talking to someone and receiving messagesat the same time without affecting the quality of call.
WhatsApp's Notification System: While messaging to someone, and another friend(s) chat with you

If there weren't async operations in tese popular websites/apps, the UI thread would lock up until the job ended which is really bad.

Real World Events

Would you rather be taken care of by a single doctor in a hospital or by many? Think about all the other patients.
Would you like to wait for the previous customer to finish his/her order or instead would you like to give order as well in the meantime?
Would you like to wait for the taxi station to send you an available car or would you like to look for the nearest taxi to take you asap?

Ever realized async programming was created by real world examples?

Lets take Starbucks for example:

You enter the Starbucks and make an order of your favorite beverage.

You place your order and choose your payment option and the cashier puts that order in the queue by marking an empty cup with your name on it.

Later the other people responsible for brewing fill the cup and call your name out.When you get the cup you get out of the queue and another individual comes after you and on and on. It keeps going...

Now, If you think of the cashier as UI thread, you shall see that it never stops flowing,it never hangs.The process keeps going.

If there weren't brewers, you'd have to wait for cashier to fill the cup and then take another order and do it again. This is called UI Thread Lock. In UI Thread,you can't start another job before completing one in same thread.But as in asynchronous way, UI never locks or waits you to complete job. It works backstage and completes the operation.

As I gave in the examples above, it's primarily used by many apps and websites out there.

Now let's see how we can implement it in WinJS.

Implementing Asynchronous Operations

We'll be writing a few messages in Javascript Console to show how it's done. To work async operations,we'll be using "WinJS.Promise" with a function which will work in the background.

Let's add some code to show how its declared:

var message ="";

The message variable we will be passing.

function asyncShowMessage(message) {
return new WinJS.Promise(function (send) {
setTimeout(function () {
send(message);
}, 1500);
});
}
function ShowMessage(msg) {
console.log(msg);
};

Async operation function and output function as written above simply sends message in every 1.5 seconds without locking the thread.
You can also see the promise's declaration.

To get this async operation working we'll be calling it a few times:

asyncShowMessage(message).
then(function (msg) {
ShowMessage("Hello User!");
}).
then(function (msg) {
ShowMessage("How are you?");
return asyncShowMessage(msg);
}).done();

You can write as much as ".then(function)" clause as you like to keep messages sending. Once finish, you can call "done()" method to exit operation.

Lets see the output:

Using Promises in WinJS,you can implement async tasks to do specific jobs without locking the thread and keep the app running smoothly.