Don't call me back - How Ember uses promises and how you can, too

Introduction to promises (RSVP.js), a few ingenious ways Ember uses promises combined with the run loop to achieve great things and some promise constructs to solve problems that could arise (have arisen) when developing Ember apps.

This is the presentation I gave at EmberFest, Barcelona, on 08/29/2014.

Transcript

1. This page is intentionally left blank
2. EmberFiesta
3. EmberFiesta, ¡olé!
10. Don’t call me back How Ember uses promises and how you can, too
11. Caveat emptor
12. Caveat emptor
16. Worldly promises
17. Bill of exchange
18. Cashier’s check
20. “A fiat-money currency generally loses value once the issuing government or central bank either loses the ability to or refuses to further guarantee its value.”
27. I’m Balint Erdi, … • @baaz • balinterdi.com • Got acquainted and fell in love with Ember 1.5 year ago • Do (mostly) Ember consulting/development • Happy as a clam
28. Promises in Javascript
29. “A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.” ! (From the Promises/A+ spec)
30. Selling points • Allow writing async code that looks sync • Provide a first-class, composable construct • Simple error handling
31. Promises/A+ • A promise must provide a “then” method • promise.then(fulfillmentHandler, rejectionHandler) • Exactly in one state: pending, fulfilled, rejected • Handlers must be executed in the order they were registered • “then” must return a promise (=> chainability)
32. Vocabulary • fulfill: move from pending to fulfilled • reject: move from pending to rejected • resolve: move from pending to either fulfilled or rejected • (RSVP.js) settle: what is meant by “resolve” in Promises/A+ • (RSVP.js) resolve: what is meant by “fulfill” in Promises/ A+
33. “then” must return a promise • promise2 should be resolved with x • enables cascading
34. “Trickle down” • if promise1 is fulfilled/rejected and onFulfilled/ onRejected is not a function, promise2 should be fulfilled/rejected with the same value
35. Exception handling • if onFulfilled or onRejected throws an exception “e”, promise2 must be rejected with “e” as the reason • made possible by trickling down + rejection when exception is thrown
36. Error handling at the end of the chain
37. Creating a promise
38. Creating a promise
40. Promises in Ember
41. Model hooks
42. “In cases where data is available asynchronously, you can just return a promise from the model hook, and Ember will wait until that promise is resolved before rendering the template.”
43. How? • Ember.run.queues => ["sync", "actions", "routerTransitions", "render", "afterRender", “destroy"] • RSVP promises get resolved in the “actions” queue • Router transitions happen in “routerTransitions” • Template rendering happens in “render” • ember-routing/lib/ext/run_loop.js
44. Loading substate
45. To provide visual feedback that data is being fetched for the page (to counter the “white screen of death”)
46. How? • Ember.run.queues => ["sync", "actions", "routerTransitions", "render", "afterRender", “destroy"] • beforeModel calls a willResolveModel hook that schedules triggering a “loading” event in the “routerTransitions” queue • the loading event is fired unless the router has already finalized the transition • the loading event transitions to the appropriate loading route and will render the template that belongs to it
47. ember-testing helpers
49. How? • All async helpers (visit, click, fillIn, etc.) return a promise (a call to `wait`) which is resolved when all async operations are complete • Added bonus: test code is “fake synchronous” (read Cory Forsyth’s blog post: http:// coryforsyth.com/2014/07/10/demystifing-ember- async-testing/)
50. ember-data backend operations
51. How? • store.find, save & destroy return promises • backend operation completes • all the RSVP arsenal is at our disposal to deal with success/failure scenarios
52. Promise constructs you can write
53. Ember.RSVP.hash
54. Ember.RSVP.allSettled
55. Dashboard views
57. Retry
59. Retry with exponential back-off
61. Public Service Announcements
62. Promise playground on Github https://github.com/balinterdi/rsvp-promises-sandbox
63. Piqued your interest? • Promise Anti-patterns • Promises/A+ spec • Async Javascript • General Theory of Reactivity
64. I’m writing a book Rock and Roll with Ember.js http://www.rockandrollwithemberjs.com/
67. Image credits • Rich Hickey • Unicorn, Facepalm, Femme avec baguette, • Bill of Exchange • Cashier’s check • HSBC check • Fiat money • Winnie the Pooh - friendship • Wedding • Fire insurance • Promise-related some e-cards
68. References • Loading Routes in Ember.js • Dashboard type views • Demystifying Ember Async Testing • Javascript Promises with RSVP.js • The Revealing Constructor Pattern