In web application development is almost impossible not to bump into the need of making an asynchronous call

UNDERSTANDING THE ASYNCHRONOUS PATTERN

#javascript #pattern#api #async #beginners

Andrea TinoSoftware Development Engineer

Who is this presentation for?

Everyone with a minimal background

in programming

What topics does it cover?

See previous slide :)

Oh yeah... But how detailed?

I will follow an horizontal approach without many details

THE PROBLEMAsynchronous programming was introduced to

face a problem, what problem is that?

Alice Bob

Can you give me some sugar please?

Here it is!

Alice is waiting for Bob...In this model, the important fact is that Alice waits for Bob to give her something she asked! In the specific case, the real problem is represented by the fact that Alice, while waiting, cannot do anything else.

THE SYNCHRONOUS MODELThe previous real life example can be translated

into an everyday programming scenario

The synchronous modelNormally in Javascript, API are synchronous. It means that when calling a function, the caller will wait until that called function returns. This system can deteriorate performance if a function is particularly computation expensive.

Callee:

Called function:

Active waitingWorkingIdle

Invoke Return

Overall active wait time

THE SOLUTIONWhy should Alice wait when Bob can just do his

job and come back to Alice once ready?

Alice

Sugar please?

Bob

Here it is!

Bob

Let me work on it...

Alice

Thanks!I’ll come back later...

THE ASYNCHRONOUS MODELThis is what happens in real life programming

when Alice asynchronously asks for sugar to Bob

The asynchronous modelIn Javascript, some API are asynchronous. It means that when calling a function, the called function returns immediately! The return value will be retrieved by means of a callback function.

Callee:

Called function:

Invoke Callback invokeActive waitingWorkingIdle

Callback function:

Callback execution time

SEEING IT IN ACTIONLet’s see a Javascript asynchronous function invokation in

action and how it changes our programming tyle

var syncFunction = function() { return ...;};

var value = syncFunction();console.log(’value is: ’ + value);

S Actively waitingCreate a separate js file and put there the function. This file must be included as LAST library in your web application.

A No waitOverride event subscription functions.

var asyncFunction = function(callback) { ...};

asyncFunction( function(value) { console.log(’value is: ’ + value); });

THANK YOUTwitter: @_atino

This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

Authored by: Andrea Tino

This presentation has been designed to target 9th+ graders in schools as part of introduction to development and IT.

andry.tino@hotmail.comE-Mail: andrea.tino@microsoft.com

The End