Tech Talk : Les premiers avantages de travailler en ES2015


La spec ES2015 (anciennement connue sous le nom ES6) a été publié en juin 2015, et apporte un nouveau souffle sur le JavaScript et sur tout l’écosystème front-end déjà en ébullition :

  • De nombreux frameworks avec de nouvelles versions (React, Angular JS…)
  • Leurs compléments pour créer des webapps mobiles (React Native, ionic…)
  • Des langages transpilés vers du JavaScript (TypeScript, PureScript, CoffeeScript…)
  • Les librairies pour agrémenter le tout (Underscore, lodash, Ramda…)

Au milieu de cette effervescence l’ES2015 constitue un socle commun de connaissances utiles pour les développeurs front-end. D’autant plus que la compatibilité avec les navigateurs s’améliore de jour en jour. De plus, Babel, un outil permettant de transpiler du code ES2015 en ES5, permet d’assurer une bonne compatibilité sur un large éventail de navigateurs, et propose dorénavant certaines fonctionnalités à l’étude pour la norme ES2016 (aka ES7). Je vais vous faire part de quelques-unes de mes impressions après deux mois de développement d’une application écrite en ES2015 et utilisant le framework Angular JS.

Un langage moins dépendant des librairies

En ES5, de nombreux développeurs front-end utilisent des librairies telles que Underscore, lodash ou Ramda, par exemple, afin de combler les lacunes du langage et de se tourner vers un développement plus proche de la programmation fonctionnelle. De plus certains frameworks, comme Angular, proposent des fonctions utilitaires qui sont parfois similaires à celles de ces libraires, ce qui peut conduire à un manque de cohérence au sein d’une code base importante.

En ES2015, cette dépendance aux libraires tierces est un peu moins marquée, grâce notamment à l’introduction de nouvelles fonctions sur les prototypes Array et Object, ainsi qu’à l’introduction des fat arrow functions ( => ). Je vous conseille l’excellent article “you might not need underscore” qui donne plusieurs exemples de correspondance entre certaines fonctions de la librairie underscore et des librairies standard ES5 ou ES2015. Voici un exemple de code avec un cas d’utilisation classique de JavaScript : créer un nouvel objet à partir de plusieurs objets préexistants.

const object1 = {
    name: 'Alex'
};
const object2 = {
    age: 26
};
// Angular JS
const userWithAngular = angular.extend({}, object1, object2);

// lodash
const userWithLodash = _.assign({}, object1, object2);

// ES2015
const userWithJS = Object.assign({}, object1, object2);

Facilité d’écriture et de lecture du code

En tant que développeur, on passe davantage de temps à lire du code existant et à le modifier qu’à écrire du nouveau code à partir de zéro. Les nouvelles fonctionnalités ES2015 permettent une bien meilleure compréhension du code, soit en proposant des facilités d’écriture (shorthand), soit en comblant des lacunes ES5 obligeant à faire des “rustines” inélégantes dans le code.

Un avantage est qu’il est possible de garantir la cohérence du code en utilisant un linter comme ESLint qui prend en compte la nouvelle spec avec ses règles ecmaFeatures. Si vous souhaitez tester ESLint vous pouvez utiliser la configuration Meetic disponible en open source, compatible ES5/ES2015.

Fonctions fléchées (Arrow functions)

Les fonctions fléchées sont une notation simplifiée pour les fonctions anonymes qui permet de lier la valeur de this.
L’avantage majeur de cette notation est de faciliter la lecture des fonctions utilisées dans le cadre de la programmation fonctionnelle, par exemple map ou filter sur le prototype d’Array. Prenons un exemple simple de tri dans un tableau pour voir les avantages de cette syntaxe. Voici les données du tableau :

var singers = [
{ name: 'Jim Morrison', band: 'The Doors'},
{ name: 'John Lennon', band: 'The Beatles'},
{ name: 'Mick Jagger', band: 'The Rolling Stones'},
{ name: 'Paul McCartney', band: 'The Beatles'},
{ name: 'Robert Plant', band: 'Led Zeppelin'}
];

Admettons que l’on veut filtrer le tableau pour avoir uniquement les chanteurs des Beatles. Une version “classique” en JavaScript avec une boucle for donnerait ceci :

// ES5 "procedural"
var beatlesSingers = [];
for (var i = 0; i < singers.length; i++) {
if (singers[i].band === 'The Beatles') {
beatlesSingers.push(singers[i]);
}
}

En utilisant la méthode filter sur le tableau on obtient une manière plus élégante de faire ce tri :

// ES5 "functional"
var beatlesSingers = singers.filter(function(singer) {
return singer.band === 'The Beatles';
});

Et maintenant en ES2015, on peut écrire le code sur une ligne, et il n’est pas nécessaire d’écrire le mot clé return dans notre fonction fléchée :

// ES2015
let beatlesSingers = singers.filter((singer) => singer.band === 'The Beatles');

Définition de méthodes et propriétés (Shorthand method names & Shorthand property names)

Il s’agit là de raccourcis pour l’écriture des objets. La définition de méthodes permet de se passer du mot clé function quand une clé d’un objet est une fonction :

// ES5
var obj = {
foo: function() {},
bar: function() {}
};

// ES2015
let obj = {
foo() {},
bar() {}
};

La définition de propriété permet de ne pas avoir à réécrire deux fois la même chose quand la clé de l’objet a exactement le même nom que la variable qui lui est affectée :

var a = “foo”, b = 42, c = {};

// ES5
var o = { a: a, b: b, c: c };

// ES2015
var o = { a, b, c };

Paramètres par défaut (Default parameter)

Les paramètres de fonction par défauts ont été rajoutés, et s’écrivent avec le signe « = » dans la définition de fonction. Cela permet d’éviter de tester si la valeur est présente à l’intérieur de la fonction :

// ES5
function singularAutoPlural(singular, plural, rallyingCry) {
plural = plural || singular + “s”;
rallyingCry = rallyingCry || plural + “ ATTACK!!!”
return [singular, plural, rallyingCry ];
}

// ES2015
function singularAutoPlural(singular, plural = singular+“s”,
rallyingCry = plural + “ ATTACK!!!”) {
return [singular, plural, rallyingCry ];
}

//[“Gecko”,“Geckos”, “Geckos ATTACK!!!”]
singularAutoPlural(“Gecko”);

//[“Fox”,“Foxes”, “Foxes ATTACK!!!”]
singularAutoPlural(“Fox”,“Foxes”);

//[“Deer”, “Deer”, “Deer … change.”]
singularAutoPlural(“Deer”, “Deer”, “Deer peaceably and respectfully
petition the government for positive change.”)

Conclusion

ES2015 présente de nombreux avantages, et même s’il ne s’agit pas d’une spec parfaite, il permet au JavaScript de diminuer sa dépendance envers les librairies utilitaires et d’utiliser des syntaxes plus élégantes et compréhensibles. Je n’ai pas abordé ici le système de modules qui est très riche et pourrait faire l’objet d’un article entier.

Il s’agit du JavaScript d’aujourd’hui, et cette version est parfaitement utilisable en production grâce aux outils comme Babel et Traceur. De plus avec le passage à un objectif d’une nouvelle version par an, il est important de se former et de commencer à développer des applications capables de profiter des nouvelles fonctionnalités du langage dès que possible.

Si vous souhaitez tester ces fonctionnalités simplement sans vous lancer dans un gros projet, je vous invite à essayer les katas ES6, des tests unitaires à compléter classés selon différentes catégories, ou bien à essayer de transpiler du code ES2015 sur le REPL Babel.

Vous aimerez aussi...