Download - Up & running with ECMAScript6
![Page 2: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/2.jpg)
Nir Kaufman
+
Head of AngularJS development @ 500TechWe develop, consult & train AngularJS
for startups & enterprises
Join us!We’re hiring
![Page 3: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/3.jpg)
grab the code
http://tinyurl.com/l5rpord
https://github.com/nirkaufman/es6-up-and-running
![Page 4: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/4.jpg)
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
![Page 7: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/7.jpg)
1. go to preference -> javascript -> languages & frameworks 2. choose ECMAScript 6
![Page 8: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/8.jpg)
Sublime Text
1. install package control 2. go to install packages 3. search for javascript next and install 4. switch language to javascript next
![Page 10: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/10.jpg)
Babel vs Traceurtwo popular javascript compilers.
both of them will do the work. you can easily switch for any reason at any stage
![Page 11: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/11.jpg)
• 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/
![Page 12: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/12.jpg)
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:
+
![Page 14: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/14.jpg)
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
+
![Page 15: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/15.jpg)
• supports 60% of ES6 features • supports all major build systems (grunt, gulp etc..) • maintained by Google
https://github.com/google/traceur-compiler
![Page 17: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/17.jpg)
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
![Page 18: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/18.jpg)
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’;
![Page 19: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/19.jpg)
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/
![Page 21: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/21.jpg)
“webpack takes modules with dependencies and generates static assets representing those modules”.
http://webpack.github.io/
![Page 22: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/22.jpg)
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
![Page 23: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/23.jpg)
“jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module
loader”
http://jspm.io/
![Page 24: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/24.jpg)
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
![Page 25: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/25.jpg)
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
![Page 27: Up & running with ECMAScript6](https://reader034.vdocuments.us/reader034/viewer/2022042701/55c2c381bb61ebd2178b462d/html5/thumbnails/27.jpg)
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.!