Do you Promise?


Published on

This slide has been presented in the font-end developer community seminar provided by naver.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Do you Promise?

  1. 1. DO YOU PROMISE? Jungkee Song / @jungkees Documented using reveal.js
  2. 2. JUNGKEE SONG Twitter: @jungkees Google+: +JungkeeSong W3C HTML5 KOREAN INTEREST GROUP Join
  4. 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. 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. 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. 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. 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; }
  9. 9. HELLO PROMISES Rejection handling poiete(neie,fnto(ro){ rms.hnudfnd ucinerr cnoeerrerr; }; ) Catch - An idiomatic shorthand poiecthfnto(ro){ cnoeerrerr; }; )
  11. 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. 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. 13. NOW LET'S ADDRESS A REAL ISSUE Deep nested callbacks { boe(. n) d.olcin.. f( { bcleto(.. n) d.ur(...f( { bqey... n) xrsn(; h.ed) xrola =f( { h.nod n) } ; }; ) }; ) }; )
  14. 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";! 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. 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";! hr a oehn rn n h hi.) }; )
  16. 16. PRACTISES AND REFERENCES Html5Rocks (Korean) - Jake Archibald MDN - Mozilla ES6 Promise - TC39 Promises, Promises - Domenic Denicola
  17. 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. 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)