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

Slide 1

Slide 1 text

This page is intentionally left blank

Slide 2

Slide 2 text

EmberFiesta

Slide 3

Slide 3 text

EmberFiesta, ¡olé!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Caveat emptor

Slide 12

Slide 12 text

Caveat emptor

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Worldly promises

Slide 17

Slide 17 text

Bill of exchange

Slide 18

Slide 18 text

Cashier’s check

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Promises in Javascript

Slide 29

Slide 29 text

“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 fulﬁlled.” ! (From the Promises/A+ spec)

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Promises/A+ • A promise must provide a “then” method • promise.then(fulﬁllmentHandler, rejectionHandler) • Exactly in one state: pending, fulﬁlled, rejected • Handlers must be executed in the order they were registered • “then” must return a promise (=> chainability)

Slide 32

Slide 32 text

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+

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Exception handling • if onFulﬁlled 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

Slide 36

Slide 36 text

Error handling at the end of the chain

Slide 37

Slide 37 text

Creating a promise

Slide 38

Slide 38 text

Creating a promise

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Promises in Ember

Slide 41

Slide 41 text

Model hooks

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Loading substate

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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 ﬁred unless the router has already ﬁnalized the transition • the loading event transitions to the appropriate loading route and will render the template that belongs to it

Slide 47

Slide 47 text

ember-testing helpers

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

How? • All async helpers (visit, click, ﬁllIn, 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/demystiﬁng-ember- async-testing/)

Slide 50

Slide 50 text

ember-data backend operations

Slide 51

Slide 51 text

How? • store.ﬁnd, save & destroy return promises • backend operation completes • all the RSVP arsenal is at our disposal to deal with success/failure scenarios

Slide 52

Slide 52 text

Promise constructs you can write

Slide 53

Slide 53 text

Ember.RSVP.hash

Slide 54

Slide 54 text

Ember.RSVP.allSettled

Slide 55

Slide 55 text

Dashboard views

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Retry

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Retry with exponential back-off

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Public Service Announcements

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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