An overview of futures, deferreds and promises in JavaScript with a focus on jQuery's implementation of deferreds.

1. Promises in JavaScript
with jQuery
BrisJs Meetup - July 2011

2. Futures and Promises
• Futures is the concept behind simplifying the
management of asynchronous data or
computations with chainable callbacks.
• Futures is the concept, promises and deferreds are
the implementations of this concept.
• Becoming popular because of implementations by
jQuery (1.5) Dojo (0.9).
• Goal - simplify callback management with benefits!

3. JavaScript
implementations
• jQuery - http://api.jquery.com/category/deferred-
object
• Dojo - http://dojotoolkit.org/reference-guide/dojo/
Deferred.html
• FuturesJS - http://coolaj86.info/futures/
• Note: Futures are not JavaScript specific.
http://en.wikipedia.org/wiki/Futures_and_promisesFutures_and_promises

4. Why is this cool?
• Because you attach success or fail callbacks
instantly to the returned result!
• Instead of passing success and error
callbacks to the computation.
• You could then pass the result around to
other code to register their own success
or fail callbacks.

5. No really, WTF is this
promises stuff.
• A typical futures pattern could look like:
when(task1, task2) -> then() or fail() where task1 and task2
are deferreds (stuff that resolves/completes later).
• The point of when() is allowing multiple promises to
complete before calling the callbacks cued for then() or fail()
are called.
• You can also do task1 -> then() or fail()
• “then” is synonymous with “success”.
• Important! Deferreds and Promises are not interchangeable
terms. Why?

6. What are Deferreds
• Deferreds are implementations of futures
that use promises (internally) to determine
the state (resolved, un-resolved)of the
result in a read-only fashion!

7. Deferreds
• Deferreds give you (as the author) control of
setting the state of the underlying promise, what
callbacks are fired off and and when.
• When using deferreds, you should only ever return
the (read only) promise object of the deferred,
never the deferred itself.

8. Why is a deferreds
promise read only?
• Because otherwise, external code could set
the the state of the internal promise (e.g. to
resolved when it was actually unresolved).

9. Ok, so what are
promises then?
• Each deferred has a promise which is read only to the
outside world and only manipulated by the deferred
itself.
• Promises have state:
- unresolved,
- resolved, or
- failed.
• The promise object allows code to access the state of
the promise and to append callbacks and errbacks but
not to affect the state of the promise itself.

10. So how do I use
deferreds?
• Deferreds enable you to immediately start
chaining success and error methods to the
deferred object without waiting for the
computation or request to complete.
• If when callbacks methods are attached the
request or computation is done, the
method(s) will be executed straight away. If
not, it will get cued up and called later.

11. Deferred Resources
• http://developer.yahoo.com/yui/theater/video.php?
v=crockonjs-3
• http://addyosmani.com/blog/digging-into-deferreds-1/
• http://www.erichynds.com/jquery/using-deferreds-in-jquery/
• http://msdn.microsoft.com/en-us/scriptjunkie/gg723713.aspx

12. jQuery and Deferreds
AJAX
• jQuery introduced deferreds in 1.5 with the
rewrite of the ajax module.
• The ajax module returns the underlying promise of
a deferred allowing you to chain callbacks for
success(), error() onto the jqXHR object returned.
• jQuery adds more than just then() and fail() to it’s
deferreds.

13. jQuery and Deferreds
AJAX
• This was awesome for two reasons:
• Made for more readable code
• Allowed multiple callbacks for the one Ajax
request easy
• Note: Passing around promises may not always be
the best way for other parts of your app to be
notified about Ajax data events.

14. Deferreds in
jQuery 1.6
• deferred.always() (like complete for the
ajax module),
• deferred.pipe() which is a way of filtering or
chaining deferreds, and
• promise() which is an easy way of
dynamically generating a promise object
outside of a deferred implementation.

15. Practical example
• Handlebars.js remote template render
using jQuery ajax promise
• https://gist.github.com/1064084

16. The main problems Deferreds
helps us solve now
• Multiple ajax calls, then(...)
• Easy caching of ajax responses
• Sequential animations - jQuery 1.6

17. Thanks!
• Ryan Blunden
ryan.blunden@gmail.com
@ryan_blunden