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

891a8ee280b3722a080a7f7e47b53417?s=47 Balint Erdi
August 29, 2014

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.

891a8ee280b3722a080a7f7e47b53417?s=128

Balint Erdi

August 29, 2014
Tweet

Transcript

  1. This page is intentionally left blank

  2. EmberFiesta

  3. EmberFiesta, ¡olé!

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Don’t call me back How Ember uses promises and how

    you can, too
  11. Caveat emptor

  12. Caveat emptor

  13. None
  14. None
  15. None
  16. Worldly promises

  17. Bill of exchange

  18. Cashier’s check

  19. None
  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.”
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  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

  39. None
  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

  48. None
  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

  56. None
  57. Retry

  58. None
  59. Retry with exponential back-off

  60. None
  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/

  65. None
  66. None
  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