up & running with ecmascript6
TRANSCRIPT
Nir Kaufman
+
Head of AngularJS development @ 500TechWe develop, consult & train AngularJS
for startups & enterprises
Join us!We’re hiring
grab the code
http://tinyurl.com/l5rpord
https://github.com/nirkaufman/es6-up-and-running
https://kangax.github.io/compat-table/es6/
ES6 current state
Edge 72% FireFox 68%
io.js 43% Node 23%
Babel 76% Traceur 60%
Browsers Server Compilers
1. go to preference -> javascript -> languages & frameworks 2. choose ECMAScript 6
Sublime Text
1. install package control 2. go to install packages 3. search for javascript next and install 4. switch language to javascript next
Babel vs Traceurtwo popular javascript compilers.
both of them will do the work. you can easily switch for any reason at any stage
• supports 76% of ES6 features (currently) • support all major build systems (grunt, gulp etc..) • supports frameworks (Ember, Meteor, Sails etc…)
http://babeljs.io/docs/using-babel/
CLInpm install -g babel
babel src --out-dir lib
babel src.js --out-file compiled.jscompile single file:
compile directory:
--watchwatch for changes:
--source-mapsadd source maps:
+
Gulpnpm install --save-dev gulp-babel
var babel = require("gulp-babel");
gulp.task("default", function () { return gulp.src(“src/**/*.js”) .pipe(babel()) .pipe(gulp.dest("dist"));});
es6-up-and-running/gulpfile.js
+
• supports 60% of ES6 features • supports all major build systems (grunt, gulp etc..) • maintained by Google
https://github.com/google/traceur-compiler
JS modulesmodules are now a part of the javascript language.
but until now we used other solutions to achieve modularity
UMDeach solution use it’s own patterns & syntax
ES6 modulesoverview of the ES6 module syntax:
Named exports (several per module)
Default exports (one per module)
export class Logger {. . .}export const ID = 123456;export function sum () {. . .}
import { Logger } from ‘./utils’;import { ID, sum } from ‘./utils’;import * as utils from ‘./utils’;
export default class Logger {. . .}
import Logger from ‘./utils’;
if you already use modules in your app
you can still use the ES6 modules syntax. just let babel know which format to use.
https://babeljs.io/docs/usage/modules/
“webpack takes modules with dependencies and generates static assets representing those modules”.
http://webpack.github.io/
1. npm install -g webpack2. npm install -g webpack-dev-server3. npm install -D babel-loader4. include the babel-loader in webpack.config.js5. run webpack to bundle your files6. run webpack-dev-server and relax…
es6-up-and-running/webpack.config.js
“jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module
loader”
http://jspm.io/
1. npm install -g jspm2. jspm init3. npm install <something from anywhere>4. load system.js & config.js in your HTML5. import your entry file and relax..
es6-up-and-running/src/index.html
what to choose?both of the tools are easy to use.
both of them offer a bundling feature for production.
webpack offers more build features that can replace gulp or grunt in your project
JSPM makes package management and module loading easy and painless, you will need gulp for other tasks
step by step1. start with modules. 2. replace var with let & const. easy and fast. 3. convert your constructor functions to classes. 4. include more & more ES6 features with ease…
ES6 & 5.1 can be mixed without problems. No need to refactor everything at once.!
