L'agence
WanadevStudio
Introduction à ECMAScript 6 : Le JavaScript de demain
Les technologies web ne cessent d'évoluer, aujourd'hui nous allons parler d'ES6, la nouvelle version du langage JavaScript. Elle apporte un lot conséquent de nouveautés, de l'ajout de nouvelles fonctions à la bibliothèque standard, à plusieurs nouvelles syntaxes, dont les classes, les modules et bien plus encore.
Historiquement, le langage JavaScript a longtemps été mis au deuxième plan dans la conception des pages web, servant principalement à réaliser des animations diverses. Aujourd'hui les choses sont totalement différentes, on parle désormais d'application web, entièrement contrôlées via du code JavaScript. Malheureusement, le langage n'a pas été conçu pour créer des applications complexes, il en résulte ainsi des syntaxes très lourdes.Cela va changer très prochainement avec l'arrivée d'une nouvelle version du langage : ECMAScript 6, alias JavaScript 2015 !
ES6 a été pensé pour créer des applications web facilement maintenables, tout en restant compatibles avec le code existant. L'idée a été d'ajouter de nouvelles fonctionnalités au langage. Ainsi, la bibliothèque standard s’enrichit de nouvelles méthodes, mais surtout, le langage adopte de nouvelles syntaxes, comme les classes ou les modules (pour ne citer qu'eux) permettant d'avoir du code beaucoup plus structuré et lisible. Un article de blog serait beaucoup trop court pour faire le point de toutes les nouveautés qui vont s'offrir à nous, je vous propose cependant de faire un tour d'horizon de certaines fonctionnalités très intéressantes.
Parlons bien, parlons code
Je vous invite à créer une page web html vide et à y coller le contenu du code ci-dessous. Votre navigateur n'est pas compatible ES6 ? Ce n'est pas un problème pour aujourd'hui ! Effectivement nous allons utiliser deux scripts qui vont nous transformer à la volée le code ES6 en code compatible avec votre navigateur.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>ECMAScript 6 - Demos</title>
</head>
<body>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
// Notre code ES6 ici
</script>
</body>
</html>
Cette opération "magique" est réalisée par le compilateur Traceur, un outil mis au point par Google dont le but est de convertir le JavaScript de demain en JavaScript d'aujourd'hui. Il est disponible sous plusieurs formes (node, web). Ici nous utilisons la version web. Ainsi, tout le code JavaScript placé dans la balise script type="module" sera automatiquement converti à la volée.
Maintenant que nous sommes fin prêts, nous pouvons commencer :)
Le mot clé let
Le mot clé let permet de déclarer une variable limitée à la portée d'un bloc, c'est-à-dire qu'elle ne peut être utilisée que dans le bloc où elle a été déclarée, ce qui n'est pas le cas avec var.
function swap(x, y) {
if (x != y) {
var old = x;
let tmp = x;
x = y;
y = tmp;
}
console.log(typeof(old)); // number
console.log(typeof(tmp)); // undefined
}
Comme prévu, la variable tmp n'existe que dans le bloc conditionnel, à l'inverse de old qui existe partout dans la fonction.
Templates et chaînes de caractères
Vous avez sans doute déjà créé des chaînes de caractères en utilisant des concaténations, bien que cela fonctionne, ce n'est pas forcément pratique et lisible. Le Template String va nous permettre de déclarer des chaînes avec des variables à évaluer à l'intérieur. À la différence d'une chaîne de caractères classique, on utilise des anti quotes (`) à la place des double quotes.
let me = "Yannick";
let mAge = 29;
let result = `Je suis ${me} et j'ai ${mAge} ans`;
La variable result aura comme valeur "Je suis Yannick et j'ai 29 ans". Sachez que vous n'êtes pas limité à une variable, vous pouvez évidemment faire des opérations et même utiliser des fonctions. (si vous vous appelez Bertrand, Michel ou Louise, que vous n'avez pas 29 ans, ça marche aussi, évidemment !).
Les paramètres par défaut
Prenons un cas classique avec l'écriture d'une fonction qui doit additionner deux nombres. Si les paramètres ne sont pas définis alors votre programme plante, pour éviter cela il faut soit être sûr que les paramètres sont bien utilisés ou alors les tester dans le code, ce qui revient à faire quelque chose comme ça :
var add = function (x, y) {
var x = typeof(x) === "number" ? x : 0;
var y = typeof(y) === "number" ? y : 0;
return x + y;
};
Demain vous pourrez utiliser des paramètres par défaut dans vos fonctions et méthodes, ça se passe de commentaires non ?
let add = function (x = 0, y = 0) {
return x + y;
};
Boucle for - of
Il n'existe toujours pas de mot clé foreach en JavaScript 2015, cependant il y a désormais une nouvelle façon d'itérer sur un tableau en utilisant le couple for-of.
let languages = [ "C", "C++", "C#", "JavaScript" ];
for (let language of languages) {
console.log(language);
}
Il est aussi possible d'utiliser un système clé/valeur en spécifiant un tableau en paramètre et en exploitant la fonction Array::entries() qui va renvoyer un objet de type Iterator contenant le couple clé/valeur pour chaque élément du tableau.
for (let [index, language] of languages.entries()) {
console.log(`Index: ${index} => Valeur: ${language}`);
}
Évolution des objets littéraux
Les objets littéraux peuvent être vus comme une structure, ils permettent de stocker des variables et des méthodes. Il est désormais possible d'avoir une écriture beaucoup plus légère pour les déclarer, en se passant du mot clé function.
let Engine = {
initialize() {
this.display("Init") ;
},
display(message) {
console.log(message);
}
};
Fonctions lambda alias Arrow function
Cette nouveauté est géniale, vous allez voir pourquoi dans quelques instants ! Voici un premier exemple avec la fonction Array.sort().
let values = [65, 7, 78, 1, 32, 66];
values.sort((a, b) => { return b - a });
Évidemment, l'intérêt des Arrow Function ne s'arrête pas à une écriture plus light ! En réalité le contexte this du scope courant est conservé à l'intérieur de la déclaration. Voyons plutôt l'exemple ci-dessous.
let Engine = {
initialize (element) {
element.addEventListener("keydown", (event) => {
this.display(event.type);
}, false);
},
display (message) {
console.log(message);
}
};
Les classes et l'héritage
On termine avec une chose très attendue par une majorité de développeurs : les classes et l'héritage "facile". Comme pour un objet littéral, vous n'avez pas besoin d'utiliser le mot clé function pour déclarer une méthode.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return `Hi I'm ${this.name} and I'm ${this.age} years old!`;
}
}
let p = new Person("John", 18);
console.log(p.toString());
// Hi I'm John and I'm 18 years old
La création d'une classe est relativement facile, vous noterez que nous ne mettons pas de point virgule après sa déclaration. Une chose à noter est l’absence d'encapsulation des données, ainsi tous vos champs et méthodes seront accessibles depuis l'extérieur de la classe. Rassurez-vous, il existe une possibilité pour créer des membres privés, avec des Symbols, mais cela va au-delà de notre article de présentation.
Passons maintenant à l'héritage Simple (il n'existe pas d'héritage multiple avec ES6).
class Developer extends Person {
constructor(name, age, language) {
super(name, age);
this.language = language;
}
toString() {
return super.toString() + ` :: I'm a Developer who likes ${this.language}`;
}
}
let d = new Developer("Yannick", 29, "JavaScript");
console.log(d.toString());
// Hi I'm Yannick and I'm 29 years old :: I'm a Developer who likes JavaScript
Sans surprise l'héritage de classe se fait avec le mot clé extends, les méthodes parentes s'appellent quant à elles avec le mot clé super.
Conclusion
Toutes ces nouveautés vont permettre de créer des applications web beaucoup plus rapidement et facilement. L'ajout des classes avec un système d'héritage facile est un vrai plus et permettra de structurer plus facilement le code. Les fonctions lambda sont aussi un vrai plus, car elles offrent une écriture très légère et permettent de conserver la référence du pointeur this du bloc courant.
La question est désormais : quand ?
Certaines fonctionnalités d'ES6 sont déjà présentes dans les navigateurs actuels, comme la boucle for-of et certaines nouvelles méthodes de la bibliothèque standard. Le support de la nouvelle syntaxe arrive très prochainement dans Google Chrome (à partir de la version 42) et est déjà présent dans Internet Explorer 11-dev (la version dans Windows 10).
Il est possible de suivre le statut d'implémentation de tout ça au travers du dashboard chromium et du site status.modern.ie pour Internet Explorer. Malheureusement il n'y a pas à ma connaissance de dashboard pour suivre le développement de Firefox, il faudra vous frayer un chemin sur le Wiki ou sur Bugzilla.
Dans tous les cas, vous pouvez l'utiliser aujourd'hui et compiler votre code final en ES5, c'est exactement comme faire du TypeScript ou du CoffeScript, vous développez votre application dans votre éditeur et vous la compilez pour les tests. L'avantage est que d'ici le milieu d'année, il ne sera plus nécessaire de compiler le code ES6, car celui-ci sera automatiquement interprété par votre navigateur ! Une compilation sera toujours nécessaire si vous voulez assurer un fonctionnement sur les anciens navigateurs (qui sont nos navigateurs d'aujourd'hui !). Enfin si vous aimez les gros tableaux avec plein de couleurs, je vous recommande de consulter ce lien, il permet de voir pour chaque navigateur, quelles sont les fonctionnalités d'ES6 prises en charge.
Prêt à passer à la vitesse supérieure ? Venez en discuter avec nous, par commentaire, sur les réseaux sociaux ou autour d'un café !
Yannick Comte
-
#4 - Construire un DOM Virtuel, les différentes méthodes de rendu et bien écrire ses tests : retour de la Vue.js Amsterdam 2023Il y a 2 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article nous allons voir comment construire un Virtual DOM, on parlera des différentes façons de faire du rendu dans le web, de comment écrire des bons tests et plein d’autres choses.
Beaucoup de sujets à traiter, alors, c’est parti !
-
#3 - Vue.js en 2023, l'avenir de Vue Router, les patterns avec Pinia : retour de la Vue.js Amsterdam 2023Il y a 2 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article on va parler de Vue en 2023, de patterns Pinia, du futur de vue-router, de l’écosystème Vue et de TypeScript avec Vue.
Beaucoup de sujets à traiter, alors, c’est parti !
-
#2 - Nuxt.js, l'art de la composition, accessibilité : retour de la Vue.js Amsterdam 2023Il y a 2 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le second des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article on va parler de Nuxt en 2023, d’un client Mastodon fait avec Nuxt, d’expérience développeur sur Nuxt, de Nitropack, de CSS-in-TS, de comment concevoir ses composants Vue.js, d’accessibilité et de maintenance d’écosystème open-source en entreprise.
Beaucoup de sujets à traiter, alors c’est parti !
-
#1 - NPM Package, PlayWright, Google LightHouse : retour de la Vue.js Amsterdam 2023Il y a 2 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le premier des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article, nous allons parler de Rock’n Roll, voir comment créer son package NPM, découvrir PlayWright pour tester ses applications de bout en bout, parler de commerce international, déconstruire les idées reçues sur Google Lighthouse et aborder le sujet de la performance sous Vue.js.
Beaucoup de sujets à traiter, alors c’est parti !
-
React, Vue, Angular : quel framework front choisir en 2021 ?Il y a 4 ans
La question revient souvent sur le devant de la scène. Dans le monde du framework web, on a du choix c’est bien, mais encore faut-il s’y retrouver et savoir lequel choisir.
-
React.js #3 : Gérer vos données dans des stores natifsJavascriptIl y a 5 ans
Cet article est le dernier article d'une série de trois articles dans laquelle nous voyons comment bien débuter son projet React.
Commentaires
michelbenay
Il y a 9 ans
félicitations et remerciements
Nicolas
Il y a 9 ans
La question est (presque) pertinente: je suis sur un projet (compliqué) de...disons d'ERP pour familles et associations. De groupe humains, quoi. Et à part un fork d'Odoo, alias OpenERP, en python (merci à nos amis les belges), super agréable à maintenir (lire, évoluer, corriger...), y'avait quoi? Pas grand chose, et surtout pas PHP (là, si, ça fait mal...). Et puis NodeJS, Meteor, CoffeeScript, et... JS6? Allons bon, toute mon étude/benchmark "quel est le meilleur language et framework pour faire mon utopie de site web "qui fait tout" dois je choisir?" est à l'eau. Foutu. Nuit blanches.... Help! Python, tu m'avais tant séduit.... vas tu seulement survivre à "ECMAScript6" (sic)?
Alors, Python ou ES6? Django ou Meteor? Comment faire un site web multi-services pour familles et assos, emails-tâches-gestion-docs-todo-photos-partages-occasions-social-...? Help!
Manuel KLEIN
Il y a 9 ans
Yannick Comte
Il y a 9 ans
Ta question est effectivement pertinente mais je pense qu’il ne faut pas trop se perdre non plus dans toutes ces technos. La première chose à identifier est de savoir si tu veux utiliser du JS côté back (donc du node) ou si tu veux utiliser ES6 uniquement sur la partie client.
« quel est le meilleur language et framework pour faire mon utopie de site web »
Je dirais simplement que ça dépend des gens et des équipes, il n’y a pas de meilleur langage (quoi que…) mais plutôt des limites des moteurs/interpreteurs. PHP par exemple si il est bien utilisé permet de faire des sites rapides, fonctionnels et maintenables et ce n’est pas les ressources qui vont manquer pour ça :-) .
Je ne connais pas vraiment Python pour le web alors je ne pourrais pas faire de comparatif, mais ton problème peut être solutionné avec un bon framework PHP comme Symfony 2/3 (mais apparement ce n’est pas trop ta tasse de thé) ou avec une solution Node. Cependant attention à la mise en place du serveur.
Hugo Saint-Yago
Il y a 8 ans
values.sort((a, b) => { return b - a });cette ligne pourrait être écrite un peu plus légère, n'est-ce pas?
sans le mot clé "return" et les {}Oui
Il y a 7 ans
Très bonne initiative.