Your SlideShare is downloading. ×
  • Like
Do you Promise?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Do you Promise?

  • 8,530 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,530
On SlideShare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
29
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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