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
   

   View Slide

2. EmberFiesta
   

   View Slide

3. EmberFiesta, ¡olé!
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Don’t call me back
    How Ember uses promises and how you can, too
    

    View Slide

11. Caveat emptor
    

    View Slide

12. Caveat emptor
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. Worldly promises
    

    View Slide

17. Bill of exchange
    

    View Slide

18. Cashier’s check
    

    View Slide

19. View Slide

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.”
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

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
    

    View Slide

28. Promises in Javascript
    

    View Slide

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)
    

    View Slide

30. Selling points
    • Allow writing async code that looks sync
    • Provide a first-class, composable construct
    • Simple error handling
    

    View Slide

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)
    

    View Slide

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+
    

    View Slide

33. “then” must return a promise
    • promise2 should be resolved with x
    • enables cascading
    

    View Slide

34. “Trickle down”
    • if promise1 is fulfilled/rejected and onFulfilled/
    onRejected is not a function, promise2 should be
    fulfilled/rejected with the same value
    

    View Slide

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
    

    View Slide

36. Error handling at the end of
    the chain
    

    View Slide

37. Creating a promise
    

    View Slide

38. Creating a promise
    

    View Slide

39. View Slide

40. Promises in Ember
    

    View Slide

41. Model hooks
    

    View Slide

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.”
    

    View Slide

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
    

    View Slide

44. Loading substate
    

    View Slide

45. To provide visual feedback that
    data is being fetched for the page
    (to counter the “white screen of
    death”)
    

    View Slide

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
    

    View Slide

47. ember-testing helpers
    

    View Slide

48. View Slide

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/)
    

    View Slide

50. ember-data backend
    operations
    

    View Slide

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
    

    View Slide

52. Promise constructs
    you can write
    

    View Slide

53. Ember.RSVP.hash
    

    View Slide

54. Ember.RSVP.allSettled
    

    View Slide

55. Dashboard views
    

    View Slide

56. View Slide

57. Retry
    

    View Slide

58. View Slide

59. Retry with exponential
    back-off
    

    View Slide

60. View Slide

61. Public Service
    Announcements
    

    View Slide

62. Promise playground on
    Github
    https://github.com/balinterdi/rsvp-promises-sandbox
    

    View Slide

63. Piqued your interest?
    • Promise Anti-patterns
    • Promises/A+ spec
    • Async Javascript
    • General Theory of Reactivity
    

    View Slide

64. I’m writing a book
    Rock and Roll with Ember.js
    http://www.rockandrollwithemberjs.com/
    

    View Slide

65. View Slide

66. View Slide

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
    

    View Slide

68. References
    • Loading Routes in Ember.js
    • Dashboard type views
    • Demystifying Ember Async Testing
    • Javascript Promises with RSVP.js
    • The Revealing Constructor Pattern
    

    View Slide