1) Promises provide a way to write asynchronous code in a more readable sequential style by avoiding deeply nested callbacks. 2) Promises represent the eventual completion (or failure) of an asynchronous operation, and allow consumers to attach callbacks instead of passing callbacks into asynchronous functions. 3) Promises are being adopted in many web standards and browser APIs to provide a consistent approach to asynchronous programming across the web platform.

1. DO YOU PROMISE?
Jungkee Song / @jungkees
Documented using reveal.js

2. JUNGKEE SONG
Twitter: @jungkees
Google+: +JungkeeSong
W3C HTML5 KOREAN INTEREST GROUP
Join

3. IN THE SPOTLIGHT

4. CONTENT
JavaScript Runtime Model
Events and Callbacks
Hello Promises
Promises guarantee
Is it ready for you?
Promises the real thing
Practises and References
Web standards Promise
#extendthewebforward

5. JAVASCRIPT RUNTIME MODEL
Run-to-completion and Event loop
A downside
“If a message takes too long to complete, the
web application is unable to process user
interactions like click or scroll.”
So, never block it
“A good practice to follow is to make message
processing short and if possible cut down one
message into several messages.”

6. EVENTS
User gesture
Click, Scroll, Touch...
Resource loading
DOMContentLoaded, load...
Handler must be set before an event is dispatched
CALLBACKS
IndexedDB , Geolocation , XMLHttpRequest , basically all the
platform APIs.
Callbacks in the APIs are not consistent
Hard to follow the flow when a callback ties with other
callbacks

7. HELLO PROMISES
From W3C TAG Promise Guide
“A promise is an object that represents the
eventual result of a single asynchronous
operation. They can be returned from
asynchronous functions, thus allowing
consumers to not only queue up callbacks to be
called when the operation succeeds or fails, but
also to manipulate the returned promise object,
opening up a variety of possibilities.”

8. HELLO PROMISES
Construct a Promise
vrpoie=nwPoiersle)
a rms
e rms(eovr;
fnto rsle(eov,rjc){
ucin eovrrsle eet
/ D yu ts n hr
/ o or ak o ee
i (/ tig aedn O * ){
f
* hns r oe K /
rslersl)
eov(eut;
}es {
le
rjc(ro)
eeterr;
}
}
Use the Promise
poiete(nufle,oRjce)
rms.hnoFlild neetd;
fnto oFlildrsl){
ucin nufle(eut
cnoelg"ucee:"+rsl)
osl.o(scedd
eut;
}
fnto oRjce(ro){
ucin neetderr
cnoeerrerr;
osl.ro(ro)
}

9. HELLO PROMISES
Rejection handling
poiete(neie,fnto(ro){
rms.hnudfnd ucinerr
cnoeerrerr;
osl.ro(ro)
};
)
Catch - An idiomatic shorthand
poiecthfnto(ro){
rms.ac(ucinerr
cnoeerrerr;
osl.ro(ro)
};
)

10. PROMISES API REFERENCE

11. PROMISES GUARANTEE
Only one of onFulfilled or onRejected will be called
onFulfilled is called with a single fulfillment value
onRejected is called with a single rejection reason
If the promise is already settled, the hanlder will still be called
once you attach them
The handler will always be called asynchronously

12. IS IT READY FOR YOU?
Firefox 29
“Promise them that thanks to @nikhilcutshort
promises will be shipping in Firefox 29. :-)” Anne van Kesteren
Chrome 32 (Partial) / 33 (Full)
Opera 20
IE?
Yup! You can rock it with a polyfill

13. NOW LET'S ADDRESS A REAL ISSUE
Deep nested callbacks
d.pn..f( {
boe(. n)
d.olcin.. f( {
bcleto(.. n)
d.ur(...f( {
bqey... n)
xrsn(;
h.ed)
xrola =f( {
h.nod
n)
}
;
};
)
};
)
};
)

14. PROMISES THE REAL THING
Chaining - Transforming values
Poiersle1.hnfnto(au){
rms.eov()te(ucinvle
cnoelgvle;/ 1
osl.o(au) /
rtr vle+10
eun au
0;
}.hnfnto(au){
)te(ucinvle
cnoelg"eh ti i js "+vle;/ Ya,ti i js 11
osl.o(Ya, hs s ut
au) / eh hs s ut 0
};
)
Chaining - Queuing async actions
PoierslesmRsl)te(ucinrsl){
rms.eov(oeeut.hnfnto(eut
rtr armsDigetakrsl)
eun PoieonNxTs(eut;
}.hnfnto(eut {
)te(ucinrsl)
rtr aeAohrrmsDigoeakrsl)
eun YtntePoieonMrTs(eut;
}.hnfnto(eut {
)te(ucinrsl)
cnoelg"lih!Tak.Igt" rsl)
osl.o(Argt hns
o , eut;
}.ac(ucinerr {
)cthfnto(ro)
cnoeerr"an Teewssmtigwogi tecan";
osl.ro(Dr! hr a oehn rn n h hi.)
};
)
Error handling in the chain: Promise rejections skip forward to
the next "then" with a rejection callback!

15. PROMISES THE REAL THING
Write your chain of actions idiomatically!
PoierslesmRsl)te(ucinrsl){
rms.eov(oeeut.hnfnto(eut
rtr armsDigetakrsl)
eun PoieonNxTs(eut;
}.ac(ucinerr {
)cthfnto(ro)
rtr rtyhFieTigneoe)
eun erTealdhnOcMr(;
}.hnfnto(eut {
)te(ucinrsl)
rtr aeAohrrmsDigoeakrsl)
eun YtntePoieonMrTs(eut;
} fnto(ro){
, ucinerr
rtr Poierjc(ro)
eun rms.eeterr;
}.hnfnto(eut {
)te(ucinrsl)
cnoelg"lih!Tak.Igt" rsl)
osl.o(Argt hns
o , eut;
}.ac(ucinerr {
)cthfnto(ro)
cnoeerr"an Teewssmtigwogi tecan";
osl.ro(Dr! hr a oehn rn n h hi.)
};
)

16. PRACTISES AND REFERENCES
Html5Rocks (Korean) - Jake Archibald
MDN - Mozilla
ES6 Promise - TC39
Promises, Promises - Domenic Denicola

17. WEB STANDARDS WITH PROMISES
Spec athors are guided to use it
The movement is getting faster!
Examples
Quota Management API
Before
After
Network Service Discovery API
Before
After
Service Workers
Heavy use of Promises

18. #EXTENDTHEWEBFORWARD
“Promises are one of the best examples of the extensible web
principles, where collaborative developer work informs web
standards.” - Domenic Denicola (Co-editor of Promises/A+,
Member of W3C TAG)