Promises, Promises

Presentation from Meet.js Warsaw + Adobe https://www.facebook.com/events/272800652850131/
(or http://www.adobe.com/pl/event/create-now-world-tour.html)

Basic concepts about Promises (mostly with Q.js)

Transcript

1. Promises, Promises @krzychukula krzychukula.blogspot.com
3. Beware • Code examples inspired by: Q.js • Mixing polish and english • May be complately wrong • 20min is not enough!
5. The Pyramid of Doom
6. How async code looks like?
7. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { }, errorHandler); }
8. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { }, errorHandler); }, errorHandler); }
9. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }
10. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }
11. JS without Promises
12. Nicer abstraction on File API readFoo(success, error)
13. Write test to check read/write writeFoo(function(){ readFoo(function(text){ expect(text).toBe('foo'); }, error) }, error)
14. writeFoo(function(){ readFoo(function(text){ expect(text).toBe('foo'); }, error) }, error)
15. Start again with promises writeFoo() //==> returns promise writeFoo().done(success, error)
16. Not enough writeFoo().done(function(){ readFoo().done(function(text){ expect(text).toBe('foo'); }, error) }, error)
18. Promises
19. Let's learn it! var promise = writeFoo()
20. Promise what it is?
21. Object Promise
22. With State Promise state
23. Subscribe to state changes Promise then done fail
24. State Promise pending resolved rejected state
25. Subscribe to state done(success, error) resolved rejected
26. Just like done* then(success, error) resolved rejected
27. Only fail handler fail(error) resolved rejected
28. See it in practice var promise = writeFoo(); promise.done(success, error)
29. Many listeners
30. You can attach listeners to it var promise = writeFoo() promise.done(success, error)
31. Many listeners for one promise! var promise = writeFoo() promise.done(log, logError) promise.done(updateStats, error) promise.done(displayInfo, displayError)
32. Callback writeFoo(funciton(data){ log(data); updateStats(data); displayInfo(data); }, error)
33. Many listeners for one promise! function writeFooAndLog(){ var promise = writeFoo() promise.done(log, error) return promise; } var promise = writeFooAndLog(); promise.done(successDialog, errorDialog)
34. Promise lifetime
35. Attach listeners even when it's done! var promise = readFoo() promise.done(log, error) ==> resolves with cache...
36. You know, order matters! var img = new Image(); img.src = "sprite.png"; img.onload = function(){ //never called }
37. Promise is persistent
38. What if... var img = new Image(); var promise = img.load("sprite.png"); promise.done(function(){ })
39. Attach listeners even when it's done! var promise = readFoo() promise.done(log, error) ==> resolves with cache... promise.done(updateStats, error) promise.done(displayInfo, error)
40. The same is true for fails var promise = writeFoo() promise.done(log) promise.fail(revertTransaction) promise.fail(logError)
41. Before we go deeper Promise can change state only once.
42. Chains
43. jQuery API example $('widget')
44. $('widget') .addClass('important')
45. $('widget') .addClass('important') .show()
46. $('widget') .addClass('important') .show() .find('h1')
47. Chaining $('widget') .addClass('important') .show() .find('h1') .text('Special Offers')
48. Then
49. Similar to done .done(asyncSuccess, error) .then(asyncSuccess, error)
50. Difference .done(asyncSuccess, error) //==> undefined .then(asyncSuccess, error) //==> promise
51. Create chains for async promise .then(asyncSuccess, error) .then(syncSuccess2, error2)
52. Then always returns new promise promise .then(success, error) .then(success2, error2) //==> promise
53. Then and errors! promise .then(success , error) .then(success2 , error2) .then(success3 , error3) .then(success4, error4); * not in jQuery
54. Then and errors! promise .then(succes) .then(success2) .then(success3) .then(success4, fail);
55. So 'then' is a better 'done' then > done * at least I thinked so...
56. Let's fix this test example
57. The one with pyramid writeFoo().done(function(){ readFoo().done(function(text){ expect(text).toBe('foo'); }, error) }, error)
58. But start from scratch. writeFoo()
59. writeFoo() .then(readFoo)
60. writeFoo() .then(readFoo) .then(function(text){ //==> content of foo file }, error);
61. Final Test Example* writeFoo() .then(readFoo) .then(function(text){ expect(text).toBe('foo'); }, fail);
62. Troubles
63. When I was starting I've put promises everywhere! I've used then - because it's better
64. I got some Broken scripts No errors in console WAT! Time for debugger...
65. Reason: Stupid typo then(showLenght) then(showLength)
67. but wait... when in trouble Promises considered harmful!
69. Q.js Readme return foo() .then( function (value) { throw new Error("Can't bar."); }, function (error) { // We only get here if "foo" fails } );
70. Error handler AFTER callback return foo() .then(function (value) { throw new Error("Can't bar."); }) .fail(function (error) { // We get here with any callback error });
71. Why? .then() //=> promise 1: Then always returns promise
72. Why? .then() //=> promise 1: Then always returns promise 2: Promise catches all errors
73. Why? .then() //=> promise 1: Then always returns promise 2: Promise catches all errors 3: And passes them to the last promise
74. fail fast writeFoo() .then(readFoo) .then(function(text){ expect(text).toBe('foo'); }, fail) .done(); //==>undefined
75. So we can fix test example writeFoo() .then(readFoo) .then(function(text){ expect(text).toBe('foo'); }, fail); //==> promise
76. Done! :) writeFoo() .then(readFoo) .done(function(text){ expect(text).toBe('foo'); }, fail); //==>undefined
77. Deferred
78. Deferred How can I change state of promise?
79. Deferred Promise
80. Deferred Promise READONLY Master of promise
81. Deferred Promise READONLY resolve reject
82. Show me the code function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
83. Create Deferred function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
84. Return promise from deferred function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
85. success == resolve function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
86. error == reject function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
87. Wrap it in function function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
88. getFoo() .then(joinLines) .then(displayContent, showError) .done();
89. All
90. 3 simultaneous calls 3 ajax calls at once
91. Without pyramid
92. without call counting var ajaxCalls = 3; success: function(){ if(--ajaxCalls == 0) letUserKnow
93. var promise1 = $.ajax(one); var promise2 = $.ajax(two); var promise3 = $.ajax(three); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
94. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3 = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow)
95. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3 = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
96. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3 = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
97. Summary
98. InitFs() .then(getFile('foo.txt', {})) .then(openFile) .then(readAsText) .done(displayInTextarea, errorHandler)
99. Many listeners for one promise! var promise = writeFoo() promise.done(log) promise.done(updateStats) promise.fail(logError) promise.fail(displayError)
100. You can chain promises with 'then' promise .then(succes) .then(success2) .then(success3) .then(success4, fail);
101. When You See No Errors .done()
102. Only 2 slides till the end ;) Thanks for listening!
103. Instead of QA Async JavaScript by Trevor Burnham github.com/medikoo/deferred www.medikoo.com/asynchronous-javascript/ by Mariusz Nowak github.com/kriskowal/q
104. The end Let me know how I can be better: @krzychukula