Taking Promises Seriously

Promises are now truly part of the JavaScript language. This means we can write against a single full-featured promise API to build lightweight, composable libraries which dramatically reduce the complexity of our code at every level of abstraction.

Video from JSConf UY: https://www.youtube.com/watch?v=CVG6mCQrKoI

Transcript

1. Taking Promises Seriously James MacAulay
2. FYI
3. https://github.com/jamesmacaulay/kozu
4. 3 Kinds of Functions in this Talk • native (e.g. Promise.resolve) • defined in the talk (e.g. wait) • defined in some library (kozu.when)
5. HISTORY
11. BASICS
12. The Old Ways
13. getAsync("/foo", function(data) { $(".foo").text(data.name); });
14. getAsync
15. ( ) "/foo" handler getAsync
16. ( ) "/foo" handler getAsync undef.
17. handler
18. ( ) handler {}
19. ( ) handler undef. {}
20. getAsync("/foo", function(data) { $(".foo").text(data.name); });
21. Promises
22. var promise = get("/foo"); promise.then(function(data) { $(".foo").text(data.name); });
23. get
24. "/foo" get ( )
25. ✍ "/foo" get ( )
26. ✍
27. ✍ .then
28. ( ) ✍ .then handler
29. ( ) ✍ .then ✍2 handler
30. 2 reasons to use .then • produce side-effects (e.g. DOM manipulation) • return new transformed values
31. warning:
32. var deferred = jQuery.getJSON("/users.json"); // jQuery Deferreds are not compliant with the spec!
33. var promise = Promise.resolve(jQuery.getJSON("/users.json"));
34. Chaining
35. getJSON("/post/1.json").then(function(post) { return getJSON(post.commentURL); }).then(function(comments) { // proceed with access to posts and comments }).catch(function(error) { // handle errors in either of the two requests }); from https://github.com/tildeio/rsvp.js
36. Goodbye Callback Hell!
37. Hello Chaining Hell!
38. getJSON("/post/1.json").then(function(post) { return getJSON(post.commentURL); }).then(function(comments) { // proceed with access to posts and comments }).catch(function(error) { // handle errors in either of the two requests }); from https://github.com/tildeio/rsvp.js
39. WHAT IS THE POINT
40. Promises seem lame: • we still rely on handler functions • trade callback hell for chaining hell
41. this is the point:
42. return promise;
43. unlike callback hell, chaining hell is easy to escape
44. return promise.then(transformerFunction);
45. return counterPromise.then(increment);
46. return userPromise.then(function(user) { return get("/user/"+user.name+"/posts"); });
47. PEOPLE ARE DOING AMAZING THINGS
48. App = Ember.Application.create({}); ! App.IndexRoute = Ember.Route.extend({ model: function(){ return [ {firstName: 'Kris', lastName: 'Selden'}, {firstName: 'Luke', lastName: 'Melia'}, {firstName: 'Formerly Alex', lastName: 'Matchneer'} ]; } }); from the ember-latest jsfiddle: http://jsfiddle.net/NQKvy/
49. App = Ember.Application.create({}); ! App.IndexRoute = Ember.Route.extend({ model: function(){ return Promise.resolve([ {firstName: 'Kris', lastName: 'Selden'}, {firstName: 'Luke', lastName: 'Melia'}, {firstName: 'Formerly Alex', lastName: 'Matchneer'} ]); } });
50. App.IndexRoute = Ember.Route.extend({ model: function(){ return this.store.find("users"); } });
51. expect(2 + 2).to.equal(4); testing with http://chaijs.com/guide/styles/#expect
52. expect(getCount("/things")).to.eventually.equal(5); using https://github.com/domenic/mocha-as-promised & https://github.com/domenic/chai-as-promised
53. TECHNIQUES
54. Bringing things together
55. var currentUser = get("/users/current.json"); var latestPosts = get("/posts/latest.json"); // when should we update the DOM?
56. var userAndPosts = Promise.all([ get("/users/current.json"), get("/posts/latest.json") ]); // resolves to [user, posts]
57. var viewContext = kozu.allObjectValues({ currentUser: get("/users/current.json"), latestPosts: get("/posts/latest.json") }); // resolves to {currentUser: {...}, currentPosts: [...]}
58. Timing out
59. var never = new Promise(function(){});
60. Promise.race([promise1, promise2]); // resolves to whichever fulfills or rejects first
61. function wait(milliseconds, value) { return new Promise(function(resolve) { setTimeout( function() { resolve(value) }, milliseconds ); }); };
62. Promise.race([ get("/takes_forever.json"), wait(3000, Promise.reject(new Error("Took too long!"))) ]);
63. kozu.timeoutAfter(3000, get("/takes_forever.json"));
64. Being agnostic
65. var things = [ {name: 'foo'}, Promise.resolve({name: 'bar'}) ]; ! var namesPromise = when.map(things, function(t) { return t.name; }); https://github.com/cujojs/when/blob/master/docs/api.md#whenmap
67. Promise-agnostic
68. Promise-agnostic map, filter, reduce, compose
69. var agnosticMap = kozu.agnostic(_.map);
70. var agnosticCompose = kozu.agnostic(_.compose);
71. var agnosticUnderscore = kozu.mapObjectValues( _, kozu.agnostic ); http://underscorejs.org/
72. var agnosticAllonges = kozu.mapObjectValues( allonges, kozu.agnostic ); http://allong.es/
73. Faking it
74. var user = get("/current_user.json"); var posts = user.getPosts();
75. var extendPromiseAsUser = kozu.promiseExtender(User.prototype);
76. var userPromise = get("/current_user.json"); extendPromiseAsUser(userPromise);
77. return userPromise.getPosts();
78. THE WAY FORWARD
79. github.com/jamesmacaulay/kozu twitter.com/jamesmacaulay www.shopify.com