Académique Documents
Professionnel Documents
Culture Documents
moderne
Par artragis
et Cygal
www.openclassrooms.com
2/18
Sommaire
Sommaire ........................................................................................................................................... 2
Lire aussi ............................................................................................................................................ 1
Le JavaScript moderne ...................................................................................................................... 3
L'histoire mouvemente de JavaScript ............................................................................................................................. 3
La prhistoire ............................................................................................................................................................................................................... 3
Redcouverte de JavaScript ....................................................................................................................................................................................... 4
Normalisation .............................................................................................................................................................................................................. 4
www.openclassrooms.com
Sommaire
3/18
Le JavaScript moderne
Par
Cygal et artragis
La prhistoire
www.openclassrooms.com
Le JavaScript moderne
4/18
C'est en 1995 qu'a eu lieu sur le web le dbut de la guerre des navigateurs. Netscape
Navigator 1 et Internet Explorer 1 taient les deux navigateurs les plus populaires, et
chacun se battait pour grappiller des parts de march l'autre. Une des stratgies
les plus utilises l'poque tait d'ajouter des amliorations propritaires puis
d'encourager les webmasters s'en servir. Les sites web ainsi crs ne fonctionnant
pas aussi bien chez le concurrent, les utilisateurs taient ainsi encourags installer
le navigateur prvu par le webmaster. Naturellement, ds qu'une fonctionnalit
devenait populaire, le concurrent l'implmentait aussitt, et le cycle pouvait
recommencer.
C'est dans ce contexte que Brendan Eich a t recrut par Netscape, toujours en 1995. Sa mission tait initialement d'intgrer le
langage fonctionnel Scheme Netscape 2 pour donner la possibilit des personnes peu exprimentes d'ajouter des effets
leurs pages. La direction de Netscape a insist pour que ce langage ressemble Java, qui allait lui aussi tre intgr pour rendre
possible la cration de composants plus srieux, les applets Java. Le nom JavaScript viendrait d'ailleurs de la volont d'attirer
l'attention des mdias sur ce nouveau langage, et d'entretenir la confusion avec Java. Nanmoins, ce sont deux langages trs
diffrents : Brendan Eich dclare s'tre principalement inspir de Scheme et Self pendant les 10 jours qu'il a eu pour concevoir un
prototype. Au-del du langage en lui-mme, c'est cette poque qu'est apparu DOM 0 qui permet d'utiliser JavaScript pour
interagir avec une page web. Par exemple, ce code permet d'afficher une popup l'utilisateur lors d'un clic sur un lien :
Code : HTML
<a href="#clickme" onclick='alert("Vous avez cliqu !")'>Cliquez-moi
!</a>
Au fil des annes, de nombreuses versions de JavaScript sont apparues dans Netscape et Internet Explorer, apportant chaque
fois leur lot de nouveauts. cette poque, l'utilisation de JavaScript dans des pages web sappelait DHTML, et de nombreux
mauvais livres en enseignaient les possibilits sans pour autant indiquer les bonnes pratiques. Les alert(), les curseurs
personnaliss, les menus droulants inaccessibles voire la neige sur les pages web taient une plaie pour les utilisateurs.
JavaScript tait alors considr comme un langage pour amateurs .
Redcouverte de JavaScript
Ce n'est que depuis le milieu des annes 2000 que les dveloppeurs ont compris que JavaScript pouvait tre utilis
judicieusement afin d'amliorer l'exprience de certains utilisateurs sans pnaliser les autres. C'est aussi cette poque que
l'objet XMLHttpRequest a t rendu disponible sur les principaux navigateurs, ouvrant la voie des sites web plus
dynamiques, capables de ne recharger qu'une partie des pages web : cette technique est connue sous le nom d'AJAX. Ruby on
Rails proposait ds 2005 l'utilisation d'AJAX de manire simple et transparente ; de nombreux frameworks ont suivi par la suite.
Cependant, crire du JavaScript restait rserv une certaine lite du fait des diffrences entre les navigateurs. Afin de gommer
ces diffrences, des bibliothques telles que jQuery, Prototype ou encore Mootols deviennent disponibles en 2005/2006. Elles
offrent notamment la possibilit de slectionner des lments de la page en utilisant de simples slecteurs CSS. Par exemple, si je
veux afficher tous les lments cachs d'une page ayant la classe secret, il me suffit d'crire
$('.secret[display="none"]').show(). Les apports de ces bibliothques vont au-del de ce simple exemple :
un simple appel de fonction permet de rcuprer des donnes du serveur via AJAX ;
il est facile de ragir des vnements tel qu'un clic ou une soumission de formulaire ;
de nombreuses animations tels que les fondus apportent des transitions plus douces ;
et de nombreuses autres fonctionnalits.
Contrairement ce qu'on pourrait croire, ces bibliothques ne dispensent pas de connatre et comprendre les concepts
JavaScript utiliss. Quoiqu'il en soit, ces bibliothques ont ouvert la voie une utilisation massive de JavaScript en facilitant
grandement l'criture de nombreux programmes allant du petit script l'application complte.
Normalisation
Pour s'assurer que JavaScript soit implment de la mme manire dans tous les
navigateurs, un standard spcifiant en dtail le fonctionnement du langage est une
condition ncessaire, mme si pas forcment suffisante. Le comit TC39 existe au sein
d'ECMA depuis 1996 pour raliser ce travail d'quilibriste : il s'agit la fois d'incorporer
les extensions les plus pertinentes et de proposer les volutions les plus prometteuse
pour le langage, le tout devant former un ensemble cohrent. Le langage ainsi spcifi
www.openclassrooms.com
Le JavaScript moderne
5/18
Parmi les fonctionnalits apportes par ES5 figurent des fonctions capables d'oprer sur des collections. Par exemple,
filter() prend en paramtre une fonction et retourne une nouvelle collection contenant les lments que la fonction a choisi
de conserver :
Code : JavaScript
var ages = [12, 89, 23, 45, 5, 37];
var majeurs = ages.filter(function(age) { return age > 18; });
// Dsormais, majeurs vaut [89, 23, 45, 37]
Le comit TC39 a dcid de ne pas s'arrter avec ECMAScript 5 et travaille aujourd'hui sur ECMAScript Harmony, une nouvelle
version prometteuse qui reprend certains lments d'ECMAScript 4 et qui vise faciliter l'utilisation de JavaScript dans des
applications modernes. La dernire section de cette news vous prsentera les nouveauts les plus intressantes de cette
nouvelle version d'ECMAScript.
L'assembleur du web
JavaScript a principalement volu en tant que langage de script pour les navigateurs. Cependant, son utilisation dpasse
aujourd'hui ce cadre, et cette section se propose aussi de vous introduire d'autres possibilits qui n'auraient pas t
imaginables il y a quelques annes.
Si vous tes intresss par ces technologies, sachez que Nesquik69 et Thunderseb nous proposent deux tutoriels de qualit sur
le Site du Zro : Dynamisez vos sites web avec Javascript ! et AJAX et l'change de donnes en JavaScript . Ils ne sont pas
spcifiques une bibliothque telle que jQuery et constituent un excellent moyen de comprendre le fonctionnement de
JavaScript tout en apprenant l'utiliser au mieux : il est ensuite trs facile d'utiliser jQuery, par exemple. Une autre excellente
ressource est JavaScript: The Good Parts qui couvre en profondeur les bonnes pratiques utiliser avec JavaScript.
www.openclassrooms.com
Le JavaScript moderne
6/18
Au niveau des mesures, il y a d'abord la performance ct client : diverses mesures dont le temps d'affichage sont effectues via
l'outil Real User Monitoring de New Relic. Cet outil permet aux dveloppeurs de savoir ce qui prend du temps en pratique sur la
page. Est-ce que c'est l'affichage des pubs ? Le tlchargement de jQuery ? Le traitement du JavaScript pour le navigateur ? C'est
un outil prcieux pour garder le site performant et rapide utiliser.
Du point de vue de l'activit de l'utilisateur, une analyse des pages
Logo Chartbeat
vues est faite via Google Analytics et XiTi. Au-del du suivi des
clics, l'activit sur chaque page est mesure via Chartbeat. tesvous en train de bouger la souris ou de faire dfiler la page ? C'est ce
qui indique Chartbeat et au Site du Zro que vous tes en train de lire cet article. Si vous dcidez de laisser un commentaire, les
lettres tapes permettront de savoir que vous avez commenc taper un message, avant mme que vous ne dcidiez de le
soumettre. Ces statistiques ont de nombreuses utilits potentielles. Un exemple farfelu : elles pourraient tre utilises pour
amliorer les articles. En effet, si tout le monde arrte sa lecture aprs ce passage, c'est peut-tre qu'il tait dcourageant.
Enfin, la plus grande partie du JavaScript crit sur le Site du Zro concerne les aides la navigation. Elles sont nombreuses, mais
jamais obstrusives : il est possible d'utiliser les mmes fonctionnalits sans JavaScript, c'est simplement moins agrable. Il y a
plusieurs dizaines de telles fonctionnalits. Citons en quelques-unes :
tous les formulaires du site sont quipes de la zForm, permettant de faciliter l'ajout de balises zCode permettant d'crire
du contenu plus riche (liens, titres, mise en forme, etc.),
la sauvegarde automatique intgre la zForm permettant de ne pas perdre le contenu crit suite une fausse
manipulation,
le carrousel de la page d'accueil met en avant diffrents contenus les uns aprs les autres,
les spoilers ne sont affichs en JavaScript qu' la demande de l'utilisateur,
l'auto-compltion lors de la recherche de membres,
l'affichage de la timeline twitter ou du flux RSS des membres directement sous leur avatar,
le calcul du prix total lors d'une commande de livres,
ou encore l'affichage des avatars des auteurs d'un tutoriel au survol de leur pseudo.
Certains ajouts ont une utilit limite, d'autres comme la sauvegarde automatique sont rapidement devenus indispensables, mais
rien de toute cela n'aurait t possible sans JavaScript.
Applications web
www.openclassrooms.com
Le JavaScript moderne
7/18
Logo CoffeeScript
Ce code permet d'changer les deux variables sans passer par une variable temporaire. Le compilateur CoffeeScript produit alors
ce code JavaScript qui sera excut sur le navigateur :
Code : JavaScript
var arroseur = "Jacques";
var arrose = "Martin";
var _ref;
_ref = [arroseur, arrose];
arrose = _ref[0]
arroseur = _ref[1];
C'est bien plus verbeux et dsagrable lire et crire. CoffeeScript dispose de nombreuses autres fonctionnalits permettant au
programmeur de se simplifier la vie. Parmi ces fonctionnalits, citons :
une syntaxe sans accolades inspire de Python,
les listes dfinies par comprhension, existant notamment en Python, Haskell ou Erlang,
une notation courte pour les fonctions anonymes, omniprsentes dans les langages fonctionnels mais existants aussi
dans des langages tels que C#, PHP ou Scala,
ou encore la possibilit d'utiliser un systme de classes et d'hritage plus classique.
CoffeeScript apporte un bnfice tangible au dveloppement JavaScript et fait partie des langages qui inspirent le comit
ECMAScript. D'autres compilateurs vers JavaScript existent pour rpondre diffrents besoins.
www.openclassrooms.com
Le JavaScript moderne
8/18
Les minifieurs ont pour rle de rendre un programme JavaScript le plus petit possible afin d'acclrer le transfert vers la
navigateur. En minifiant et compressant jQuery, la taille du code passe de 247KB 32KB : c'est un gain d'espace non ngligeable
! Les minifieurs utilisent de nombreuses techniques pour gagner de l'espace. Ce tableau rsume quelques-unes des oprations
ralises par UglifyJS, l'outil utilis par jQuery :
Description
Avant
Aprs
Renommage
Conditions
Indexation
foo["bar"]
foo.bar
Code "mort"
var a = 1;
Modules JavaScript
Malgr l'existence de nombreuses bibliothques crites en JavaScript, il n'y a pas de moyen standard de les crire. Premirement,
il est difficile de cacher dans une bibliothque les fonctions internes, que l'utilisateur ne doit pas manipuler. Ensuite, la gestion
des dpendances se fait de manire totalement ad hoc : on inclut dans l'ordre les bibliothques ncessaires nous-mmes, au lieu
de dire pour chaque bibliothque quelles sont les dpendances, ce qui permettrait au moteur JavaScript de grer le chargement
lui-mme.
Pour rendre notre propos plus concret, admettons qu'on veuille crire un module JavaScript de correction orthographique. C'est
une tche potentiellement complexe ncessitant de dcouper notre code en de nombreuses fonctions, mais au final l'utilisateur
ne va se servir que d'une seule fonction : liste_erreurs(), qui va retourner la liste des erreurs potentielles. Voyons un
exemple d'utilisation d'une telle bibliothque :
Code : HTML
<script type="text/javascript" src="correction.js"></script>
...
<script>
function surligner_erreurs(texte) {
var erreurs = Correction.liste_erreurs(texte);
for (var i in erreurs) {
surligner(erreurs[i].debut, erreur[i].fin,
erreurs[i].alternatives);
}
}
</script>
On rcupre ainsi la liste des erreurs potentielles, et la fonction surligner() (dfinie dans un autre module) s'occupe de
www.openclassrooms.com
Le JavaScript moderne
9/18
surligner le texte contenant les erreurs et d'ajouter un vnement qui se dclenchera lorsque l'utilisateur cliquera sur le texte
surlign. L'utilisateur n'aura plus alors qu' choisir la version correcte. Pour proposer une telle interface, la solution la plus simple
est de placer dans correction.js un objet JavaScript :
Code : JavaScript
var Correction = {
dictionnaire: undefined,
pour
return erreurs;
Correction.dictionnaire = Correction.init_dict();
Le problme qui se pose ici est que n'importe quel code est capable de modifier le dictionnaire ou dappeler des fonctions
internes de Correction. D'un point de vue conception, c'est problmatique : toutes les variables et fonctions sont publiques.
On est oblig de placer nos fonctions comme membres de l'objet, ce qui n'est pas agrable et moins pratique pour dbugger.
L'ide est donc de cacher dictionnaire, mais d'exposer les fonctions le manipulant. Comment cacher une variable ? En
JavaScript, la porte des variables est la fonction. Encapsuler notre code dans une fonction nous permettra de n'exposer que les
fonctions qui nous intressent :
Code : JavaScript
var Correction = (function() {
var dictionnaire;
function
function
function
function
function
init_dict(...) { ... },
tokenize(...) { ... },
contexte(...) { ... },
erreurs_mot(...) { ... },
liste_erreurs(...) { ... },
dictionnaire = init_dict();
return {
liste_erreurs: liste_erreurs
};
)();
Intressons-nous ici d'abord la dclaration de Correction (var Correction = (function() { ... })();.
Pourquoi autant de parenthses ? Il s'agit en fait ici de dclarer une fonction, de lappeler immdiatement aprs sa dclaration,
www.openclassrooms.com
Le JavaScript moderne
10/18
puis de stocker l'objet reu dans Correction. Notre variable Correction contient dsormais liste_erreurs qu'il est
possible dappeler depuis l'extrieur. Grce au concept de closure, liste_erreurs peut manipuler le dictionnaire, et c'est le
seul moyen de le manipuler ! Nous venons ici de faire quelque chose de trs intressant : on n'expose l'utilisateur que l'interface
qu'il doit utiliser, et le reste est cach.
Des variantes de cette approche sont utilises par de nombreuses bibliothques, dont jQuery (cf. le code) qui commence avant
tout par dclarer une fonction puis dclare la fin du code que window.jQuery = window.$ = jQuery;, ce qui permet
d'ajouter jQuery et $ aux variables utilisables partout dans la page web.
RequireJs
Logo Require.js
Pour demander le chargement d'un fichier puis d'excuter du code, il suffit d'utiliser require(). Ainsi,
require(["correction.js"], liste_erreurs); se chargera dappeler la fonction liste_erreurs une fois le
chargement de correction effectue.
Pour dfinir un module et ses dpendances, c'est tout aussi simple : il suffit d'utiliser define. Supposons que nous avons
spar la correction et la tokenization (qui est utilise ailleurs). On peut demander le chargement de la tokenization de cette
manire :
Code : JavaScript
define(["./tokenize"], function() {
...
});
return {
liste_erreurs: liste_erreurs
};
RequireJS permet avant tout de faciliter le dveloppement en permettant au dveloppeur de dcouper ses fichiers et de dclarer
ses dpendances comme il le souhaite. Il devient donc facile d'inclure des bibliothques et leurs dpendances via un simple
appel require(), ce qui facilite le dveloppement. Une fois que le site passe en production, il suffit de demander
RequireJS d'optimiser le code utilis : regrouper les modules utiliss, et minifier le tout. Le dveloppement web devient alors plus
facile !
Un autre intrt est qu'un code proprement spar en modules offre de nouvelles opportunits d'optimisation. Au lieu d'envoyer
tout le code JavaScript d'un coup, il devient possible d'identifier les modules ncessaires ds le chargement et ceux qui peuvent
au contraire attendre plus longtemps. C'est exactement ce qu'a dcid de faire Twitter en mai 2012, et cela a aid rduire le temps
d'affichage du premier tweet par cinq, ce qui n'aurait pas t possible sans un dcoupage propre en modules.
www.openclassrooms.com
Le JavaScript moderne
11/18
l'opportunit de corriger ses erreurs au plus tt. Un autre exemple est celui d'un panier web : le calcul du prix est souvent fait en
JavaScript (pour une actualisation instantane du prix) mais aussi sur le serveur lors de la validation finale. D'une manire
gnrale, plus il y a de donnes afficher et modifier dans une page web, plus le code sera dupliqu sur le navigateur et le
serveur : une fois pour rendre la visite plus rapide et agrable, et l'autre fois pour traiter les donnes relles et les sauver pour
plus tard.
Une solution pour viter ce problme est d'crire tout dans un langage donn, puis de convertir en JavaScript les parties qui
vont s'excuter sur le serveur web. C'est la solution adopte par OPA et Ocsigen, pour ne citer qu'eux.
Une autre solution qui semble avoir plus de popularit est d'utiliser
JavaScript sur le serveur web ! Il n'y pas alors se demander comment
Logo Node.js
est-ce que notre JavaScript va tre gnr. Node.js utilise cette
approche, et permet aux dveloppeurs de spcifier le comportement du
serveur directement en JavaScript, en tirant avantage de la facilit de
dclarer des fonctions pour encourager un style de programmation
base de callbacks, ce qui vite d'tre handicap par les entres/sorties bloquantes. Pour crer un serveur, il suffit d'crire le code
suivant :
Code : JavaScript
var http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(8888);
On passe ici http.createServer une fonction qui sera appele pour chaque requte. Node.js rutilise le concept de la
programmation vnementielle : une boucle se charge de lancer les fonctions prtes tre excutes, c'est--dire n'attendant plus
la fin d'une entre/sortie telle que la lecture d'un fichier ou une requte vers une base de donnes. Typiquement, le code cidessus ne fait rien tant que personne n'accde au serveur, et excute notre fonction une fois que quelqu'un y accde avec son
navigateur.
Jusque-l, la seule diffrence avec le fonctionnement d'un serveur classique est l'utilisation de JavaScript. La vraie diffrence se
fait sentir au moment de faire des entres/sorties pendant le traitement d'une requte. C'est trs frquent : il faut bien accder
une base de donne quelconque pour savoir quelles informations afficher.
Code : JavaScript
var mysql = require("db-mysql");
new mysql.Database().connect(function() {
this.query().select(["auteur",
"texte"]).from("billets").limit(10)
.execute(function(error, billets) {
http.write("Affichage de " + length(billets) + "
billets");
// Boucle d'affichage
});
});
Dans ce code, on commence par se connecter une base de donnes, puis on dclare une requte SQL. Pour schmatiser, l'appel
execute() se fait en trois temps :
1. excution de la requte SQL,
2. attente de la rponse,
3. et traitement du rsultat (pour affichage, par exemple).
Node.js s'assure que le serveur ne chme pas pendant la phase d'attente. Une fois que la requte est termine, la boucle
www.openclassrooms.com
Le JavaScript moderne
12/18
d'vnements s'assurera que la fonction passe execute soit excute. C'est pour cette raison qu'on l'appelle callback
(rappel) : elle est appele une fois qu'on a besoin d'elle.
Alors que les entres/sorties sont le problme numro un des sites voulant passer l'chelle, Node.js propose donc une
alternative permettant de limiter ce problme. Bien sr, ce n'est qu'un compromis, et d'autres problmes spcifiques Node.js se
posent : par exemple, l'utilisation de nombreux callbacks imbriqus rend le code plus difficile lire. Des modules Node.js existent
pour pallier ce problme, tels que node-promise o il suffit de spcifier les dpendances entre les fonctions, la bibliothque se
chargeant du reste.
"name": "correction",
"description": "Liste les alternatives possibles des mots mal
orthographis d'un texte",
"version": "0.1alpha1",
"author": "Robert Larousse",
"dependencies": {
"tokenize": "0.3",
"debug": "*"
},
}
Ainsi, avant d'installer ce module, Node.js devra s'assurer d'avoir install la version 0.3 de tokenize et une version
quelconque de debug. Grce cette convention, une plateforme comme Node.js jouit d'un large cosystme de modules
permettant chaque dveloppeur de ne pas avoir rinventer la roue chaque projet.
Logo CommonJS
Un langage moderne
Nous l'avons vu : le langage JavaScript rend trs difficile l'utilisation de certains concepts aussi simples que les modules,
longtemps acquis dans d'autres langages. On pourrait penser que le langage n'a eu du succs que parce que c'tait la seule
solution dans le navigateur, mais ce serait oublier que c'est un langage qui reste moderne en offrant des fonctionnalits
permettant d'crire du code expressif et puissant et qui ne se trouvent pas ncessairement dans d'autres langages.
Les fonctions, tableaux ou encore les expressions rgulires sont tous des objets qu'il est possible de manipuler, passer en
paramtre et de retourner la fin d'une fonction. Cela permet JavaScript d'utiliser le paradigme fonctionnel quand c'est le plus
adapt.
www.openclassrooms.com
Le JavaScript moderne
13/18
On compte aussi parmi les fonctionnalits le tout aussi controvers que puissant "prototype". C'est en effet une fonctionnalit
relativement peu utilise par les dveloppeurs permettant entre autres d'obtenir de l'hritage. Intressons-nous ici plutt l'ajout
de fonctionnalit des objets existants. Par exemple, si vous dsirez tester l'galit de deux Array, il n'y a pas de moyen simple
de faire a. C'est donc l'opportunit de dclarer une telle fonction :
Code : JavaScript
Array.prototype.equals = function (otherArray) {
if (!Array.isArray(otherArray)) {
return false;
}
};
return this.every(function(element, i) {
if (Array.isArray(element)) {
return element.equals(otherArray[i]);
} else {
return element === otherArray[i];
}
});
Dsormais, [1, 2, 3].equals([1, 2, 4]) renvoie faux. Cette astuce est utilise pour s'assurer que les fonctions
ajoutes dans ECMAScript 5 seront disponibles dans tous les navigateurs : si elles n'existent pas, il suffit de les crer. On appelle
ceci la "feature detection". Elle permet aux dveloppeurs d'crire du JavaScript moderne qui sera excut rapidement dans les
navigateurs rcents, mais qui fonctionnera tout de mme dans les navigateurs les plus vieux. C'est ainsi que es5-shim mule de
nombreuses fonctions ajoutes dans ECMAScript 5 et que Modernizr apporte des fonctionnalits ajoutes rcemment dans
HTML5 et CSS3. chaque fois, les navigateurs rcents utilisent une implmentation efficace, et les autres excuteront une
mulation de ces fonctionnalits : moins rapide, mais fonctionnelle. L'adoption des technologies rcentes n'est donc pas freine
par les vieux navigateurs.
Une autre force de JavaScript se situe dans les closures, ou fermetures en franais. En pratique, ce sont simplement des
fonctions qui sont dclares dans le corps d'une autre fonction, et qui accdent aux membres de la fonction parente. C'est un
concept la fois simple et puissant qui permet par exemple de simuler les membres privs en JavaScript, comme nous l'avons vu
plus haut dans notre module Correction. Une des possibilits offertes par les closures est l'amlioration des performances en
ne calculant qu'une fois certaines expressions. C'est avantageux pour les accs au DOM qui peuvent tre long suivant le
navigateur. Voyez ce code :
Code : JavaScript
//exemple sans closure
var addDescription = function(texteDescription){
var baliseDescription = document.getElementById('description');
//appel au DOM
var child = document.createElement('p');
child.innerHTML = texteDescription;
baliseDescription.appendChild(child);
}
addDescription('premire description'); //un appel au DOM
addDescription('deuxime description'); //deuxime appel au DOM ...
//avec closure
var addDescription = (function(){
var baliseDescription = document.getElementById('description');
//appel au DOM
return function(texteDescription){
var child = document.createElement('p');
child.innerHTML = texteDescription;
baliseDescription.appendChild(child);
}
})();//premier appel au DOM
addDescription('premire description'); //pas d'appel au DOM
addDescription('deuxime description'); //pas d'appel au DOM ...
www.openclassrooms.com
Le JavaScript moderne
14/18
Pour vous assurer du gain de performance entre diffrentes solutions que vous avez cod, vous pouvez vous rendre sur le site
JSPerf. Un petit test pour l'exemple ci-dessus permet par exemple de comparer les performances des deux versions suivant les
navigateurs.
ECMAScript Harmony
Comme nous le disions dans l'historique, le comit TC39 responsable de l'volution d'ECMAScript travaille actuellement sur la
prochaine version : ECMAScript Harmony. Afin d'viter les dboires de la version 4 qui n'a jamais abouti et de prendre en compte
les diffrents usages de JavaScript, des objectifs prcis ont ts dfinis. L'objectif numro un est de concevoir un langage plus
adapt pour :
les applications complexes,
les bibliothques utilises par ces applications,
et les compilateurs vers JavaScript.
Il ne s'agit donc pas de crer un langage qui soit thoriquement mieux , mais bien de rpondre des problmes concrets. Le
deuxime objectif est de produire une spcification qui puisse tre implmente en JavaScript : cela permettra de :
utiliser et de tester ECMAScript 6 avant qu'il soit prt dans nos navigateurs,
d'avoir disposition une implmentation de rfrence,
et potentiellement d'utiliser cet interprteur sur les navigateurs les plus rticents, la manire d'es5-shim pour
ECMAScript 5.
Parmi les objectifs restants, un troisime objectif est d'intgrer directement dans le langage les patrons de conception les plus
rpandus en JavaScript pour les intgrer dans le langage. Paul Graham de YCombinator se demande dans un de ses essais si les
patrons de conceptions ne sont pas luvre d'un "compilateur humain". Si c'est le cas, c'est certainement une indication d'un
manque dans le langage qui ne demande qu' tre combl. En JavaScript, le manque le plus vident en concerne les modules.
Modules
Comme nous l'avons vu prcdemment, les "modules" ont ts dvelopps sans l'aide relle du langage, mais seulement avec
des closures (IIFE) et des conventions (CommonJS). ECMAScript Harmony souhaite reprendre ces excellentes ides en les
intgrant dans le langage pour imposer ces standards tablis, et les rendre plus facile utiliser. On peut ainsi voir les modules en
ECMAScript Harmony comme du sucre syntaxique : on pourrait faire sans, mais ils sont dsormais bien plus faciles crire. Par
consquent, la bibliothque dcrite plus haut peut se rcrire plus simplement :
Code : JavaScript
import "tokenize.js";
module Correction {
var dictionnaire = init_dict();
function init_dict(...) { ... }
...
}
Il sera dsormais bien plus simple d'crire des modules sans erreur, en spcifiant facilement les mthodes et variables qu'on veut
rendre disponibles tout le monde et les dpendances ncessaires, la faon de CommonJS et RequireJS. Mieux, cette nouvelle
syntaxe permet d'expliciter qu'on est bien en train d'crire un module destin tre utilis ailleurs, ce qui amliore la lisibilit du
code. Un langage comme CoffeeScript pourrait aisment implmenter une telle syntaxe, tant donn qu'elle est de toute faon
destine tre employe dans le futur.
Templates
Ds lors qu'on fait un appel AJAX en JavaScript, il est ncessaire de prsenter l'utilisateur les donnes reues. Ces donnes
www.openclassrooms.com
Le JavaScript moderne
15/18
sont souvent sous la forme de JSON, et il faut donc les transformer en HTML avant affichage. C'est une tche trs classique en
dveloppement web et il existe des dizaines de moteurs de template sur le web. Sur le Site du Zro, karamilo a mme dvelopp
les KaraTemplates qui ont t utiliss pour faciliter l'criture de contenu sur le site. PHP lui-mme a une syntaxe pour crire des
templates facilement : par exemple, <?= $score ?> est quivalent <?php echo $score; ?>.
En JavaScript, la situation est toute autre, et il n'y a pas actuellement de solution simple et standard pour crire des templates.
Prenons l'exemple de jQuery : les jQuery templates ont t dprcies et ne sont plus maintenues, et la solution du futur,
JsRender n'est mme pas encore en beta. D'autres solutions populaires tels que Mustache ne proposent pas de protection et ne
garantissent pas que le HTML rendu sera bien form. Cela tmoigne la fois de la difficult de l'criture d'une telle solution en
JavaScript pur et du besoin de tels templates. C'tait l'occasion pour le comit de proposer une solution pour crire des templates
qui soit facile utiliser, scurise et performante : les quasi-literals. Voici un exemple :
Code : JavaScript
url = "http://example.com/",
message = query = "Hello & Goodbye",
color = "red",
safehtml`<a href="${url}?q=${query}"
onclick=alert(${message})>${message}</a>`
(Vous remarquerez que la coloration syntaxique n'est pas encore adapte ECMAScript Harmony)
Cette syntaxe n'est en faite que du sucre syntaxique. Plus prcisment, le code crit plus haut est strictement quivalent au
charabia suivant :
Code : JavaScript
var $$callSite0 = Object.freeze({
raw: Object.freeze(["<a href=\"","?q=","\"
onclick=alert(",")>","</a>"]),
cooked: Object.freeze(["<a href=\"","?q=","\"
onclick=alert(",")>","</a>"])
});
url = "http://example.com/",
message = query = "Hello & Goodbye",
color = "red",
safehtml($$callSite0, (url), (query), (message), (color), (message))
La mthode safehtml sera intgre JavaScript, et lors de son appel, elle produit simplement le rsultat HTML suivant :
Code : HTML
<a href="http://example.com/?q=Hello%20%26%20Goodbye"
onclick=alert('Hello \x26 Goodbye')
style="color: red">
Hello & Goodbye
</a>
Les sauts la ligne ont ts insrs manuellement, mais l'ide est l : safehtml vous permet de produire du HTML scuris en
toute confiance tant donn que la fonction prend en compte le contexte et sait quels caractres il faut transformer. On vite non
seulement le HTML mal format qui peut "casser" l'affichage d'un site web mais aussi des surprises telles que les failles XSS qui
sont une plaie relle pour de nombreux sites web, y compris le Site du Zro qui en a corrig plusieurs au fil des annes et des
petits rigolos. Il est naturellement possible de dfinir sa propre fonction qui pourra avoir d'autres intrts : par exemple
l'internationalisation, en choisissant le texte afficher suivant la langue de l'utilisateur.
Plus gnralement, c'est aussi un trs bon moyen d'crire un Domain-Specific Language (DSL). Voyons quelques exemples
simples :
Domaine
appel jQuery
Code
$`a.${className}[href=~'//${domain}/']`
www.openclassrooms.com
Le JavaScript moderne
Requte HTTP
16/18
GET`http://example.org/service?a=${a}&b=${b}`
Les templates sont donc un bon exemple des objectifs que s'est fix ECMAScript Harmony. Cette nouvelle fonctionnalit :
correspond un problme rcurrent en JavaScript ;
dispose d'une implmentation pouvant tre teste ds aujourd'hui ;
s'intgre bien dans le langage et offre de nombreuses possibilits (cf. tableau plus haut) ;
s'inspire de bonnes ides existantes dans d'autres langages : (les macros hyginiques de Scheme, l'infrence de type, ou
encore les quasi-quotes de Lisp).
La notation courte pour les lambdas permet d'crire des fonctions anonymes plus simplement. Voyons la diffrence en reprenant
un exemple dj utilis :
Code : JavaScript
var ages = [12, 89, 23, 45, 5, 37];
var majeurs = ages.filter(function(age) { return age > 18; });
var majeurs = ages.filter(age => age > 18)
// majeurs == [89, 23, 45, 37];
Cette fois, ce n'est pas uniquement la syntaxe qui change, et il y une lgre diffrence quant la valeur de this dans chacune des
fonctions. Nanmoins, dans tous les cas o this n'est pas utilis, ces deux formes sont quivalentes.
Dans cette nouvelle version d'ECMAScript, lLes compilateurs vers JavaScript ne seront pas en reste. En particulier, une nouvelle
forme de tableaux va faire son apparition. En effet, les tableaux JavaScript ne sont que des objets : l'indice est stock sous forme
de chane ce qui implique une conversion entier/chane l'excution. Ainsi, le tableau [23, 42, 118] est en fait quivalent
l'objet {"0": 23, "1": 42, "2": 118, "length": 3}, ce qui est une source importante d'inefficacit. C'est pour
cette raison qu'ECMAScript Harmony facilitera la manipulation de donnes compactes : il incorpore des tableaux typs (inspirs
de WebGL) et des bit fields qui permettront de reprsenter des donnes binaires de manire compacte et efficace. C'est une
fonctionnalit essentielle pour les langages compilant vers JavaScript. Ainsi, LLJS utilise ces tableaux pour compiler un sousensemble du JavaScript vers... du JavaScript. La diffrence est que la mmoire est gre explicitement via les tableaux typs, ce
qui rend le code illisible pour un humain mais qui ncessite beaucoup moins d'efforts de la part du ramasse-miettes du moteur
www.openclassrooms.com
Le JavaScript moderne
17/18
Sources
YUI Theater Dave Herman: The Future of JavaScript (48 min.)
JavaScript: The World's Most Misunderstood Programming Language
ECMAScript Wiki (modules, quasis, destructuring, iterators, let, shorter function syntax)
Slides de la prsentation de Node.js la jsconf 2009
JavaScript Weekly
Merci Hellish, Arthur, Nesquik69, bluestorm, Golmote et Kineolyan pour leurs relectures et l'quipe du site pour son travail de l'ombre.
Partager
www.openclassrooms.com