Ecma script 6 - Javascript 2.0 : Promises, générateurs, variables locales, découvrez comment l'ECMA SCript 6 va transformer vos applicatifs *.js. Vous n'avez jamais entendu parler d'"Harmony" ni d'"Es.next" et vous êtes développeur web ? Fatigué des fonctions callbacks, vous envisagez de passer vos requêtes ajax en synchrone ? Il est temps de vous intéresser à l'ECMA Script 6. Partiellement implémenté, le futur standard Javascript 2.0 fournit son lot de nouveautés (Promises, générateurs, variables scopables) et autres subtilités programmatoires pour le plus grand plaisir de vos SPA. Cette conférence se propose dans un premier temps de parcourir les différents aspects de la spécification puis, dans un second, de s'attarder à travers le développement de modules sur les points clés du standard Javascript 2.0. Elle a pour objectifs : d'éclairer les auditeurs sur les caractéristiques de l'ECMA Script 6 l'approfondissement des aspects phares (promise et un autre sujet en fonction de l'état d'implémentation lors de l'atelier) de mesurer leur implémentation navigateur à date et explorer les polyfills

1. From ES6 to Javascript 2.0
What use today ?
Jonathan Rivalan

2. From ES6 to Javascript 2.0
● Introduction / a brief history
→ What is the difference between EcmaScript and JS ?
● Methods compatibility
→ What is the global browser support ?
● Use Cases
- promises
● Next
OWF 2014 – 31 Octobre 2014 2

3. From ES6 to Javascript 2.0
● Introduction / a brief history
→ EcmaScript creation in 1996
→ ES5 standard submission in 2009
● What is the difference between EcmaScript and
Javascript ?
→ EcmaScript is the language when Javascript,
jscript and as3 are dialects of it
→ today mostly none, except for the browser
support
OWF 2014 – 31 Octobre 2014 3

4. From ES6 to Javascript 2.0
● Methods compatibility
→ a rich version with more than 100 new features
_ http://kangax.github.io/compat-table/es6/
→ currently limited support with a bit less than
50 features, mostly oriented around the number,
math objects and collections (~30 features)
→ mostly no support on IE11- and Opera last
version
→ various and numerous ES5 polyfills
_http://addyosmani.com/blog/ecmascript-6-resources-for-the-curious-javascripter/
OWF 2014 – 31 Octobre 2014 4

5. From ES6 to Javascript 2.0
● Use case : promises
→ ES6 star feature, allows the rigging of
asynchronous scenarios
→ a promise represents the maybe result of an
asynchronous operation, usable through the
.then method, which will return the value of the
resolved promise, or the reason in a revoked
case.
Promises = linear programming + readability
OWF 2014 – 31 Octobre 2014 5

6. From ES6 to Javascript 2.0
● Use case : promises, .then
● Cas d'usage : les promises
function asyncFunction () {
function asyncFunction () {
return new Promise(function(resolve,reject) {
return new Promise(function(resolve,reject) {
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
})
})
}
var successHandler = function(successObj){
}
var successHandler = function(successObj){
console.log("I launch if won !");
console.log("I launch if won !");
}
var errorHandler = function(errorMsg){
}
var errorHandler = function(errorMsg){
console.log("I launch if failed !");
console.log("I launch if failed !");
}
asyncFunction.then(successHandler,errorHandler);
}
asyncFunction.then(successHandler,errorHandler);
OWF 2014 – 31 Octobre 2014 6

7. From ES6 to Javascript 2.0
● Use case : promises, .catch
function asyncFunction () {
function asyncFunction () {
return new Promise(function(resolve,reject) {
return new Promise(function(resolve,reject) {
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
● Cas d'usage : les promises
})
})
}
var successHandler = function(successObj){
}
var successHandler = function(successObj){
/*stuff*/
/*stuff*/
}
var errorHandler = function(errorMsg){
}
var errorHandler = function(errorMsg){
/*stuff*/
/*stuff*/
}
var correctError = function(obj){
}
var correctError = function(obj){
/*recovery try*/
return obj ;
/*recovery try*/
return obj ;
}
asyncFunction.then(successHandler)
.catch(correctError)
.then(successHandler)
.catch(errorHandler);
}
asyncFunction.then(successHandler)
.catch(correctError)
.then(successHandler)
.catch(errorHandler);
OWF 2014 – 31 Octobre 2014 7

8. From ES6 to Javascript 2.0
- then
- catch
- then
- catch
OWF 2014 – 31 Octobre 2014 8

9. From ES6 to Javascript 2.0
● Use case : promises, .race
● Cas d'usage : les promises
function asyncFunction () {
function asyncFunction () {
return new Promise(function(resolve,reject) {
return new Promise(function(resolve,reject) {
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
/*asynchronous actions*/
resolve(successObj) //WIN
reject(errorMsg) //FAIL
})
})
}
var PromiseA = asyncFunction(someParams);
var PromiseB = asyncFunction(otherParams);
Promise.race([PromiseA, PromiseB])
.then(function(obj){console.log(obj+'was served first!')});
}
var PromiseA = asyncFunction(someParams);
var PromiseB = asyncFunction(otherParams);
Promise.race([PromiseA, PromiseB])
.then(function(obj){console.log(obj+'was served first!')});
OWF 2014 – 31 Octobre 2014 9

10. From ES6 to Javascript 2.0
● Use case : promises, .all
● Cas d'usage : les promises
var p = new Promise(function(resolve, reject) { resolve(3); });
Promise.all([true, p]).then(function(values) {
// values == [ true, 3 ]
});
var p = new Promise(function(resolve, reject) { resolve(3); });
Promise.all([true, p]).then(function(values) {
// values == [ true, 3 ]
});
OWF 2014 – 31 Octobre 2014 10

11. From ES6 to Javascript 2.0
● Use case : promises
→ standard exploration :
_https://promisesaplus.com/
→ strong polyfill :
_https://github.com/tildeio/rsvp.js/
OWF 2014 – 31 Octobre 2014 11

12. From ES6 to Javascript 2.0
● Next ?
Numerous interesting features regarding classes,
generators, modules… and so on !
To go further :
→ have a peek at the standard
_http://www.ecma-international.org/
→ full es6 nowadays features review
_http://code.tutsplus.com/articles/use-ecmascript-6-today--net-31582
OWF 2014 – 31 Octobre 2014 12

13. From ES6 to Javascript 2.0
Jonathan Rivalan
> jonathan.rivalan@alterway.fr
> jonathan.rivalan@gmail.com
OWF 2014 – 31 Octobre 2014 13