Common Patterns Using Promises

Transcript

1. Common Patterns Using Promises
2. Neal Lindsay @neall hello@testdouble.com
3. what is a promise? patterns anti-patterns stunning conclusion!
4. a container you get immediately for a value you get eventually
5. promises are for asynchronous data
6. event handlers? streaming data? each “then” only happens once
7. 2010 - promises/A 2011 - jQuery “deferreds” 2012 - promises/A+ 2013 - browser promises
8. new Promise(function(resolve, reject) { if (thingsGoWell) { resolve('value'); } else { reject(Error('reason')); } });
9. Promise.resolve('value'); Promise.reject(Error('reason'));
10. p.then( function(value){…}, function(reason){…} );
11. don't call it a callback (it’s been here for years)
12. data handler error handler
13. .then() returns a new promise np = p.then(…);
14. p ≠ np (dumb math joke)
15. how does this new promise resolve?
16. 1. falls through if no handler
17. p.then(f) p.then().then(f)
18. 1. falls through if no handler 2. rejected with any error thrown 3. resolved with a value returned 4. except… if a promise returned, “becomes” that promise
19. np = p.then(function(value) { return Promise.resolve(3 + value); });
20. patterns
21. chaining vs fanning
22. get('/dog') .then(JSON.parse) .then(function(dog) {…}); chaining
23. p = get('/dog').then(JSON.parse); p.then(alert); p.then(playFetch); fanning
24. cache = {}; getUserWithCache = function(id) { return cache[id] = cache[id] || getUser(id); }; getUserWithCache(3).then(displayName); // later getUserWithCache(3).then(displayAge);
25. naming
26. value: plain old noun p.then(function(dog) {…});
27. p.then( undefined, function(error) {} ); error: error
28. p.then( undefined, function(error) {…} ); p.catch( function(error) {…} );
29. p.then( undefined, function(error) {…} ); p['catch']( function(error) {…} );
30. function that returns a promise: imperative verb phrase guessFavoriteColor() .then(function(color) {…});
31. promise: past-tense verb phrase gotScruffy = getDog('scruffy'); gotScruffy .then(function(scruffy) {…});
32. name handler functions for readability
33. getDog('scruffy') .then(function(dog) { return getPerson(dog.ownerId); }) .then(function(person) { return person.name; }) .then(alert);
34. getOwner = function(obj) { return getPerson(obj.ownerId); }; readName = function(obj) { return obj.name; }; getDog('scruffy') .then(getOwner) .then(readName) .then(alert);
35. use higher- order functions
36. multiplyBy = function(x) { return function(y) { return x * y; }; }; timesThree = multiplyBy(3); alert(timesThree(2)); // 6
37. getOwner = function(obj) { return getPerson(obj.ownerId); }; readName = function(obj) { return obj.name; }; getDog('scruffy') .then(getOwner) .then(readName) .then(alert);
38. readProperty = function(propertyName) { return function(obj) { return obj[propertyName]; }; }; getDog('scruffy') .then(readProperty('ownerId')) .then(getPerson) .then(readProperty('name')) .then(alert);
39. recover from errors
40. getDog('scruffy') .then(alert);
41. var getDefaultDog = function() { return getDog('fluffy'); } getDog('scruffy') .catch(getDefaultDog) .then(alert);
42. var getEmergencyDog = function() { return {name: 'claude'}; }; getDog('scruffy') .catch(getDefaultDog) .catch(getEmergencyDog) .then(alert);
43. anti-patterns
44. returning data not in a promise
45. var getEmergencyDog = function() { return {name: 'claude'}; }; getDog('scruffy') .catch(getDefaultDog) .catch(getEmergencyDog) .then(alert);
46. var getEmergencyDog = function() { return Promise.resolve({name: 'claude'}); }; getDog('scruffy') .catch(getDefaultDog) .catch(getEmergencyDog) .then(alert);
47. unnecessary function wrapping
48. get('/dogs') .then(function(response) { return JSON.parse(response); }) .then(doSomething);
49. get('/dogs') .then(JSON.parse) .then(doSomething);
50. except…
51. getDog('scruffy') .then(window.alert); // works getDog('scruffy') .then(console.log); // TypeError!
52. getDog('scruffy') .then(function(dog) { console.log(dog) }); // works, but meh :-/
53. getDog('scruffy') .then(console.log.bind(console));
54. synchronous code after promise code
55. getDog('scruffy').then(alert); alert('Good dog!');
56. getDog('scruffy') .then(alert) .then(function() { alert('Good dog!'); });
57. inappropriately chaining queries
58. getDog('scruffy') .then(goWalkies);
59. can you walk my dog too?
60. getDog('scruffy') .then(goWalkies); getDog('fluffy') .then(goWalkies);
61. getDog('scruffy') .then(function (scruffy) { return new Promise(function(resolve) { getDog('fluffy') .then(function(fluffy) { resolve([scruffy, fluffy]); }); }); }) .then(goWalkies);
62. Promise .all([ getDog('scruffy'), getDog('fluffy'), getEmergencyDog() ]) .then(goWalkies);
63. Promise .all([ getDog('scruffy').then(getOwnerForDog), getDog('fluffy').then(getOwnerForDog), getEmergencyDog().then(getOwnerForDog) ]) .then(renegotiateWalkingRates);
64. conclusion
65. chain vs fan
66. naming
67. move inline functions into named variables
68. replace named functions with generated functions
69. return promises even for some static data for consistency
70. don't wrap functions for no reason
71. but do use function.bind() when needed
72. keep synchronous code above promise code
73. don't chain expensive queries when you can avoid it
74. thank you
75. questions?