SlideShare a Scribd company logo
Callbacks, Promises, and Coroutines
                  (oh my!)


     Asynchronous Programming
        Patterns in JavaScript


                Domenic Denicola
           http://domenicdenicola.com
                @domenicdenicola
In non-web languages,
most of the code we write is synchronous.

                aka blocking
Console.WriteLine("What is your name?");
string name = Console.ReadLine();
Console.WriteLine("Hello, " + name);
var fileNames = Directory.EnumerateFiles("C:");

foreach (var fileName in fileNames)
{
  using (var f = File.Open(fileName, FileMode.Open))
  {
    Console.WriteLine(fileName + " " + f.Length);
  }
}
using (var client = new WebClient())
{
  string html =
client.DownloadString("http://news.ycombinator.com");

    Console.WriteLine(html.Contains("Google"));
    Console.WriteLine(html.Contains("Microsoft"));
    Console.WriteLine(html.Contains("Apple"));
}
Thread.Start                               BackgroundWorker


               Control.InvokeRequired



        This often causes us some pain…

       … but hey, there’s always threads!

                       Dispatcher.Invoke



ThreadPool

                                              .AsParallel()
Q: What are these threads doing, most of the time?


A: waiting
WTF!?
In JavaScript, we do things differently.
There’s only one thread in JavaScript,
so we use that thread to get stuff done.
OK, let’s talk about…
•   The event loop
•   Callbacks
•   Promises
•   Coroutines
THE EVENT LOOP
You’ve seen event loops before:
int WINAPI WinMain(HINSTANCE hInstance,
                   HINSTANCE hPrevInstance,
                   LPSTR lpCmdLine,
                   int nCmdShow)
{
  MSG msg;
  while (GetMessage(&msg, NULL, 0, 0) > 0)
  {
    TranslateMessage(&msg);
    DispatchMessage(&msg);
  }
  return msg.wParam;
}
this.btnOK.Click += this.btnOK_Click;


private void btnOK_Click(object sender,
                         EventArgs e)
{
  // ...
}
$("#ok-button").click(function () {
    // ...
});

setTimeout(function () {
    // ...
}, 100);

$.get("http://example.com", function (result) {
    // ...
});
Some event loop subtleties
•   Yielding
•   Async’s not sync
•   Errors
•   It’s not magic
Event Loop Subtleties

   Yielding
   console.log("1");

   $.get("/echo/2", function (result) {
     console.log(result);
   });

   console.log("3");

   // 1, 3, 2
Event Loop Subtleties

   Async’s not sync
   var hi = null;

   $.get("/echo/hi", function (result) {
     hi = result;
   });

   console.log(hi);

   // null
Event Loop Subtleties

   Errors
   console.log("About to get the website...");

   $.ajax("http://sometimesdown.example.com", {
     success: function (result) {
        console.log(result);
     },
     error: function () {
        throw new Error("Error getting the website");
     }
   });

   console.log("Continuing about my business...");
Event Loop Subtleties

   It’s not magic
   function fib(n) {
       return n < 2 ? 1 : fib(n-2) + fib(n-1);
   }

   console.log("1");

   setTimeout(function () {
      console.log("2");
   }, 100);

   fib(40);

   // 1 ... 15 seconds later ... 2

http://teddziuba.com/2011/10/node-js-is-cancer.html
The event loop is tricky… but powerful.
CALLBACKS
What we’ve seen so far has been doing
  asynchronicity through callbacks.
Callbacks are OK for simple operations, but
 force us into continuation passing style.
Recurring StackOverflow question:
function getY() {
  var y;
  $.get("/gety", function (jsonData) {
    y = jsonData.y;
  });
  return y;
}
                      Why doesn’t it work???
var x = 5;
var y = getY();

console.log(x + y);
After getting our data, we have to do
 everything else in a continuation:
function getY(continueWith) {
    $.get("/gety", function (jsonData) {
      continueWith(jsonData.y);
    });
}


var x = 5;
getY(function (y) {
    console.log(x + y);
});
CPS Headaches
• Doing things in sequence is hard
• Doing things in parallel is harder
• Errors get lost easily
CPS Headaches

  Doing things in sequence is hard
  $("#button").click(function () {
    promptUserForTwitterHandle(function (handle) {
      twitter.getTweetsFor(handle, function (tweets) {
        ui.show(tweets);
      });
    });
  });
CPS Headaches

  Doing things in parallel is harder
  var tweets, answers, checkins;

  twitter.getTweetsFor("domenicdenicola", function (result) {
    tweets = result;
    somethingFinished();
  });
  stackOverflow.getAnswersFor("Domenic", function (result) {
    answers = result;
    somethingFinished();
  });
  fourSquare.getCheckinsBy("Domenic", function (result) {
    checkins = result;
    somethingFinished();
  });
CPS Headaches

  Doing things in parallel is harder
  var finishedSoFar = 0;

  function somethingFinished() {
    if (++finishedSoFar === 3) {
      ui.show(tweets, answers, checkins);
    }
  }
CPS Headaches

  Errors get lost easily
  function getTotalFileLengths(path, callback) {
    fs.readdir(path, function (err, fileNames) {
      var total = 0;

       var finishedSoFar = 0;
       function finished() {
         if (++finishedSoFar === fileNames.length) {
           callback(total);
         }
       }

        fileNames.forEach(function (fileName) {
          fs.readFile(fileName, function (err, file) {
            total += file.length;
            finished();
          });
        });
      });
  }
You could write your own library to make this nicer…
function parallel(actions, callback) {
  var results = [];
  function finished(result) {
    results.push(result);
    if (results.length === actions.length) {
        callback(results);
    }
  }

    actions.forEach(function (action) {
      action(finished);
    });
}
parallel([
  function (cb) {
     twitter.getTweetsFor("domenicdenicola", cb);
  },
  function (cb) {
     stackOverflow.getAnswersFor("Domenic", cb);
  },
  function (cb) {
     fourSquare.getCheckinsFor("Domenic", cb);
  }
], function (results) {
  console.log("tweets = ", results[0]);
  console.log("answers = ", results[1]);
  console.log("checkins = ", results[2]);
});
And in fact many people have:




https://github.com/joyent/node/wiki/modules#wiki-async-flow
The best of these (IMO) are based on
  an abstraction called “promises”
PROMISES
Un-inverts the chain of responsibility:
instead of calling a passed callback, return a promise.
addWithCallback(a, b, function (result) {
  assert.equal(result, a + b);
});

var promise = addWithPromise(a, b);

promise.then(function (result) {
  assert.equal(result, a + b);
});
Why promises are awesome

• Cleaner method signatures
• Uniform return/error semantics
• Easy composition
• Easy sequential/parallel join
• Always async
• Exception-style error bubbling
Promises are Awesome

  Cleaner method signatures
  Uniform return/error semantics
  $.get(
    url,
    [data],
    [success(data, status, xhr)],
    [dataType]
  )
Promises are Awesome

  Cleaner method signatures
  Uniform return/error semantics
  $.ajax(url, settings)

  settings.success(data, status, xhr)
  settings.error(xhr, status, errorThrown)
  settings.complete(xhr, status)
Promises are Awesome

  Cleaner method signatures
  Uniform return/error semantics
  fs.open(
    path,
    flags,
    [mode],
    [callback(error, file)]
  )
Promises are Awesome

  Cleaner method signatures
  Uniform return/error semantics
  fs.write(
    file,
    buffer,
    offset,
    length,
    position,
    [callback(error, written, buffer)]
  )
Promises are Awesome

  Cleaner method signatures
  Uniform return/error semantics
  getAsPromise(url, [data], [dataType]).then(
    function onFulfilled(result) {
       var data = result.data;
       var status = result.status;
       var xhr = result.xhr;
    },
    function onBroken(error) {
       console.error("Couldn't get", error);
    }
  );
Promises are Awesome

  Easy composition

  function getUser(userName, onSuccess, onError) {
    $.ajax("/user?" + userName, {
      success: onSuccess,
      error: onError
    });
  }
Promises are Awesome

  Easy composition

  function getUser(userName) {
    return getAsPromise("/user?" + userName);
  }
Promises are Awesome

  Easy composition

  function getFirstName(userName, onSuccess, onError) {
    $.ajax("/user?" + userName, {
      success: function successProxy(data) {
         onSuccess(data.firstName);
      },
      error: onError
    });
  }
Promises are Awesome

  Easy composition

  function getFirstName(userName) {
    return getAsPromise("/user?" + userName)
             .get("firstName");
  }
Promises are Awesome

  Easy sequential join

  $("#button").click(function () {
    promptUserForTwitterHandle(function (handle) {
      twitter.getTweetsFor(handle, function (tweets) {
        ui.show(tweets);
      });
    });
  });
Promises are Awesome

  Easy sequential join

  $("#button").clickPromise()
    .then(promptUserForTwitterHandle)
    .then(twitter.getTweetsFor)
    .then(ui.show);
Promises are Awesome

  Easy parallel join

  var tweets, answers, checkins;

  twitter.getTweetsFor("domenicdenicola", function (result) {
    tweets = result;
    somethingFinished();
  });
  stackOverflow.getAnswersFor("Domenic", function (result) {
    answers = result;
    somethingFinished();
  });
  fourSquare.getCheckinsBy("Domenic", function (result) {
    checkins = result;
    somethingFinished();
  });
Promises are Awesome

  Easy parallel join

  Q.all([
    twitter.getTweetsFor("domenicdenicola"),
    stackOverflow.getAnswersFor("Domenic"),
    fourSquare.getCheckinsBy("Domenic")
  ]).then(function (results) {
    console.log(results[0], results[1], results[2]);
  });
Promises are Awesome

  Easy parallel join

  Q.all([
    twitter.getTweetsFor("domenicdenicola"),
    stackOverflow.getAnswersFor("Domenic"),
    fourSquare.getCheckinsBy("Domenic")
  ]).spread(function (tweets, answers, checkins) {
    console.log(tweets, answers, checkins);
  });
Promises are Awesome

  Always async

  function getUser(userName, onSuccess, onError) {
    if (cache.has(userName)) {
      onSuccess(cache.get(userName));
    } else {
      $.ajax("/user?" + userName, {
        success: onSuccess,
        error: onError
      });
    }
  }
Promises are Awesome

  Always async

  console.log("1");

  getUser("ddenicola", function (user) {
    console.log(user.firstName);
  });

  console.log("2");

  // 1, 2, Domenic
Promises are Awesome

  Always async

  console.log("1");

  getUser("ddenicola", function (user) {
    console.log(user.firstName);
  });

  console.log("2");

  // 1, Domenic, 2
Promises are Awesome

  Always async

  function getUser(userName) {
    if (cache.has(userName)) {
      return Q.ref(cache.get(userName));
    } else {
      return getWithPromise("/user?" + userName);
    }
  }
Promises are Awesome

  Always async

  console.log("1");

  getUser("ddenicola").then(function (user) {
    console.log(user.firstName);
  });

  console.log("2");

  // 1, 2, Domenic (every time)
Promises are Awesome

  Exception-style error bubbling

  getUser("Domenic", function (user) {
    getBestFriend(user, function (friend) {
      ui.showBestFriend(friend);
    });
  });
Promises are Awesome

  Exception-style error bubbling

  getUser("Domenic", function (err, user) {
    if (err) {
      ui.error(err);
    } else {
      getBestFriend(user, function (err, friend) {
        if (err) {
          ui.error(err);
        } else {
          ui.showBestFriend(friend);
        }
      });
    }
  });
Promises are Awesome

  Exception-style error bubbling

  getUser("Domenic")
    .then(getBestFriend, ui.error)
    .then(ui.showBestFriend, ui.error);
Promises are Awesome

  Exception-style error bubbling

  getUser("Domenic")
    .then(getBestFriend)
    .then(ui.showBestFriend, ui.error);
Promises are Awesome

  Exception-style error bubbling

  ui.startSpinner();
  getUser("Domenic")
    .then(getBestFriend)
    .then(
       function (friend) {
          ui.showBestFriend(friend);
          ui.stopSpinner();
       },
       function (error) {
          ui.error(error);
          ui.stopSpinner();
       }
    );
Promises are Awesome

  Exception-style error bubbling

  ui.startSpinner();
  getUser("Domenic")
    .then(getBestFriend)
    .then(ui.showBestFriend, ui.error)
    .fin(ui.stopSpinner);
Promises are Awesome

  Exception-style error bubbling

  function getBestFriendAndDontGiveUp(user) {
    return getUser(user).then(
      getBestFriend,
      function (error) {
        if (error instanceof TemporaryNetworkError) {
          console.log("Retrying after error", error);
          return getBestFriendAndDontGiveUp(user);
        }
        throw error;
      });
  }
Sounds great. How do I get in on this action?
Use Q
•   By Kris Kowal, @kriskowal
•   https://github.com/kriskowal/q
•   Can consume promises from jQuery etc.
•   Implements various CommonJS standards
If you’re already using jQuery’s promises, switch to Q:


    https://github.com/kriskowal/q/wiki/jQuery
Creating promises with Q

   Fulfilling promises
   // We have:
   setTimeout(doSomething, 1000);

   // We want:
   delay(1000).then(doSomething);
Creating promises with Q

   Fulfilling promises
   function delay(ms) {
     var deferred = Q.defer();
     setTimeout(deferred.resolve, ms);
     return deferred.promise;
   }

   delay(1000).then(doSomething);
Creating promises with Q

   Breaking promises
   function getWithTimeout(url, ms, onSuccess, onError) {
     var isTimedOut = false, isHttpErrored = false;

       setTimeout(function () {
         if (!isHttpErrored) {
           isTimedOut = true;
           onError(new Error("timed out"));
         }
       }, ms);

       $.ajax(url, {
         success: function (result) {
           if (!isTimedOut) { onSuccess(result); }
         },
         error: function (xhr, status, error) {
           if (!isTimedOut) {
             isHttpErrored = true;
             onError(error);
           }
         }
       });
   }
Creating promises with Q

   Breaking promises
   function getWithTimeout(url, ms) {
     var deferred = Q.defer();

       setTimeout(function () {
         deferred.reject(new Error("timed out"));
       }, ms);

       $.ajax(url, {
         success: deferred.resolve,
         error: deferred.reject
       });

       return deferred.promise;
   }
Creating promises with Q

   Building abstractions
   function timeout(promise, ms) {
     var deferred = Q.defer();
     promise.then(deferred.resolve, deferred.reject);

       setTimeout(function () {
         deferred.reject(new Error("timed out"));
       }, ms);

       return deferred.promise;
   }

   function getWithTimeout(url, ms) {
     return timeout(getAsPromise(url), ms);
   }
Promises are cool.
They clean up our method signatures.


They’re composable, they’re joinable,
    and they’re dependably async.


They unify various callback conventions
 into something very much like return
        values and exceptions.
But… we still have to write in CPS.
COROUTINES
“Coroutines are computer program
            components that generalize subroutines
                 to allow multiple entry points for
             suspending and resuming execution at
                             certain locations.”



http://en.wikipedia.org/wiki/Coroutine
WTF!?
Nice:
var xP = getX();
var yP = getY();
var zP = getZ();

Q.all([xP, yP, zP]).spread(function (x, y, z) {
  console.log(x + y + z);
});
Nicer:
var [x, y, z] = await Q.all([getX(), getY(), getZ()]);

console.log(x + y + z);
Nice:
$("#button").clickPromise()
  .then(promptUserForTwitterHandle)
  .then(twitter.getTweetsFor)
  .then(ui.show);
Nicer:
await $("#button").clickPromise();

var handle = await promptUserForTwitterHandle();
var tweets = await twitter.getTweetsFor(handle);

ui.show(tweets);
Q: Can’t the compiler do this for me?


A: yes… if you are willing to introduce a compiler.
Several options, none perfect
•   Kaffeine: http://weepy.github.com/kaffeine/
•   Traceur: http://tinyurl.com/traceur-js
•   TameJS: http://tamejs.org/
•   Node fork: http://tinyurl.com/node-async
Q: OK well… can’t the interpreter do this for me?


A: yes… if you’re willing to wait for the next version of JS.
The next version of JavaScript (“ECMAScript
Harmony”) has a limited form of coroutines that can
  be twisted to do something like what we want.
ECMAScript Harmony generators
 function* fibonacci() {
   var [prev, curr] = [0, 1];
   for (;;) {
     [prev, curr] = [curr, prev + curr];
      yield curr;
   }
 }

 for (n of fibonnaci()) {
   console.log(n);
 }



http://wiki.ecmascript.org/doku.php?id=harmony:generators
ECMAScript Harmony generators
 var eventualAdd = Q.async(function* (pA, pB) {
   var a = yield pA;
   var b = yield pB;
   return a + b;
 });




https://github.com/kriskowal/q/tree/master/examples/async-generators
ECMAScript Harmony generators
 // Can only use yield as we want to within
 // Q.async'ed generator functions

 Q.async(function* () {
   // Talk to the server to get one and two.
   var three = yield eventualAdd(getOne(), getTwo());

   assert.equal(three, 3);
 })();




https://groups.google.com/d/topic/q-continuum/7PWKbgeFA48/discussion
ECMAScript Harmony generators
 // Given promise-returning delay(ms) as before:

 var animateAsync = Q.async(function* (el) {
   for (var i = 0; i < 100; ++i) {
     element.style.left = i;
     yield delay(20);
   }
 });




http://wiki.ecmascript.org/doku.php?id=strawman:async_functions
ECMAScript Harmony generators
 Q.async(function* () {
   var el = document.getElementById("my-element");

    yield animateAsync(el);

   console.log("it's done animating");
 })();




https://groups.google.com/d/topic/q-continuum/7PWKbgeFA48/discussion
So coroutines are a bit of a mess, but
   we’ll see how things shape up.
Recap
•   Async is here to stay
•   But you don’t have to dive into callback hell
•   Use promises
•   Use Q
•   Maybe use coroutines if you’re feeling brave
Thanks for listening!

More Related Content

What's hot

Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Scott Wlaschin
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
Abul Hasan
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
Brainhub
 
Models for hierarchical data
Models for hierarchical dataModels for hierarchical data
Models for hierarchical data
Karwin Software Solutions LLC
 
Spring Framework - Spring Security
Spring Framework - Spring SecuritySpring Framework - Spring Security
Spring Framework - Spring Security
Dzmitry Naskou
 
RxSwift to Combine
RxSwift to CombineRxSwift to Combine
RxSwift to Combine
Bo-Young Park
 
Futures and Rx Observables: powerful abstractions for consuming web services ...
Futures and Rx Observables: powerful abstractions for consuming web services ...Futures and Rx Observables: powerful abstractions for consuming web services ...
Futures and Rx Observables: powerful abstractions for consuming web services ...
Chris Richardson
 
[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?
NAVER D2
 
Jenkins
JenkinsJenkins
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
Jeevesh Pandey
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
Ignacio Martín
 
Pipeline oriented programming
Pipeline oriented programmingPipeline oriented programming
Pipeline oriented programming
Scott Wlaschin
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
Garrett Welson
 
Postman
PostmanPostman
React js basics
React js basicsReact js basics
React js basics
Maulik Shah
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
RESTful API 제대로 만들기
RESTful API 제대로 만들기RESTful API 제대로 만들기
RESTful API 제대로 만들기
Juwon Kim
 
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
Shengyou Fan
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
Ben McCormick
 
React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?
Fibonalabs
 

What's hot (20)

Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
Models for hierarchical data
Models for hierarchical dataModels for hierarchical data
Models for hierarchical data
 
Spring Framework - Spring Security
Spring Framework - Spring SecuritySpring Framework - Spring Security
Spring Framework - Spring Security
 
RxSwift to Combine
RxSwift to CombineRxSwift to Combine
RxSwift to Combine
 
Futures and Rx Observables: powerful abstractions for consuming web services ...
Futures and Rx Observables: powerful abstractions for consuming web services ...Futures and Rx Observables: powerful abstractions for consuming web services ...
Futures and Rx Observables: powerful abstractions for consuming web services ...
 
[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?
 
Jenkins
JenkinsJenkins
Jenkins
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
 
Pipeline oriented programming
Pipeline oriented programmingPipeline oriented programming
Pipeline oriented programming
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
Postman
PostmanPostman
Postman
 
React js basics
React js basicsReact js basics
React js basics
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
RESTful API 제대로 만들기
RESTful API 제대로 만들기RESTful API 제대로 만들기
RESTful API 제대로 만들기
 
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
 
React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?
 

Viewers also liked

W3C Automotive 표준 개발 현황
W3C Automotive 표준 개발 현황W3C Automotive 표준 개발 현황
W3C Automotive 표준 개발 현황
Wonsuk Lee
 
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
정석 양
 
[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
 
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
정석 양
 
CSS 실무테크닉
CSS 실무테크닉CSS 실무테크닉
CSS 실무테크닉
Eun Cho
 
CSS 셀렉터
CSS 셀렉터CSS 셀렉터
CSS 셀렉터
Eun Cho
 
[Hello world 오픈세미나]실시간웹을위한comet과socket.io
[Hello world 오픈세미나]실시간웹을위한comet과socket.io[Hello world 오픈세미나]실시간웹을위한comet과socket.io
[Hello world 오픈세미나]실시간웹을위한comet과socket.io
NAVER D2
 
[Hello world 오픈 세미나]ffmpeg android
[Hello world 오픈 세미나]ffmpeg android[Hello world 오픈 세미나]ffmpeg android
[Hello world 오픈 세미나]ffmpeg androidNAVER D2
 
[Hello world 오픈 세미나]oauth
[Hello world 오픈 세미나]oauth[Hello world 오픈 세미나]oauth
[Hello world 오픈 세미나]oauthNAVER D2
 

Viewers also liked (9)

W3C Automotive 표준 개발 현황
W3C Automotive 표준 개발 현황W3C Automotive 표준 개발 현황
W3C Automotive 표준 개발 현황
 
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
 
[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
 
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
 
CSS 실무테크닉
CSS 실무테크닉CSS 실무테크닉
CSS 실무테크닉
 
CSS 셀렉터
CSS 셀렉터CSS 셀렉터
CSS 셀렉터
 
[Hello world 오픈세미나]실시간웹을위한comet과socket.io
[Hello world 오픈세미나]실시간웹을위한comet과socket.io[Hello world 오픈세미나]실시간웹을위한comet과socket.io
[Hello world 오픈세미나]실시간웹을위한comet과socket.io
 
[Hello world 오픈 세미나]ffmpeg android
[Hello world 오픈 세미나]ffmpeg android[Hello world 오픈 세미나]ffmpeg android
[Hello world 오픈 세미나]ffmpeg android
 
[Hello world 오픈 세미나]oauth
[Hello world 오픈 세미나]oauth[Hello world 오픈 세미나]oauth
[Hello world 오픈 세미나]oauth
 

Similar to Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patterns in JavaScript

Pick up the low-hanging concurrency fruit
Pick up the low-hanging concurrency fruitPick up the low-hanging concurrency fruit
Pick up the low-hanging concurrency fruit
Vaclav Pech
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
Michael Girouard
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani
 
mobl - model-driven engineering lecture
mobl - model-driven engineering lecturemobl - model-driven engineering lecture
mobl - model-driven engineering lecture
zefhemel
 
Promise: async programming hero
Promise: async programming heroPromise: async programming hero
Promise: async programming hero
The Software House
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
TrevorBurnham
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScript
jnewmanux
 
async/await in Swift
async/await in Swiftasync/await in Swift
async/await in Swift
Peter Friese
 
Think Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJSThink Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJS
Adam L Barrett
 
mobl
moblmobl
mobl
zefhemel
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
 
The Promised Land (in Angular)
The Promised Land (in Angular)The Promised Land (in Angular)
The Promised Land (in Angular)
Domenic Denicola
 
Node.js - Best practices
Node.js  - Best practicesNode.js  - Best practices
Node.js - Best practices
Felix Geisendörfer
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
Ramesh Nair
 
JavaScript Lessons 2023
JavaScript Lessons 2023JavaScript Lessons 2023
JavaScript Lessons 2023
Laurence Svekis ✔
 
ES6: The Awesome Parts
ES6: The Awesome PartsES6: The Awesome Parts
ES6: The Awesome Parts
Domenic Denicola
 
Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13
Jason Lotito
 
Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and http
Alexe Bogdan
 
Griffon @ Svwjug
Griffon @ SvwjugGriffon @ Svwjug
Griffon @ Svwjug
Andres Almiray
 

Similar to Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patterns in JavaScript (20)

Pick up the low-hanging concurrency fruit
Pick up the low-hanging concurrency fruitPick up the low-hanging concurrency fruit
Pick up the low-hanging concurrency fruit
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
mobl - model-driven engineering lecture
mobl - model-driven engineering lecturemobl - model-driven engineering lecture
mobl - model-driven engineering lecture
 
Promise: async programming hero
Promise: async programming heroPromise: async programming hero
Promise: async programming hero
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScript
 
async/await in Swift
async/await in Swiftasync/await in Swift
async/await in Swift
 
Think Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJSThink Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJS
 
mobl
moblmobl
mobl
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
The Promised Land (in Angular)
The Promised Land (in Angular)The Promised Land (in Angular)
The Promised Land (in Angular)
 
Node.js - Best practices
Node.js  - Best practicesNode.js  - Best practices
Node.js - Best practices
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
JavaScript Lessons 2023
JavaScript Lessons 2023JavaScript Lessons 2023
JavaScript Lessons 2023
 
ES6: The Awesome Parts
ES6: The Awesome PartsES6: The Awesome Parts
ES6: The Awesome Parts
 
Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13
 
Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and http
 
Griffon @ Svwjug
Griffon @ SvwjugGriffon @ Svwjug
Griffon @ Svwjug
 

More from Domenic Denicola

The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)
Domenic Denicola
 
Async Frontiers
Async FrontiersAsync Frontiers
Async Frontiers
Domenic Denicola
 
The jsdom
The jsdomThe jsdom
The jsdom
Domenic Denicola
 
The Final Frontier
The Final FrontierThe Final Frontier
The Final Frontier
Domenic Denicola
 
ES6 in Real Life
ES6 in Real LifeES6 in Real Life
ES6 in Real Life
Domenic Denicola
 
Streams for the Web
Streams for the WebStreams for the Web
Streams for the Web
Domenic Denicola
 
After Return of the Jedi
After Return of the JediAfter Return of the Jedi
After Return of the Jedi
Domenic Denicola
 
The State of JavaScript
The State of JavaScriptThe State of JavaScript
The State of JavaScript
Domenic Denicola
 
How to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards BodiesHow to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards Bodies
Domenic Denicola
 
The Extensible Web
The Extensible WebThe Extensible Web
The Extensible Web
Domenic Denicola
 
Boom! Promises/A+ Was Born
Boom! Promises/A+ Was BornBoom! Promises/A+ Was Born
Boom! Promises/A+ Was Born
Domenic Denicola
 
Domains!
Domains!Domains!
Client-Side Packages
Client-Side PackagesClient-Side Packages
Client-Side Packages
Domenic Denicola
 
Creating Truly RESTful APIs
Creating Truly RESTful APIsCreating Truly RESTful APIs
Creating Truly RESTful APIs
Domenic Denicola
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
Domenic Denicola
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
Domenic Denicola
 
Unit Testing for Great Justice
Unit Testing for Great JusticeUnit Testing for Great Justice
Unit Testing for Great Justice
Domenic Denicola
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
Domenic Denicola
 

More from Domenic Denicola (19)

The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)
 
Async Frontiers
Async FrontiersAsync Frontiers
Async Frontiers
 
The jsdom
The jsdomThe jsdom
The jsdom
 
The Final Frontier
The Final FrontierThe Final Frontier
The Final Frontier
 
ES6 in Real Life
ES6 in Real LifeES6 in Real Life
ES6 in Real Life
 
Streams for the Web
Streams for the WebStreams for the Web
Streams for the Web
 
After Return of the Jedi
After Return of the JediAfter Return of the Jedi
After Return of the Jedi
 
The State of JavaScript
The State of JavaScriptThe State of JavaScript
The State of JavaScript
 
How to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards BodiesHow to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards Bodies
 
The Extensible Web
The Extensible WebThe Extensible Web
The Extensible Web
 
Boom! Promises/A+ Was Born
Boom! Promises/A+ Was BornBoom! Promises/A+ Was Born
Boom! Promises/A+ Was Born
 
Domains!
Domains!Domains!
Domains!
 
Client-Side Packages
Client-Side PackagesClient-Side Packages
Client-Side Packages
 
Creating Truly RESTful APIs
Creating Truly RESTful APIsCreating Truly RESTful APIs
Creating Truly RESTful APIs
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
 
Unit Testing for Great Justice
Unit Testing for Great JusticeUnit Testing for Great Justice
Unit Testing for Great Justice
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
 

Recently uploaded

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 

Recently uploaded (20)

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 

Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patterns in JavaScript

  • 1. Callbacks, Promises, and Coroutines (oh my!) Asynchronous Programming Patterns in JavaScript Domenic Denicola http://domenicdenicola.com @domenicdenicola
  • 2. In non-web languages, most of the code we write is synchronous. aka blocking
  • 3. Console.WriteLine("What is your name?"); string name = Console.ReadLine(); Console.WriteLine("Hello, " + name);
  • 4. var fileNames = Directory.EnumerateFiles("C:"); foreach (var fileName in fileNames) { using (var f = File.Open(fileName, FileMode.Open)) { Console.WriteLine(fileName + " " + f.Length); } }
  • 5. using (var client = new WebClient()) { string html = client.DownloadString("http://news.ycombinator.com"); Console.WriteLine(html.Contains("Google")); Console.WriteLine(html.Contains("Microsoft")); Console.WriteLine(html.Contains("Apple")); }
  • 6. Thread.Start BackgroundWorker Control.InvokeRequired This often causes us some pain… … but hey, there’s always threads! Dispatcher.Invoke ThreadPool .AsParallel()
  • 7. Q: What are these threads doing, most of the time? A: waiting
  • 9. In JavaScript, we do things differently.
  • 10. There’s only one thread in JavaScript, so we use that thread to get stuff done.
  • 11. OK, let’s talk about… • The event loop • Callbacks • Promises • Coroutines
  • 13. You’ve seen event loops before:
  • 14. int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) { MSG msg; while (GetMessage(&msg, NULL, 0, 0) > 0) { TranslateMessage(&msg); DispatchMessage(&msg); } return msg.wParam; }
  • 15. this.btnOK.Click += this.btnOK_Click; private void btnOK_Click(object sender, EventArgs e) { // ... }
  • 16. $("#ok-button").click(function () { // ... }); setTimeout(function () { // ... }, 100); $.get("http://example.com", function (result) { // ... });
  • 17. Some event loop subtleties • Yielding • Async’s not sync • Errors • It’s not magic
  • 18. Event Loop Subtleties Yielding console.log("1"); $.get("/echo/2", function (result) { console.log(result); }); console.log("3"); // 1, 3, 2
  • 19. Event Loop Subtleties Async’s not sync var hi = null; $.get("/echo/hi", function (result) { hi = result; }); console.log(hi); // null
  • 20. Event Loop Subtleties Errors console.log("About to get the website..."); $.ajax("http://sometimesdown.example.com", { success: function (result) { console.log(result); }, error: function () { throw new Error("Error getting the website"); } }); console.log("Continuing about my business...");
  • 21. Event Loop Subtleties It’s not magic function fib(n) { return n < 2 ? 1 : fib(n-2) + fib(n-1); } console.log("1"); setTimeout(function () { console.log("2"); }, 100); fib(40); // 1 ... 15 seconds later ... 2 http://teddziuba.com/2011/10/node-js-is-cancer.html
  • 22. The event loop is tricky… but powerful.
  • 24. What we’ve seen so far has been doing asynchronicity through callbacks.
  • 25. Callbacks are OK for simple operations, but force us into continuation passing style.
  • 26. Recurring StackOverflow question: function getY() { var y; $.get("/gety", function (jsonData) { y = jsonData.y; }); return y; } Why doesn’t it work??? var x = 5; var y = getY(); console.log(x + y);
  • 27. After getting our data, we have to do everything else in a continuation:
  • 28. function getY(continueWith) { $.get("/gety", function (jsonData) { continueWith(jsonData.y); }); } var x = 5; getY(function (y) { console.log(x + y); });
  • 29. CPS Headaches • Doing things in sequence is hard • Doing things in parallel is harder • Errors get lost easily
  • 30. CPS Headaches Doing things in sequence is hard $("#button").click(function () { promptUserForTwitterHandle(function (handle) { twitter.getTweetsFor(handle, function (tweets) { ui.show(tweets); }); }); });
  • 31. CPS Headaches Doing things in parallel is harder var tweets, answers, checkins; twitter.getTweetsFor("domenicdenicola", function (result) { tweets = result; somethingFinished(); }); stackOverflow.getAnswersFor("Domenic", function (result) { answers = result; somethingFinished(); }); fourSquare.getCheckinsBy("Domenic", function (result) { checkins = result; somethingFinished(); });
  • 32. CPS Headaches Doing things in parallel is harder var finishedSoFar = 0; function somethingFinished() { if (++finishedSoFar === 3) { ui.show(tweets, answers, checkins); } }
  • 33. CPS Headaches Errors get lost easily function getTotalFileLengths(path, callback) { fs.readdir(path, function (err, fileNames) { var total = 0; var finishedSoFar = 0; function finished() { if (++finishedSoFar === fileNames.length) { callback(total); } } fileNames.forEach(function (fileName) { fs.readFile(fileName, function (err, file) { total += file.length; finished(); }); }); }); }
  • 34. You could write your own library to make this nicer…
  • 35. function parallel(actions, callback) { var results = []; function finished(result) { results.push(result); if (results.length === actions.length) { callback(results); } } actions.forEach(function (action) { action(finished); }); }
  • 36. parallel([ function (cb) { twitter.getTweetsFor("domenicdenicola", cb); }, function (cb) { stackOverflow.getAnswersFor("Domenic", cb); }, function (cb) { fourSquare.getCheckinsFor("Domenic", cb); } ], function (results) { console.log("tweets = ", results[0]); console.log("answers = ", results[1]); console.log("checkins = ", results[2]); });
  • 37. And in fact many people have: https://github.com/joyent/node/wiki/modules#wiki-async-flow
  • 38. The best of these (IMO) are based on an abstraction called “promises”
  • 40. Un-inverts the chain of responsibility: instead of calling a passed callback, return a promise.
  • 41. addWithCallback(a, b, function (result) { assert.equal(result, a + b); }); var promise = addWithPromise(a, b); promise.then(function (result) { assert.equal(result, a + b); });
  • 42. Why promises are awesome • Cleaner method signatures • Uniform return/error semantics • Easy composition • Easy sequential/parallel join • Always async • Exception-style error bubbling
  • 43. Promises are Awesome Cleaner method signatures Uniform return/error semantics $.get( url, [data], [success(data, status, xhr)], [dataType] )
  • 44. Promises are Awesome Cleaner method signatures Uniform return/error semantics $.ajax(url, settings) settings.success(data, status, xhr) settings.error(xhr, status, errorThrown) settings.complete(xhr, status)
  • 45. Promises are Awesome Cleaner method signatures Uniform return/error semantics fs.open( path, flags, [mode], [callback(error, file)] )
  • 46. Promises are Awesome Cleaner method signatures Uniform return/error semantics fs.write( file, buffer, offset, length, position, [callback(error, written, buffer)] )
  • 47. Promises are Awesome Cleaner method signatures Uniform return/error semantics getAsPromise(url, [data], [dataType]).then( function onFulfilled(result) { var data = result.data; var status = result.status; var xhr = result.xhr; }, function onBroken(error) { console.error("Couldn't get", error); } );
  • 48. Promises are Awesome Easy composition function getUser(userName, onSuccess, onError) { $.ajax("/user?" + userName, { success: onSuccess, error: onError }); }
  • 49. Promises are Awesome Easy composition function getUser(userName) { return getAsPromise("/user?" + userName); }
  • 50. Promises are Awesome Easy composition function getFirstName(userName, onSuccess, onError) { $.ajax("/user?" + userName, { success: function successProxy(data) { onSuccess(data.firstName); }, error: onError }); }
  • 51. Promises are Awesome Easy composition function getFirstName(userName) { return getAsPromise("/user?" + userName) .get("firstName"); }
  • 52. Promises are Awesome Easy sequential join $("#button").click(function () { promptUserForTwitterHandle(function (handle) { twitter.getTweetsFor(handle, function (tweets) { ui.show(tweets); }); }); });
  • 53. Promises are Awesome Easy sequential join $("#button").clickPromise() .then(promptUserForTwitterHandle) .then(twitter.getTweetsFor) .then(ui.show);
  • 54. Promises are Awesome Easy parallel join var tweets, answers, checkins; twitter.getTweetsFor("domenicdenicola", function (result) { tweets = result; somethingFinished(); }); stackOverflow.getAnswersFor("Domenic", function (result) { answers = result; somethingFinished(); }); fourSquare.getCheckinsBy("Domenic", function (result) { checkins = result; somethingFinished(); });
  • 55. Promises are Awesome Easy parallel join Q.all([ twitter.getTweetsFor("domenicdenicola"), stackOverflow.getAnswersFor("Domenic"), fourSquare.getCheckinsBy("Domenic") ]).then(function (results) { console.log(results[0], results[1], results[2]); });
  • 56. Promises are Awesome Easy parallel join Q.all([ twitter.getTweetsFor("domenicdenicola"), stackOverflow.getAnswersFor("Domenic"), fourSquare.getCheckinsBy("Domenic") ]).spread(function (tweets, answers, checkins) { console.log(tweets, answers, checkins); });
  • 57. Promises are Awesome Always async function getUser(userName, onSuccess, onError) { if (cache.has(userName)) { onSuccess(cache.get(userName)); } else { $.ajax("/user?" + userName, { success: onSuccess, error: onError }); } }
  • 58. Promises are Awesome Always async console.log("1"); getUser("ddenicola", function (user) { console.log(user.firstName); }); console.log("2"); // 1, 2, Domenic
  • 59. Promises are Awesome Always async console.log("1"); getUser("ddenicola", function (user) { console.log(user.firstName); }); console.log("2"); // 1, Domenic, 2
  • 60. Promises are Awesome Always async function getUser(userName) { if (cache.has(userName)) { return Q.ref(cache.get(userName)); } else { return getWithPromise("/user?" + userName); } }
  • 61. Promises are Awesome Always async console.log("1"); getUser("ddenicola").then(function (user) { console.log(user.firstName); }); console.log("2"); // 1, 2, Domenic (every time)
  • 62. Promises are Awesome Exception-style error bubbling getUser("Domenic", function (user) { getBestFriend(user, function (friend) { ui.showBestFriend(friend); }); });
  • 63. Promises are Awesome Exception-style error bubbling getUser("Domenic", function (err, user) { if (err) { ui.error(err); } else { getBestFriend(user, function (err, friend) { if (err) { ui.error(err); } else { ui.showBestFriend(friend); } }); } });
  • 64. Promises are Awesome Exception-style error bubbling getUser("Domenic") .then(getBestFriend, ui.error) .then(ui.showBestFriend, ui.error);
  • 65. Promises are Awesome Exception-style error bubbling getUser("Domenic") .then(getBestFriend) .then(ui.showBestFriend, ui.error);
  • 66. Promises are Awesome Exception-style error bubbling ui.startSpinner(); getUser("Domenic") .then(getBestFriend) .then( function (friend) { ui.showBestFriend(friend); ui.stopSpinner(); }, function (error) { ui.error(error); ui.stopSpinner(); } );
  • 67. Promises are Awesome Exception-style error bubbling ui.startSpinner(); getUser("Domenic") .then(getBestFriend) .then(ui.showBestFriend, ui.error) .fin(ui.stopSpinner);
  • 68. Promises are Awesome Exception-style error bubbling function getBestFriendAndDontGiveUp(user) { return getUser(user).then( getBestFriend, function (error) { if (error instanceof TemporaryNetworkError) { console.log("Retrying after error", error); return getBestFriendAndDontGiveUp(user); } throw error; }); }
  • 69. Sounds great. How do I get in on this action?
  • 70. Use Q • By Kris Kowal, @kriskowal • https://github.com/kriskowal/q • Can consume promises from jQuery etc. • Implements various CommonJS standards
  • 71. If you’re already using jQuery’s promises, switch to Q: https://github.com/kriskowal/q/wiki/jQuery
  • 72.
  • 73. Creating promises with Q Fulfilling promises // We have: setTimeout(doSomething, 1000); // We want: delay(1000).then(doSomething);
  • 74. Creating promises with Q Fulfilling promises function delay(ms) { var deferred = Q.defer(); setTimeout(deferred.resolve, ms); return deferred.promise; } delay(1000).then(doSomething);
  • 75. Creating promises with Q Breaking promises function getWithTimeout(url, ms, onSuccess, onError) { var isTimedOut = false, isHttpErrored = false; setTimeout(function () { if (!isHttpErrored) { isTimedOut = true; onError(new Error("timed out")); } }, ms); $.ajax(url, { success: function (result) { if (!isTimedOut) { onSuccess(result); } }, error: function (xhr, status, error) { if (!isTimedOut) { isHttpErrored = true; onError(error); } } }); }
  • 76. Creating promises with Q Breaking promises function getWithTimeout(url, ms) { var deferred = Q.defer(); setTimeout(function () { deferred.reject(new Error("timed out")); }, ms); $.ajax(url, { success: deferred.resolve, error: deferred.reject }); return deferred.promise; }
  • 77. Creating promises with Q Building abstractions function timeout(promise, ms) { var deferred = Q.defer(); promise.then(deferred.resolve, deferred.reject); setTimeout(function () { deferred.reject(new Error("timed out")); }, ms); return deferred.promise; } function getWithTimeout(url, ms) { return timeout(getAsPromise(url), ms); }
  • 79. They clean up our method signatures. They’re composable, they’re joinable, and they’re dependably async. They unify various callback conventions into something very much like return values and exceptions.
  • 80. But… we still have to write in CPS.
  • 82. “Coroutines are computer program components that generalize subroutines to allow multiple entry points for suspending and resuming execution at certain locations.” http://en.wikipedia.org/wiki/Coroutine
  • 83. WTF!?
  • 84. Nice: var xP = getX(); var yP = getY(); var zP = getZ(); Q.all([xP, yP, zP]).spread(function (x, y, z) { console.log(x + y + z); });
  • 85. Nicer: var [x, y, z] = await Q.all([getX(), getY(), getZ()]); console.log(x + y + z);
  • 86. Nice: $("#button").clickPromise() .then(promptUserForTwitterHandle) .then(twitter.getTweetsFor) .then(ui.show);
  • 87. Nicer: await $("#button").clickPromise(); var handle = await promptUserForTwitterHandle(); var tweets = await twitter.getTweetsFor(handle); ui.show(tweets);
  • 88. Q: Can’t the compiler do this for me? A: yes… if you are willing to introduce a compiler.
  • 89. Several options, none perfect • Kaffeine: http://weepy.github.com/kaffeine/ • Traceur: http://tinyurl.com/traceur-js • TameJS: http://tamejs.org/ • Node fork: http://tinyurl.com/node-async
  • 90. Q: OK well… can’t the interpreter do this for me? A: yes… if you’re willing to wait for the next version of JS.
  • 91. The next version of JavaScript (“ECMAScript Harmony”) has a limited form of coroutines that can be twisted to do something like what we want.
  • 92. ECMAScript Harmony generators function* fibonacci() { var [prev, curr] = [0, 1]; for (;;) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (n of fibonnaci()) { console.log(n); } http://wiki.ecmascript.org/doku.php?id=harmony:generators
  • 93. ECMAScript Harmony generators var eventualAdd = Q.async(function* (pA, pB) { var a = yield pA; var b = yield pB; return a + b; }); https://github.com/kriskowal/q/tree/master/examples/async-generators
  • 94. ECMAScript Harmony generators // Can only use yield as we want to within // Q.async'ed generator functions Q.async(function* () { // Talk to the server to get one and two. var three = yield eventualAdd(getOne(), getTwo()); assert.equal(three, 3); })(); https://groups.google.com/d/topic/q-continuum/7PWKbgeFA48/discussion
  • 95. ECMAScript Harmony generators // Given promise-returning delay(ms) as before: var animateAsync = Q.async(function* (el) { for (var i = 0; i < 100; ++i) { element.style.left = i; yield delay(20); } }); http://wiki.ecmascript.org/doku.php?id=strawman:async_functions
  • 96. ECMAScript Harmony generators Q.async(function* () { var el = document.getElementById("my-element"); yield animateAsync(el); console.log("it's done animating"); })(); https://groups.google.com/d/topic/q-continuum/7PWKbgeFA48/discussion
  • 97. So coroutines are a bit of a mess, but we’ll see how things shape up.
  • 98. Recap • Async is here to stay • But you don’t have to dive into callback hell • Use promises • Use Q • Maybe use coroutines if you’re feeling brave

Editor's Notes

  1. Decouples the action from the subsequent use of the result.