Promises, Promises

Premasagar Rose, @premasagar, Dharmafly
Aaron Acerboni, @aaronacerboni, School of Life

Async – 9th February, 2012
Slides – promisespromises.dharmafly.com
Repo for demos and slides – github.com/premasagar/promisespromises
☄ – premasagar.com ╱ halfmelt.com

Use the arrow keys or space on your keyboard to navigate →

Asynchronicity

Make a request...

... wait... (get on with something else)...

... get a response.

Do something with the response.

Ajax, a quick recap

var url = "http://asyncjs.com",
    xhr = new XMLHttpRequest();

xhr.open("GET", url, true);
xhr.onreadystatechange = function(event){
  if (xhr.readyState === 4) { // request complete
    if (xhr.status === 200) { // done
      foo(xhr.responseText);
    }
    else { // fail
      bar(xhr.statusText);
    }
  }
};
xhr.send(null);

Ajax, in jQuery

jQuery.ajax(url, {
  success: function(data){}, // done
  error: function(){}        // fail
});

jQuery has numerous Ajax helper functions, .get(), .getJSON(), .post(), etc.

So far, so good

Multiple requests, tangled mess

If many requests are required, e.g. to render an interface, you get chaos.

Too tightly coupled

var counter = 0, numRequests = 10;

jQuery.ajax(url1, {
  success: function(data){
    counter += 1;
    if (counter === numRequests){
      doSomething1(data);
    }
  },
  error: onError
});

jQuery.ajax(url2, {

  // etc ...

Multiple requests

• Counters outside of callbacks
• Brittle code
• Increasing complexity
• Separate modules can't subscribe to callbacks
• Can't add callbacks after request is made

The promise of Promises

Promises

then method

then(fulfilledHandler, errorHandler, progressHandler);

• All arguments optional
• fulfilledHandler - called when the promise is fulfilled
• errorHandler - called if the promise fails
• progressHandler - may be called as promise progresses
• The then function returns a new promise, to allow chaining.

jQuery's Ajax methods now return promises

var promise = jQuery.get(url);

promise
  .then(doneCallback1, errorCallback1)
  .then(doneCallback2, errorCallback2)
  .then(doneCallback3, errorCallback3);

You can use them with jQuery's animation too (see later, in the demos).

Make a Promise

jQuery.Deferred() creates deferreds - a superset of promises that control the promise state.

// Create deferred
var deferred = jQuery.Deferred(),
    promise = deferred.promise();

// App modules subscribe to the promise
promise
  .then(fn)
  .then(fn);

// ...later, the deferred completes
if (foo){
  deferred.resolve();
}
else {
  deferred.reject();
}

Report progress

You can also notify a promise of progress.

var deferred = jQuery.Deferred(),
    promise = deferred.promise();

promise.progress(function(colour){
  console.log(colour);
});

deferred
  .notify("red")
  .notify("green")
  .notify("blue");

deferred.resolve();

jQuery.when pools multiple promises

Pool multiple promises together, return a single, master promise.

var deferred1 = jQuery.Deferred(),
    deferred2 = jQuery.Deferred(),
    deferred3 = jQuery.Deferred();

// Pass deferreds or promises to jQuery.when
var masterPromise = jQuery.when(deferred1, deferred2, deferred3);

masterPromise
  .then(foo)
  .then(bar);
  // etc

jQuery.when

Demos ☃

• Loading an image view / code
• Loading multiple images view / code
• Reacting to a timer view / code
• Reacting to a timer & image load view / code
• Using these objects for a slideshow view / code
• Making an AJAX Request view / code
• Combining Ajax with our Image promise view / code
• Ajax pagination view / code
• Filtering data with pipe() view / code

Reading material

• Digging into Deferred
  by Addy Osmani (short video)
• Creating Response Applications using jQuery Promises
  by Julian Aubourg & Addy Osmani
• Always use your jQuery promises
  by Ryan M Wright
• jQuery promises
  by Taraxe
• Promises A
  The commonjs proposal for promises

Thank you.

Premasagar Rose, @premasagar, Dharmafly
Aaron Acerboni, @aaronacerboni, School of Life

Async – 9th February, 2012
Slides – promisespromises.dharmafly.com
Repo for demos and slides – github.com/premasagar/promisespromises
☄ – premasagar.com ╱ halfmelt.com