Upload
microsoft
View
184
Download
3
Embed Size (px)
Citation preview
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