Le JavaScript 6

Pas qu’une petite révolution, de loin la plus importante depuis le HTML5. Même si le JavaScript est remis en question par plusieurs ténors, en raison de sa vulnérabilité au niveau des attaques de type XSS (Cross-site Scripting). On peut dore et déjà affirmer que c’est une très bonne nouvelle. Plus de 6 années de développement pour arriver enfin au JavaScript 6 et une programmation plus compacte que jamais. Un must (incontournable) pour la programmation de script d’application de plus en plus imposante sur le Web.

Et personnellement, pour fermer cette parenthèse, l’avenir est sans aucun doute dans les langages script, particulièrement sur le Web. C’était le dernier message de Steve Jobs! Voyez ce qui est arrivé au Flash, pourtant avec un excellent ActionScript 3, compilé à la merci du vendeur et d’un plugiciel... Le JavaScript s’intègre naturellement dans l’idée d’un Web sémantique qui sépare le contenu du contenant. Structure HTML, style et animation CSS, manipulé localement en JavaScript par le navigateur. Le serveur ne devrait servir qu’à retourner les données et les fichiers du serveur, avec une requête conventionnelle HTTP ou un bon Ajax. Tout le traitement de l’information se fait par le navigateur, sans pression sur le serveur. Vous vous souvenez du programme SETI qui utilisait des milliers d’ordinateurs autour du monde pour augmenter sa capacité de calcul afin de détecter une vie extraterrestre. C’est un peu le même principe et c’est tout à fait génial!

Le JavaScript 2015 ou JavaScript 6, est une implantation du nouveau standard ECMAScript 6 (dit harmony). Sortie en juin dernier, le ECMAScript 6 est la dernière version de la norme ECMAScript et la plus importante mise à jour à ce jour depuis la normalisation du ES5 en 2009! Déjà grandement inspirées par le langage C, les nouvelles normes empruntent de l’expérience coffeescript ou jQuery à certains égards. Notamment un code plus simple, plus compact et plus léger. Certains parlent même des lettres de noblesse du JavaScript, maintenant capable de programmer de grosses applications complexes. Pour ma part, l’évolution n’a rien de gratuit et surtout allait de soi. D’ailleurs, le cadriciel Fundation 6.2 sortie avant-hier utilise déjà les normes ECMAScript 6. Et même que le ECMAScript 7 est déjà sur la table de travail...

Consulter les spécifications complètes du standard ES2015 et du langage ECMAScript 6

Le compilateur « Traceur »

La mise en œuvre de ces caractéristiques dans les principaux moteurs JavaScript est loin d’être terminée. Mais pour les amateurs, on peut déjà l’utiliser sans problème à l’aide de « Traceur », un compilateur JavaScript développé par Google qui permet « d’utiliser les fonctions de l’avenir dès aujourd’hui ». On nous exhorte à essayer les nouvelles fonctionnalités du langage, à le tester et surtout à en faire la promotion. Mais c’est lourd, un peu trop pour un site important. Pas pour le serveur, ça reste une traitement local, c’est à dire sans aucun impact sur le serveur! Mais placer en haut de la ligne de flottaison, comme dit Google, la page tarde à s’afficher. « Traceur » à le mérite de soutenir les normes ES6 et certaines de ces caractéristiques expérimentales. En effet, on n’a pas encore droit à toutes les nouveautés comme le tableau des comparaisons le démontre. Fait à noter, plusieurs fonctionnalité remplace avantageusement jQuery...

Table de compatibilité ECMAScript 5 et 6

GitHub - google/traceur-compiler

Voir les Caractéristiques du langage du compilateur « Traceur » (dans la langue de Shakespeare) : Arrow Functions Block Scoped Binding Classes Computed Property Names Default Parameters Destructuring Assignment Iterators and For Of Generators Modules Numeric Literals Property Method Assignment Object Initializer Shorthand Rest Parameters Spread Template Literals Promises

C’est le temps de s’amuser

Allez, c’est le temps de s’amuser un peu avec ce nouveau joujou. Rien de plus simple, ajouter cette ligne dans un document HTML vide :

<!-- Le compilateur « Traceur » de Google -->
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

Puis indiquer dans la balise de vos scripts le type="module". C’est tout! Le compilateur se chargera de convertir tous vos scripts de type « module » en version compatible.

<script type="module">
 // ...
</script>

Voici un exemple éloquent du compilateur « Traceur » qui utilise la nouvelle classe de fonction « class » et surtout le passage de paramètre :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Démo, compatibilit ECMAScript 6</title>
  </head>
  <body>
    <h1 id="message"></h1>
    <!-- Le compilateur « Traceur » de Google -->
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

    <!-- Optionnel : Utilisé pour les tests et traces -->
    <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
    <!-- Optionnel : Cadriciel pour les tests -->
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>


    <!-- Optionnel : Exemple -->
    <script type="module">
      class Greeter {
       constructor(message) {
          this.message = message;
      }
      maFonction() {
        var element = document.querySelector('#message');
          element.innerHTML = this.message;
        }
      };
      var greeter = new Greeter('Salut le monde!');
      greeter.maFonction();


    </script>
  </body>
</html>

Et voilà, votre navigateur est maintenant compatible JavaScript 6! On note plusieurs fonctionnalités intéressantes dans ce petit bout de script. Déjà l’utilisation du compilateur et du type « module » pour la compatibilité. Ensuite la nouvelle « class¹ » et la construction d’un paramètre pour passer à la fonction « maFonction() »! J’avoue que c’est très existant! Après un survole des nouveautés, je commencerai ici. Par déplacer les scripts en bas de la page, et ajouter la détection du chargement des composantes de la page pour exécuter mes scripts.
1. Attention, les mnémoniques « class » ou « classe » utilisées dans ce tutoriel font référence à la nouvelle classe JavaScript. À ne pas confondre avec la classe CSS.

Soyez délicat avec votre navigateur, pas de mouvement brusque ; -) Il est très fragile. Je soupçonne le compilateur, qui en demande sans doute beaucoup...

Variables, déclaration, bloc, assignation et chaine de caractères

Un nouveau type de variable, le let. Une variable déclarée localement a l’intérieur d’un bloc et même en cascade. La variable ne sera pas seulement exclusive au bloc de code comme c’est le cas avec une déclaration « var » conventionnelle dans une fonction. Mais en plus, une variable déclarée globalement qui porte le même nom ne sera plus disponible dans ce bloc de code. Évitant ainsi le mélange et les erreurs entre les variables locales et globales. Certains parlent même de ne plus utiliser le var Voilà un exemple qui parle de lui même :

Exemple ici avec const, déclaration d’une constante avec restriction statique pour prévenir son usage avant l’assignation. On devrait toujours privilégier la constante quand la valeur ne change pas. On note ici les blocs {...} :

<script type="module">
function f() {
  {
    let x;
    {
      // okay, déclaré dans un bloc
      const x = "test";
      // erreur, constante
      x = "foo";
    }
    // okay, déclaré avec `let`
    x = "bar";
    // erreur, déjà déclaré dans un bloc
    let x = "inner";
  }
}
</script>

Autre exemple pour bien démontrer la disponibilité et la dépendance des variables.

<!-- Autre exemple pour bien démontrer la disponibilité et la dépendance des variables : -->

<script type="module">
var b = "too";
var c = "boo";
function a() {
  // La variable globale b n’est pas disponible 
  console.log(b);
  // La variable globale c est disponible
  console.log(c);
  let b = "foo";
  // La variable locale b est disponible
  console.log(b);
  return b;
}
console.log(a());
</script>

    //Résultat :
    undefined
    boo
    foo
    foo

Bon, il n’y a pas de quoi fouetter un chat. Le code n’est pas vraiment plus compact, un changement de mnémonique, « var » pour « let » sans plus. Mais combien plus clair? Plus facile à lire, à déboguer! C’est vrai qu’il suffit d’ajouter un souligné (_) devant la variable par convention. Le code ouvert et du copier-coller apporte naturellement sont lot de conflit de variable. La nouvelle variable let diminue les risques...

L’exemple suivant est vraiment intéressant, comme la variable var, l’assignation d’une fonction dans une variable let.

</script>

// Exemple de fonction dans une variable « let »
let nAddition = function (x, y) {
    return x + y;
};
</script>

console.log(nAddition(1,2));
// Résultet
   3

Parlant de bloc, avec le ES5 il fallait utiliser le « IIFE » (Immediately-Invoked Function Expression) pour restreindre la portée d’une variable à un bloc. Largement utilisé par jQuery notamment. Avec le ECMAScript 6, vous pouvez simplement déclarer une variable let (ou une constante) dans un bloc d’accolade {...} comme l’exemple plus haut.

// ES5
(function () {  // Ouvrir IIFE
    var sTemp = "...";
    ···
}());  // Fermer IIFE

console.log(sTemp); // Erreur, variable non disponible!

// ES6
{  // Ouvrir le bloc
    let sTemp = ···;
    ···
}  // fermer le bloc

console.log(sTemp); // Erreur, variable non disponible!

// Noter qu’on peut toujours faire une IIFE (Immediately Invoked Function Expressions) en ES6
// Dit le IIAF (Immediately Invoked Arrow Function)!

(() => {
    return 123
})();

Ce n’est pas trippant ça? Et vraiment plus léger et surtout combien plus facile à lire! Comme la IIFEs, vous devez terminer les IIAFs avec un point-virgule, pour éviter deux IIAFs consécutifs interprétés comme un appel de fonction (le premier étant la fonction, le second en tant que paramètre).

Et même si l’IIAF est un bloc, vous devez le mettre entre parenthèses, car il ne peut pas être une fonction appelée directement, en raison de la façon dont il est attaché. Notez que les parenthèses doivent être autour de la fonction « arrow ». Avec IIFEs vous avez le choix : vous pouvez soit mettre les parenthèses autour de l’ensemble de la déclaration ou tout simplement autour de l’expression de fonction.

Concaténation de chaine de caractères avec le « Template Strings »

Dans sa forme la plus simple :

`Ceci est une jolie petite chaîne du « Template Strings »`

Ouf, un peu plus je perdais l’avantage francophone de l’apostrophe françaises (’). Personnellement je convertis l’apostrophe (') de tout texte déposé sur le Web par l’apostrophe françaises (’). Résultat, aucun conflit avec les scripts JavaScript. D’ailleurs il n’est pas rare de tomber sur un site anglophone et même francophone (!) avec des exemples JavaScript bourré d’apostrophes français (’). Ils font l’inverse, des scripts qui ne fonctionnent pas bien entendu. Une astuce Wikienne pour éviter les attaques de type XSS (Cross-site Scripting). Faire sauter la forêt pour attraper son loup! Enfin, la concaténation de chaine de caractères comprime vraiment le code, avec les « template » ou gabarit de chaine de caractère entre un nouveau guillemet, le (`). Noter que je n’ai aucune idée, au moment d’écrire ces lignes, si cette technique est plus efficace en mémoire, historiquement très sollicitée par ce genre de manipulation...

On a donc :

Le guillemet simple pour les chaine normal : '
L’apostrophe françaises pour le texte : ’
Et le nouveau guillemet (inversé) pour les gabarits (templates) de concaténation : `

Et voilà un gabarit de chaine de concaténation avec les trois types de guillemets sans aucun caractère d’échappement! Noter l’interpolation avec le symbole $ à la manière du sélecteur jQuery!

var sMonNom = 'Django Blais';
let sMaPhrase = `Je m’appelle ${sMonNom}`;
console.log(sMonNom );

//Résultat
Je m’appelle Django Blais

//Autre exemple d’interpolation
var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}`

// Résultat
"1 + 2 = 3"

// Un superbe exemple
// Sur plusieurs ligne, les lignes seront préservé! YÉ!
var s = `a
    b
    c`;

// Exactement comme les sauts de ligne avec caractère d’échappement
assert(s === 'a\n    b\n    c');

// Unescaped un « template strings » avec raw
String.raw`Le "\n" est un saut de ligne avec ES6.`

Voyez, je dû adapter mon gestionnaire de contenu perso ce matin a cette nouvelle réalité. Il convertissait automatiquement en apostrophe française cette nouvelle apostrophe JavaScript! Quand je disais que c’était une révolution!

La classe JavaScript

La cerise sur le gâteau comme dit l’ECMAScript. Rends les modèles de classe plus faciles à utiliser, et encourage l’interopérabilité. La classe prend en charge l’héritage basé sur les prototypes, les appels « super », instance, méthodes et les constructeurs statiques. Notez l’interopérabilité entre la classe de base « Point » et son extension « CouleurPoint » à l’aide de la variable super.

<script type="module">
// Exemple simple
  class Point {
    constructor(x, y) {
      this.x = x, this.y = y;
    }
    enCaractere() { // A
      return '(' + this.x + ', ' + this.y + ')';
    }
  }
  let sPoint = new Point(25, 8);
  console.log(sPoint.enCaractere());

// Résultat
   (25, 8)

// Exemple pour étendre la classe
  class CouleurPoint extends Point {
    constructor(x, y, couleur) {
      super(x, y);
      this.couleur = couleur;
    }
    enCaractere() {
      return super.enCaractere() + ' en ' + this.couleur; // B
    }
  }

  let sPointCouleur = new CouleurPoint(25, 8, 'vert');
  console.log(sPointCouleur.enCaractere());

// Résultat
   (25, 8) en vert
</script>

Contrairement au « this », CouleurPoint.prototype.enCaractere fait un appel « super » (ligne B) à la méthode (à partir de la ligne A) qu’il a substituée. Appelons l’objet dans lequel le procédé est stocké, l’objet parent de cette méthode. Par exemple, CouleurPoint.prototype est l’objet du parent CouleurPoint.prototype.enCaractere().

Le super-appel à la ligne B comprend trois étapes:

Commencez votre recherche dans le prototype de l’objet parent de la méthode actuelle.
Recherchez une méthode dont le nom est enCaractere. Cette méthode peut être trouvée dans l’objet où la recherche a commencé ou plus tard dans la chaîne de prototype.
Appelez cette méthode avec le « this » courant. La raison pour ce faire est : la méthode de super-appelé doit être en mesure d’accéder aux mêmes propriétés d’instance (dans notre exemple, les propriétés de sPointCouleur).

Notez que même si vous définissez ou récupérer seulement une propriété (sans appeler de méthode), vous devez toujours tenir compte dans l’étape 3, parce que la propriété peut être mis en œuvre par l’intermédiaire d’un « get » ou d’un « set ».

Environments Environments provide storage space for variables, there is one environment per scope. Environments are managed as a stack. The environment on top of that stack is considered active. The following code is a sketch of how environments are handled.

Environnements

Environnement fournis un espace de stockage pour les variables, il y a un environnement par portée (ou bloc). Les environnements sont gérés comme une pile. L’environnement au-dessus de cette pile est considéré comme actif. Le code suivant est un exemple de la façon dont les environnements sont manipulés.

/**
* La fonction « environments » est spécial, elle a quelques variables
* internes de plus que les autres environnements.
* (La class "Environment" n’est pas montré ici)
*/
class FunctionEnvironment extends Environment {
  constructor(Func) {
    // [[FunctionObject]] is a function-specific
    // internal variable
    this.__FunctionObject__ = Func;
  }    
}
    
/**
* Pousse (Push) un environnement dans la pile
*/
function PushEnvironment(env) { ··· }
    
/**
* Supprime (Pop) le premier environnement de la pile (le plus haut)
*/
function PopEnvironment() { ··· }
    
/**
* Trouve (Find) le premier environnement de la pile (le plus haut)
*/
function GetThisEnvironment() { ··· }