L'atelier de Christophe Porteneuve sur JavaScript aborde l'évolution de la norme ECMAScript, mettant l'accent sur les versions ES2015 et suivantes, ainsi que sur l'importance de Babel pour la transpilation afin d'utiliser les dernières fonctionnalités. Le document explore la compatibilité des navigateurs avec ces normes et fournit des recommandations sur l'intégration de Babel dans différents environnements de développement. Enfin, l'atelier mentionne également l'utilisation de TypeScript et de Flow pour enrichir le développement JavaScript avec des annotations de type.

1. JavaScript : le
futur, c’est
maintenant !Un atelier de àChristophe Porteneuve MS experiences 2016

2. whoami
var christophe = {
age: 38.91991786447639,
family: { wife: 'Élodie', son: 'Maxence' },
city: 'Paris, FR',
company: 'Delicious Insights',
trainings: ['JS Total', 'Node.js', 'Git Total'],
webSince: 1995,
claimsToFame: [
'Prototype.js',
'Ruby On Rails',
'Bien Développer pour le Web 2.0',
'Prototype and Script.aculo.us',
'Paris Web'
]
}

3. ES2015+
gni ?!

4. ES6 ou ES2015 ?
Rappel : ES = ECMAScript = standard officiel de JavaScript.
Avant 2015, on disait ES6, ES7…
Par exemple, ES3 = 1999, ES5 = 2009, ES6 = 2015
Mais depuis 2015, on sort une version par an (en juin).
On « met la pression » de tenue à jour en numérotant par
année.
Les noms officiels sont donc désormais ES2015, ES2016,
etc.

5. Et si on avait besoin de
rien ?
La prise en charge native est bien meilleure que ce qu’on
croit.
Edge 14 = 93%
Firefox 52 = 94%
Chrome 53 / Opera 40 = 97%
Safari 10 (dont iOS 10) = 100%
Node 6.5 = 97%
Et « 90 % » ça suffit en général largement

6. OK mais… dans la vraie
vie…
Pas encore de solution propre aux modules ES2015 natifs.
Vous savez ce truc qui déboîte :
import React, { PropTypes } from 'react'
export default function Gauge ({ value, max = 100 }) {
return <LinearProgress mode='determinate' value={value} max={max} />
}
IE (même 11), Firefox < 45, Chrome < 49, Opera < 36, Safari
< 10, iOS < 10, Node < 6, Android Browser…

7. Et ES2016+, alors ?
En plus on n’a parlé que de ES2015 là, mais on a ES2016,
non ?
Et l’an prochain, avec ES2017 on fait quoi ? Et l’année
d’après ?

8. ça roxxe des poneys

9. Principe
Transpileur : source ➡ autre source
En l’occurence, « autre source » peut descendre jusqu’à
ES5
L’idée : utiliser les dernières specs aujourd’hui (du moment
qu’elles sont transpilables).
La performance n’est, en pratique, pas un problème.
(En pratique, presque tout ES2015 est transpilable, sauf les proxies)

10. Babel et l’écosystème JS
Babel est téléchargé (npm) plus de 57K/jour
Environ 2 000 modules en dépendent
Quand Babel a un souci, l’écosystème JS a chaud…
(on y reviendra)Intégré avec l’univers
A permis l’essor (enfin !) d’ES2015+ dans des projets de
premier plan (React, Ember 2, Aurelia, JSPM…) et leurs
utilisateurs (Facebook, Airbnb, Instagram, etc.)

11. Pérennité de Babel
Né en 2014, le bébé de Sebastian McKenzie .
Désormais 250+ contributeurs.
Comme Facebook l’a jugé critique à la mission, ils ont fait
comme d’hab’ : on embauche le créateur et les plus gros
contributeurs, juste pour continuer.
Élément critique d’infrastructure pour beaucoup de grosses
boîtes, et 100% FLOSS, donc on est tranquilles.
On aura toujours besoin de Babel pour jouer tôt avec les
fonctionnalités futures (ce qui est essentiel au processus du
TC39).

12. Inutile de tout transpiler !
Depuis Babel 6, on choisit les syntaxes qu’on veut transpiler.
Tout le reste est laissé tel quel (considéré natif).
Plus la prise en charge native augmente, moins on a besoin
de transpiler de portions de code. On a tout intérêt à éviter
l’approche « bulldozer » hors des PoC / démos / tutos.
On gagne en perfs au build (transpilation) et à l’exécution
(code natif plutôt que polyfillé).
Notez toutefois que le code transpilé par Babel a des performances remarquables.

13. Plugins
Syntaxes et transforms
Un plugin de syntaxe permet au parser de reconnaître une
syntaxe au sein du flux JS. Mais Babel ne la transpile pas
pour autant.
Un plugin de transform(ation) applique le transpiling
correspondant pour aboutir à de l’ES5. Ils exploitent
automatiquement les éventuels plugins de syntaxe dont ils
ont besoin.
Mais : Babel propose actuellement plus de
60 transforms, dont 21 rien que pour ES2015 !
ça fait du monde

14. Presets
On a donc la notion de preset : des groupes thématiques de
plugins pour un but précis. On en compte…
5 officiels (es2015, es2016, es2017, latest et
react),
4 expérimentaux dédiés aux stades TC-39 (stage-0 à
stage-3),
et plus de 750 communautaires !
Par exemple, latest transpile l’univers (tout ES2015+),
mais les contribs ont latest-minimal, idéal en Node, qui
feature-detect point par point
On peut bien sûr mélanger presets et plugins spécifiques.

15. Bien plus qu’ES2016
On l’a vu, Babel gère déjà ES2016, ES2017, et les stades
qui alimenteront les versions ultérieures. Par exemple :
object spread/rest et static, qui sont au stade 2
le binding operator qui est au stade 0
Mais on a aussi des plugins (officiels !) de syntaxes tierces
(notamment JSX et les annotations Flow), de conversion de
modules (ex. ES2015 ➡ CommonJS), de minification /
optimisation (notamment pour React).

16. Comment je lui dis ?
Soit via un fichier .babelrc (marche partout)
Soit via une clé "babel" dans le package.json (si tu
transpiles au sein d’un script npm).
{
"presets": ["latest-minimal"],
"plugins": [
"transform-object-rest-spread", "transform-class-properties",
"transform-function-bind"
]
}
Du coup il faut avoir les modules :
npm install --save-dev babel-preset-latest-minimal
babel-transform-object-rest-spread babel-transform-class-properties
babel-transform-function-bind

17. Jusqu’où je
« babelize »
?

18. Côté browser (si IE9+)
En gros, il te faut tout. IE9 a 100% d’ES5 (hors le mode
strict), mais 0% d’ES2015. IE10 en a 3%, IE11… 11%. Donc
bon.
"presets": ["es2015"] // ou "latest" si tu veux E2015+

19. Côté browsers
(evergreens)
Tu prends les 2 dernières versions (façon Autoprefixer), tu
examines tes besoins et la , et tu listes
ce qui manque… Exemple :
table de compatibilité
"plugins": [
"transform-es2015-parameters",
"transform-es2015-destructuring",
"transform-es2015-spread",
"transform-async-to-generator",
"transform-transform-runtime",
"transform-regenerator"
]
(Pour Safari, qui rame loin, j’ai limité à 10+)

20. Node 4.x LTS
On a des , maintenus par la communauté.
Exemple :
presets dédiés
"presets": ["es2015-node4", "es2016-node4"], // ou ["latest-minimal"]
"plugins": ["transform-regenerator"]
Mais c’est bon avec Node 4, là… Dans quelques jours la
nouvelle LTS c’est Node 6 !

21. Node 6.x LTS
Excellente prise en charge native de ES2015+, le preset
communautaire est donc nettement plus léger.
"presets": ["latest-node6"] // ou ["latest-minimal"]

22. Electron
Electron 1.4.1 est basé sur Chromium 53, Node 6.5 et v8
5.3, autant dire que vous avez un gros, gros paquet d’ES
pris en charge en natif (quasiment tout ES2016 et diverses
parties d’ES2017).
Vu que le v8 est partagé, la meilleure approche est sans
doute :
"presets": ["latest-minimal"]

23. Comment j’intègre Babel dans
mon EDI ?

24. Visual Studio Code
ext install vscode-babel-coloring
ext install theme-monokaiextended # meilleure différenciation visuelle

25. Visual Studio
dans la dernière version.ES2015 est pas mal intégré
(mais vous n’aurez pas d’image parce que VS 2015 Community est trop gros pour mes VM Windows)

26. JetBrains
(IntelliJ, WebStorm, PHPStorm, etc.)
Les versions 2016 récentes (ex. +)
intègrent ES2015 en natif, ainsi que Babel comme watcher.
WebStorm 2016.2

27. Eclipse
#compassion
Désespérément à la rue (et lent, et lourd…) mais de
valeureux membres de la communauté maintiennent
, basé sur l’excellent .
Tern
IDE Tern.js

28. Comment j’intègre Babel dans
mon éditeur ?

29. Sublime Text 3
Installer puis le paquet (pas le paquet
ES.Next). Idéalement, faire de « JavaScript (Babel) » la
syntaxe par défaut pour les fichiers .js.
PackageControl Babel

30. Atom
Bonne prise en charge en natif ; nombreuses extensions
possibles avec les paquets et .language-babel atom-ternjs

31. Brackets
Gestion correcte en natif, on aura besoin de l’extension JSX
si on utilise cette syntaxe complémentaire.

32. Notepad++
Non, je plaisante.
Sidéré qu’autant de que des gens s’en servent encore…

33. Vim
Évidemment, on peut tout faire.
Les trois plugins les plus utilisés sont ,
et .
vim-javascript vim-jsx
es.next.syntax.vim

34. Emacs
Évidemment… on peut tout faire.
Manifestement, le plugin populaire est .js2-mode

35. Comment j’intègre Babel dans
mon
éditeur/EDI
en ligne ?

36. JSBin
Il suffit de choisir le mode ES6 / Babel (ou JSX) dans la liste
de syntaxes pour le panneau JavaScript.
Attention, il utilise JSHint par défaut plutôt qu’ESLint, ce qui
rend moins pratique la prise en charge d’ES2015.

37. CodePen
Il suffit de choisir Babel comme préprocesseur dans les
réglages du panneau JavaScript.

38. JSFiddle
Il suffit de choisir Babel comme langage dans les réglages
du panneau JavaScript.

39. Cloud9
ES2015+ et Babel pris en charge nativement.

40. Comment j’intègre Babel dans
ma chaîne de
build ?

41. Browserify
C’est le transform qui fait l’interface. CLI :babelify
$
$
npm install --save-dev babelify babel-core
babel-preset-latest babel-preset-react
browserify index.js -o bundle.js -t babelify --presets latest react
Ou dans votre script de bundling :
var fs = require('fs')
var browserify = require('browserify')
browserify('./index.js')
.transform('babelify', { presets: ['latest', 'react'] })
.bundle()
.pipe(fs.createWriteStream('bundle.js'))

42. Webpack
On utilise le . La config ressemble à ceci :babel-loader
// …
module: {
// …
loaders: [
// …
{
test: /.(?:jsx?|es6)$/,
exclude: /(?:node_modules|bower_components)/,
loader: 'babel',
query: { presets: ['latest', 'react'] }
}
// …
]
// …
}

43. Rollup
Le plus simple, c’est le plugin babel
$ npm install --save-dev rollup-plugin-babel babel-preset-es2015-rollup
Dans la config Rollup :
import json from 'rollup-plugin-json'
import babel from 'rollup-plugin-babel'
export default {
entry: './index.js',
format: 'cjs',
plugins: [ json() , babel() ],
dest: 'bundle.js'
};
L’activation du preset se fait par un fichier .babelrc.

44. Gulp
Naturellement, on a . Pour la version avec les
sourcemaps, ça donne un truc dans ce style :
gulp-babel
var gulp = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var babel = require('gulp-babel')
var concat = require('gulp-concat')
gulp.task('default', function () {
return gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat('bundle.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
})
Là aussi, configuration externe par .babelrc.

45. Grunt
Pas de surprise : il y a . Exemple :grunt-babel
require('load-grunt-tasks')(grunt)
grunt.initConfig({
babel: {
options: { sourceMap: true },
dist: {
files: { 'dist/bundle.js': 'src/**/*.js' }
}
}
})
grunt.registerTask('default', [ 'babel' ])
Et re-configuration par .babelrc.

46. T’as pas parlé du mien !
Moi non, mais je suis sûr que .Babel oui
D’autant que la majorité de ces intégrations sont officielles,
maintenues au sein du projet Babel.

47. Et
TypeScript ?

48. TypeScript vs. ES2015+
TS ≈ ES2016 + annotations de type optionnelles (+ compat
JSX)
TS2 transpile vers ES5 par défaut, mais peut viser ES2015.
Inclus par défaut dans VS2013u2 et ultérieurs + VSCode.
Peu d’inférence de type ; se repose surtout sur les
annotations.
Comme souvent avec IntelliSense, on a des définitions pré-
compilées externes pour éviter de devoir faire de l’inférence
profonde. Vaste référentiel sur .DefinitelyTyped

49. Intégrer TypeScript
La documentation liste :
Browserify, Webpack, Grunt, Gulp, JSPM/Rollup, etc.
pas mal d’intégration classiques
En somme, ça se fait bien.

50. Un mot sur Flow
TS n’est pas le seul moyen d’avoir des infos de typage fines
sur du code JS. Le projet , de Facebook, est excellent.Flow
J’ai souvent entendu que les retours de Flow étaient plus
utiles / efficaces que ceux de TS, mais je n’ai pas comparé
personnellement.
Notez que Babel est capable de , et
que des outils avancés comme Tern.js savent exploiter les
annotations Flow pour leur assistance au code.
lire du code annoté Flow

51. Merci !
Et que JS soit avec vous.
Christophe Porteneuve
@porteneuve
Les slides sont sur bit.ly/msexp16-js