The document discusses the evolution from ES6 to JavaScript 2.0, outlining differences between ECMAScript and JavaScript, highlighting features like promises, and detailing compatibility issues with browser support. It emphasizes the significance of promises for managing asynchronous operations and provides usage examples showcasing methods like .then and .catch. The document also hints at future advancements in classes, generators, and modules within the JavaScript ecosystem.

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