GreeceJS Meetup #10, Oct 19, 2015

The History ofAsynchronous JavaScript

1995

Browser Wars: Round 1 – Fight!

Mosaic

Air Mosaic Spyglass MosaicMosaic Netscape

Internet ExplorerNetscape Navigator

Browser genealogy (early days)

1994 Q1 1994 Q2 1995 Q1 1995 Q2 1996 Q2 1997 Q1 1997 Q2 1998 Q1 1998 Q20%

20%

40%

60%

80%

100%

120%

97%

68%

9%

0% 0% 0% 0% 0% 0%0%

18%

54%

89%

80% 81%

60%

70%64%

0% 0% 0%4%

12% 12%15%

23%

32%

Browser Usage 1994 Q1 – 1998 Q2

Mosaic Netscape Navigator Internet ExplorerSOURCE: WWW USER SURVEY, GRAPHICS, VISUALIZATION & USABILITY CENTER, GEORGIA INSTITUTE OF TECHNOLOGY

Java Scheme Self

Mocha

LiveScript

JavaScript

10 days

Licensed by

renamed

renamed

European ComputerManufacturers Association

EcmaScript

• Netscape Enterprise Server

• Microsoft Internet Information Server (IIS)

• Mozilla Rhino• Node.js

JavaScript on the server

Dec 1995

Why did JavaScript become so popular imo?

1. It’s everywhere2. It’s easy (to begin with)3. It has excellent async features

This is Sparta

Sync illustrated: The Coffee shop metaphorSerially executing code (“Sync”) results in bottlenecks.

Mike ό ταλαίπωρος barrista

How traditional programming languages solve this: Concurrency

Barrista clones himself to facilitate simultaneous coffee preparation. Hardware becomes the limiting factor.

Barrista Barrista “clones” (threads)

The Asynchronous approachAll parties can continue performing their tasks before the “overall” task is finished.

Mike στην παραγγελία

Leroy στο αφρόγαλα

Amanda στους

espressoWilliam στην παράδοση

Asynchronous Javascript paradigms

• Callbacks• Promises• Generators / Iterators• Async / Await

In computer programming, a callback is a piece of executable code that is passed as an argument to other codehttps://en.wikipedia.org/wiki/Callback_(computer_programming)

// Function Declarationfunction awesome () {

return “indeed”;}

// Function Expressionvar awesome = function() { return “indeed”;}

In computer programming Javascript, a callback is a piece of executable code function that is passed as an argument to other code another functionhttps://en.wikipedia.org/wiki/Callback_(computer_programming) + myself

Never paid any attention to my

“first” exposure to callbacks.// Ajax jQuery example before Promises (circa 2011)$.ajax({

url : “/load_user_data”,method : “GET”,success : function(response) {console.log(“Results!”, response);}

});

Don’t like this

We like this

// Please _don’t_ name your functions like this.// This is only an example. Seriously.function σέξουλιάρικοAlert() {

var html = “...html to create the alert...”;$(‘body’).append(html);$(‘.button_ok’).on(‘click’, function(e){// Οτιδήποτε γίνεται όταν πατήσουμε OK});$(‘.button_cancel’).on(‘click’, function(e){// Οτιδήποτε γίνεται όταν πατήσουμε Cancel});

}

“We love this.Please use it everywhere.”

// A few days later.function σέξουλιάρικοAlert() {...}function σεξουλιάρικοAlert_2() {...}function βάλεΚαιΈναΑκόμηΑφεντικόAlert_3() {...}function κατιΚάνωΛάθος() {...}

Each dialog has its own actions for the “OK” and “Cancel” buttons.

These need to be parameterized.

// Μια πρώτη προσπάθεια (οχι και τόσο ιδανική)function my_alert(scenario) {

// ... existing modal creation code ...switch (scenario) {case “plainOK”: ...; break;case “confirmDeletion”: ...; break;// ... Ολα τα σενάρια εδώ ...}

}This grew to be a very

big switch statement

// Arguments are functions to be called when neededfunction my_alert(ok, cancel) {

// ... existing modal creation code ...$(‘.button_ok’).on(‘click’,function(){// 1. Τακτοποίηση / κλείσιμο dialog ... // 2. Εκτέλεση του callback

ok();});

}

// Invokemy_alert(

function(){// Things to do when user clicks OK},function(){// Things to do when user clicks Cancel}

);

Callback “HELL”

Scenario: Async load data from 3 sources (handling both success and failure), finally act depending on what was returned on the three calls

function showChartData() {$.ajax({

url : ‘/get_source_1’,type : ‘GET’,success : function(response) {

// Continue to load from source 2$.ajax({

url : ‘/get_source_2’,type : ‘GET’,success : function(response_2)

{// Finally load from

source 3$.ajax({

url : ‘/get_source_3’,

type : ‘GET’,success :

function(response_3) {//

Act on response, response_2 //

and response_3 here!},error :

function(err) {…}});

},error : function(err) {…}

});},error : function(err) {…}

});}

Promises History

• Discovered circa 1989• Largely inspired by the “E” programming

language• Implemented in many languages, e.g.

.NET => Task<T> Java => java.util.concurrent.Future Python => PEP 3148 C++ => std::future

All you need to know about promises

• Promise states1. Pending2. Fullfilled3. Rejected

• The “then” methodpromise.then(onFulfilled, onRejected)

• Promises can be chained

Popular promise implementations

• EcmaScript 6 Native Promises• Q (kriskowal/q) 9975 stars

• BlueBird (petkaantonov/bluebird) 8436 stars• When.js (cujojs/when) 2666 stars

• Vow (dfilatov/vow) 311 stars

Why BlueBird?