the history of asynchronous javascript
TRANSCRIPT
![Page 1: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/1.jpg)
GreeceJS Meetup #10, Oct 19, 2015
The History ofAsynchronous JavaScript
![Page 2: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/2.jpg)
1995
![Page 3: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/3.jpg)
![Page 4: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/4.jpg)
![Page 5: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/5.jpg)
![Page 6: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/6.jpg)
![Page 7: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/7.jpg)
![Page 8: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/8.jpg)
![Page 9: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/9.jpg)
![Page 10: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/10.jpg)
Browser Wars: Round 1 – Fight!
![Page 11: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/11.jpg)
Mosaic
Air Mosaic Spyglass MosaicMosaic Netscape
Internet ExplorerNetscape Navigator
Browser genealogy (early days)
![Page 12: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/12.jpg)
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
![Page 13: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/13.jpg)
![Page 14: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/14.jpg)
Java Scheme Self
Mocha
LiveScript
JavaScript
10 days
Licensed by
renamed
renamed
![Page 15: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/15.jpg)
![Page 16: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/16.jpg)
![Page 17: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/17.jpg)
![Page 18: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/18.jpg)
European ComputerManufacturers Association
EcmaScript
![Page 19: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/19.jpg)
• Netscape Enterprise Server
• Microsoft Internet Information Server (IIS)
• Mozilla Rhino• Node.js
JavaScript on the server
Dec 1995
![Page 20: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/20.jpg)
![Page 21: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/21.jpg)
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
![Page 22: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/22.jpg)
Sync illustrated: The Coffee shop metaphorSerially executing code (“Sync”) results in bottlenecks.
Mike ό ταλαίπωρος barrista
![Page 23: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/23.jpg)
How traditional programming languages solve this: Concurrency
Barrista clones himself to facilitate simultaneous coffee preparation. Hardware becomes the limiting factor.
Barrista Barrista “clones” (threads)
![Page 24: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/24.jpg)
The Asynchronous approachAll parties can continue performing their tasks before the “overall” task is finished.
Mike στην παραγγελία
Leroy στο αφρόγαλα
Amanda στους
espressoWilliam στην παράδοση
![Page 25: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/25.jpg)
Asynchronous Javascript paradigms
• Callbacks• Promises• Generators / Iterators• Async / Await
![Page 26: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/26.jpg)
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)
![Page 27: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/27.jpg)
// Function Declarationfunction awesome () {
return “indeed”;}
// Function Expressionvar awesome = function() { return “indeed”;}
![Page 28: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/28.jpg)
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
![Page 29: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/29.jpg)
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);}
});
![Page 30: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/30.jpg)
Don’t like this
![Page 31: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/31.jpg)
We like this
![Page 32: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/32.jpg)
// 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});
}
![Page 33: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/33.jpg)
“We love this.Please use it everywhere.”
![Page 34: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/34.jpg)
// 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.
![Page 35: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/35.jpg)
// Μια πρώτη προσπάθεια (οχι και τόσο ιδανική)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
![Page 36: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/36.jpg)
// 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}
);
![Page 37: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/37.jpg)
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) {…}
});}
![Page 38: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/38.jpg)
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
![Page 39: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/39.jpg)
All you need to know about promises
• Promise states1. Pending2. Fullfilled3. Rejected
• The “then” methodpromise.then(onFulfilled, onRejected)
• Promises can be chained
![Page 40: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/40.jpg)
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
![Page 41: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/41.jpg)
![Page 42: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/42.jpg)
Why BlueBird?
![Page 43: The history of asynchronous JavaScript](https://reader036.vdocument.in/reader036/viewer/2022062902/58edce121a28abf82e8b4623/html5/thumbnails/43.jpg)