0
Promises in JavaScript    with jQuery     BrisJs Meetup - July 2011
Futures and Promises•   Futures is the concept behind simplifying the    management of asynchronous data or    computation...
JavaScript         implementations•   jQuery - http://api.jquery.com/category/deferred-    object•   Dojo - http://dojotoo...
Why is this cool?• Because you attach success or fail callbacks  instantly to the returned result!• Instead of passing suc...
No really, WTF is this      promises stuff.•   A typical futures pattern could look like:    when(task1, task2) -> then() ...
What are Deferreds• Deferreds are implementations of futures  that use promises (internally) to determine  the state (reso...
Deferreds•   Deferreds give you (as the author) control of    setting the state of the underlying promise, what    callbac...
Why is a deferreds   promise read only?• Because otherwise, external code could set  the the state of the internal promise...
Ok, so what are        promises then?•   Each deferred has a promise which is read only to the    outside world and only m...
So how do I use         deferreds?• Deferreds enable you to immediately start  chaining success and error methods to the  ...
Deferred Resources•   http://developer.yahoo.com/yui/theater/video.php?    v=crockonjs-3•   http://addyosmani.com/blog/dig...
jQuery and Deferreds       AJAX•   jQuery introduced deferreds in 1.5 with the    rewrite of the ajax module.•   The ajax ...
jQuery and Deferreds       AJAX•   This was awesome for two reasons:    •   Made for more readable code    •   Allowed mul...
Deferreds in          jQuery 1.6• deferred.always() (like complete for the  ajax module),• deferred.pipe() which is a way ...
Practical example• Handlebars.js remote template render  using jQuery ajax promise• https://gist.github.com/1064084
The main problems Deferreds     helps us solve now• Multiple ajax calls, then(...)• Easy caching of ajax responses• Sequen...
Thanks!• Ryan Blunden  ryan.blunden@gmail.com  @ryan_blunden
Upcoming SlideShare
Loading in...5
×

Promises in JavaScript with jQuery

5,756

Published on

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

Published in: Education, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,756
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Promises in JavaScript with jQuery"

    1. 1. Promises in JavaScript with jQuery BrisJs Meetup - July 2011
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Practical example• Handlebars.js remote template render using jQuery ajax promise• https://gist.github.com/1064084
    16. 16. The main problems Deferreds helps us solve now• Multiple ajax calls, then(...)• Easy caching of ajax responses• Sequential animations - jQuery 1.6
    17. 17. Thanks!• Ryan Blunden ryan.blunden@gmail.com @ryan_blunden
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×