ES6 to ES5

Javascript est un langage standardisé par l'ECMA sous le nom ECMAScript. Les navigateurs courants supportent aujourd'hui la version 5 (ES5). La version 6 (ES6) est en cours d'implémentation et apportera un lot d'innovations qui permettra de clarifier beaucoup de choses au sein de la structure de son code. Des classes, des propriétés par défaut, de l'interpolation de texte… Tout plein de choses super pratiques qui ont été mises en place dans d'autres langages comme CoffeeScript, TypedScript ou Dart. Sauf que ES6 est un standard et sera donc disponible tel quel pour tous les navigateurs sans pre-compilation dans les années à venir.

Qu'est-ce-que ?

Parmi les nouveautés de ES6, on trouvera par exemple enfin un moyen clair et compréhensible de spécifier et d'étendre des classes :

class Parent {  
  constructor (var1 = 1, var2 = null) {
    this.var1 = var1;
    this.var2 = var2;
  }

  get something () {
    return `This is an interpolated string with : ${this.var1} and $ {this.var2}`
  }
}

class Child extends Parent {  
  doSomething () {
    return this.something;
  }
}

Dans cet exemple, on voit en plus d'une classe étendue, l'usage d'un constructeur, d'un getter, d'une interpolation de texte. On a aussi droit à d'autres choses qui seront bien mieux expliquées ici. Non parce que c'est bien beau tout ça, mais ES6 ne sera disponible sur nos navigateurs que dans quelques années, il est encore bien trop tôt pour s'en servir…

Mais en fait si !

Transpiler

Il existe plusieurs transpilers qui vont traduire vos scripts d'ES6 à ES5 et donc les rendre compatibles avec les browsers courants (IE>8). C'est finalement exactement le même principe que CoffeeScript et Typescript, sauf que le langage source sera le langage de base que vous utiliserez dans les années à venir.
Vous pourrez faire votre choix parmi ESNext, 6to5, Traceur ou es6-transpiler. Typescript serait lui aussi capable de transpiler du es6. Celui qui m'a semblé le plus fiable pour mes besoins (du angularjs, avec des classes, des const, des lets…) est es-6-transpiler.

Ainsi, avec l'un de ces transpiler, vous pouvez mélanger du vieux javascript et du javascript d'avant garde : c'est un javascript ES5 qui sera produit au final. Vous pouvez donc prendre votre temps pour migrer les modules de votre choix en ES6 si nécessaire. Quand ES6 sera la version courante, même si vous n'avez pas fini de migrer votre vieux code, vous pourrez utiliser les deux versions directement en prod sans compilation préalable puisque ES6 est rétrocompatible. C'est donc un excellent choix pour l'avenir : Dart nécéssitera toujours une version compilée (j'imagine mal Mozilla, Apple et Microsoft l'implémenter de sitôt) ainsi que Coffee et Typed.

Usage

Le plus simple pour l'utiliser est de se servir du plugin gulp ou grunt qui va bien. gulp-es6-transpiler par exemple. Il vous permettra de compiler vos fichiers javascripts en ES5 s'ils contiennent des instructions propres à ES6. Vous envoyez tout ça dans un dossier .tmp dans une tâches es6 et zou :

var es6 = require('gulp-es6-transpiler');  
gulp.task('es6', function () {  
  gulp.src('app/scripts/**/*.js')
    .pipe(es6().on('error', function (error) {
      console.error(
        'ES6 error on `' + error.fileName + '`:\n' +
        error.message, error.fileName);
    }))
    .pipe(gulp.dest('.tmp/scripts'));
});

Prenez le temps d'essayer tout ça et de commencer à prendre l'habitude de coder en ES6 puisque c'est le langage du futur très proche.

Example de code ES6

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu