Promises in JavaScript with jQuery

  • 5,606 views
Uploaded on

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

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

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,606
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
45
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 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