DO YOU PROMISE? / Jungkee Song @jungkees

Documented using reveal.js

JUNGKEE SONGTwitter: @jungkees

Google+: +JungkeeSong

W3C HTML5 KOREAN INTEREST GROUPJoin

IN THE SPOTLIGHT

CONTENTJavaScript Runtime ModelEvents and CallbacksHello PromisesPromises guaranteeIs it ready for you?Promises the real thingPractises and ReferencesWeb standards Promise#extendthewebforward

JAVASCRIPT RUNTIME MODELA downside

So, never block it

Run-to-completion and Event loop

“If a message takes too long to complete, theweb application is unable to process userinteractions like click or scroll.”

“A good practice to follow is to make messageprocessing short and if possible cut down onemessage into several messages.”

EVENTSUser gesture

Click, Scroll, Touch...Resource loading

, ...Handler must be set before an event is dispatched

DOMContentLoaded load

CALLBACKS , , , basically all the

platform APIs.Callbacks in the APIs are not consistentHard to follow the flow when a callback ties with othercallbacks

IndexedDB Geolocation XMLHttpRequest

HELLO PROMISESFrom W3C TAG Promise Guide

“A promise is an object that represents theeventual result of a single asynchronous

operation. They can be returned fromasynchronous functions, thus allowing

consumers to not only queue up callbacks to becalled when the operation succeeds or fails, butalso to manipulate the returned promise object,

opening up a variety of possibilities.”

HELLO PROMISESConstruct a Promise

var promise = new Promise(resolver);

function resolver(resolve, reject) { // Do your task no here if ( /* things are done OK */ ) { resolve(result); } else { reject(error); }}

Use the Promise

promise.then(onFulfilled, onRejected);

function onFulfilled(result) { console.log("succeeded: " + result);}

function onRejected(error) { console.error(error);}

HELLO PROMISESRejection handling

promise.then(undefined, function(error) { console.error(error);});

Catch - An idiomatic shorthand

promise.catch(function(error) { console.error(error);});

PROMISES API REFERENCE

PROMISES GUARANTEEOnly one of onFulfilled or onRejected will be calledonFulfilled is called with a single fulfillment valueonRejected is called with a single rejection reasonIf the promise is already settled, the hanlder will still be calledonce you attach themThe handler will always be called asynchronously

IS IT READY FOR YOU?Firefox 29

Chrome 32 (Partial) / 33 (Full)Opera 20IE?

Yup! You can rock it with a

“Promise them that thanks to promises will be shipping in Firefox 29. :-)” -Anne van Kesteren

@nikhilcutshort

polyfill

NOW LET'S ADDRESS A REAL ISSUEDeep nested callbacks

db.open(... fn() { db.collection(.... fn() { db.query(...... fn() { xhr.send(); xhr.onload = fn() { }; }); });});

PROMISES THE REAL THINGChaining - Transforming values

Promise.resolve(1).then(function(value) { console.log(value); // 1 return value + 100;}).then(function(value) { console.log("Yeah, this is just " + value); // Yeah, this is just 101});

Chaining - Queuing async actions

Promise.resolve(someResult).then(function(result) { return aPromiseDoingNextTask(result);}).then(function(result) { return aYetAnotherPromiseDoingMoreTask(result);}).then(function(result) { console.log("Alright! Thanks. I got ", result);}).catch(function(error) { console.error("Darn! There was something wrong in the chain.");});

Error handling in the chain: Promise rejections skip forward tothe next "then" with a rejection callback!

PROMISES THE REAL THINGWrite your chain of actions idiomatically!

Promise.resolve(someResult).then(function(result) { return aPromiseDoingNextTask(result);}).catch(function(error) { return retryTheFailedThingOnceMore();}).then(function(result) { return aYetAnotherPromiseDoingMoreTask(result);}, function(error) { return Promise.reject(error);}).then(function(result) { console.log("Alright! Thanks. I got ", result);}).catch(function(error) { console.error("Darn! There was something wrong in the chain.");});

PRACTISES AND REFERENCES - Jake ArchibaldHtml5Rocks (Korean)

MDN - Mozilla

ES6 Promise - TC39

Promises, Promises - Domenic Denicola

WEB STANDARDS WITH PROMISESSpec athors are guided to use itThe movement is getting faster!Examples

Quota Management API

Network Service Discovery API

Service Workers

BeforeAfter

BeforeAfter

Heavy use of Promises

#EXTENDTHEWEBFORWARD“Promises are one of the best examples of the extensible webprinciples, where collaborative developer work informs web

standards.” - Domenic Denicola (Co-editor of Promises/A+,Member of W3C TAG)