le développement web : tour d'horizon

JavaScript : lefutur, c’est

maintenant !Un atelier de à Christophe Porteneuve MS experiences 2016

whoamivar 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' ] }

ES2015+gni ?!

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.

Et si on avait besoin derien ?

La prise en charge native est bien meilleure que ce qu’oncroit.

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 �

OK mais… dans la vraievie…

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…

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 ?

ça roxxe des poneys

PrincipeTranspileur : source ➡ autre source

En l’occurence, « autre source » peut descendre jusqu’àES5

L’idée : utiliser les dernières specs aujourd’hui (du momentqu’elles sont transpilables).

La performance n’est, en pratique, pas un problème.

(En pratique, presque tout ES2015 est transpilable, sauf les proxies)

Babel et l’écosystème JSBabel est téléchargé (npm) plus de 57K/jour

Environ 2 000 modules en dépendentQuand Babel a un souci, l’écosystème JS a chaud…

(on y reviendra)Intégré avec l’universA permis l’essor (enfin !) d’ES2015+ dans des projets depremier plan (React, Ember 2, Aurelia, JSPM…) et leurs

utilisateurs (Facebook, Airbnb, Instagram, etc.)

Pérennité de BabelNé en 2014, le bébé de Sebastian McKenzie �.

Désormais 250+ contributeurs.Comme Facebook l’a jugé critique à la mission, ils ont faitcomme 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 duTC39).

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 besoinde 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.

PluginsSyntaxes et transforms

Un plugin de syntaxe permet au parser de reconnaître unesyntaxe au sein du flux JS. Mais Babel ne la transpile pas

pour autant.Un plugin de transform(ation) applique le transpilingcorrespondant pour aboutir à de l’ES5. Ils exploitent

automatiquement les éventuels plugins de syntaxe dont ilsont besoin.

Mais  : Babel propose actuellement plus de60 transforms, dont 21 rien que pour ES2015 !

ça fait du monde

PresetsOn 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 etreact),

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.

Bien plus qu’ES2016On 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 2le 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).

Comment je lui dis ?Soit via un fichier .babelrc (marche partout)

Soit via une clé "babel" dans le package.json (si tutranspiles 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

Jusqu’où je« babelize » 

?

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%. Doncbon.

"presets": ["es2015"] // ou "latest" si tu veux E2015+

Côté browsers(evergreens)

Tu prends les 2 dernières versions (façon Autoprefixer), tuexamines 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+)

Node 4.x LTSOn 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 lanouvelle LTS c’est Node 6 !

Node 6.x LTSExcellente prise en charge native de ES2015+, le preset

communautaire est donc nettement plus léger."presets": ["latest-node6"] // ou ["latest-minimal"]

ElectronElectron 1.4.1 est basé sur Chromium 53, Node 6.5 et v85.3, autant dire que vous avez un gros, gros paquet d’ES

pris en charge en natif (quasiment tout ES2016 et diversesparties d’ES2017).

Vu que le v8 est partagé, la meilleure approche est sansdoute :

"presets": ["latest-minimal"]

Comment j’intègre Babel dans

mon EDI ?

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

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)

JetBrains(IntelliJ, WebStorm, PHPStorm, etc.)

Les versions 2016 récentes (ex. +)intègrent ES2015 en natif, ainsi que Babel comme watcher.

WebStorm 2016.2

Eclipse#compassion

Désespérément à la rue (et lent, et lourd…) mais devaleureux membres de la communauté maintiennent

, basé sur l’excellent .Tern

IDE Tern.js

Comment j’intègre Babel dans

mon éditeur ?

Sublime Text 3Installer puis le paquet (pas le paquet

ES.Next). Idéalement, faire de « JavaScript (Babel) » lasyntaxe par défaut pour les fichiers .js.

PackageControl Babel

AtomBonne prise en charge en natif ; nombreuses extensions

possibles avec les paquets et .language-babel atom-ternjs

BracketsGestion correcte en natif, on aura besoin de l’extension JSX

si on utilise cette syntaxe complémentaire.

Notepad++Non, je plaisante.

Sidéré qu’autant de que des gens s’en servent encore…

VimÉvidemment, on peut tout faire.

Les trois plugins les plus utilisés sont , et .

vim-javascript vim-jsxes.next.syntax.vim

EmacsÉvidemment… on peut tout faire.

Manifestement, le plugin populaire est .js2-mode

Comment j’intègre Babel dans

monéditeur/EDIen ligne ?

JSBinIl 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.

CodePenIl suffit de choisir Babel comme préprocesseur dans les

réglages du panneau JavaScript.

JSFiddleIl suffit de choisir Babel comme langage dans les réglages

du panneau JavaScript.

Cloud9ES2015+ et Babel pris en charge nativement.

Comment j’intègre Babel dans

ma chaîne debuild ?

BrowserifyC’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'))

WebpackOn utilise le . La config ressemble à ceci :babel-loader

// … module: { // … loaders: [ // … { test: /\.(?:jsx?|es6)$/, exclude: /(?:node_modules|bower_components)/, loader: 'babel', query: { presets: ['latest', 'react'] } } // … ] // … }

RollupLe 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.

GulpNaturellement, 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.

GruntPas 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.

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.

EtTypeScript ?

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 lesannotations.

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

Intégrer TypeScriptLa documentation liste  :

Browserify, Webpack, Grunt, Gulp, JSPM/Rollup, etc.pas mal d’intégration classiques

En somme, ça se fait bien.

Un mot sur FlowTS n’est pas le seul moyen d’avoir des infos de typage finessur du code JS. Le projet , de Facebook, est excellent.Flow

J’ai souvent entendu que les retours de Flow étaient plusutiles / efficaces que ceux de TS, mais je n’ai pas comparé

personnellement.

Notez que Babel est capable de , etque des outils avancés comme Tern.js savent exploiter les

annotations Flow pour leur assistance au code.

lire du code annoté Flow

Merci !Et que JS soit avec vous.

Christophe Porteneuve@porteneuve

Les slides sont sur bit.ly/msexp16-js