Up & running with ECMAScript6
5 likes1,670 views
The document provides a guide on setting up an ES6 environment, covering editor configuration, compiler selection, and module system integration. It discusses popular tools like Babel and Webpack for code compilation and module bundling, along with steps for migrating existing JavaScript code to ES6 syntax. Additionally, it emphasizes the benefits of each tool and offers guidance for incorporating ES6 features progressively.
Up & running with ECMAScript6
- 1. [email protected] ES6 up & running how to setup an ES6 environment
- 2. [email protected] Nir Kaufman + Head of AngularJS development @ 500Tech We develop, consult & train AngularJS for startups & enterprises Join us! We’re hiring
- 4. [email protected] 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
- 5. [email protected] our goal: minimal effort easy tools to get us up and running fast
- 6. [email protected] 1 choose your editor syntax highlighting, code completion etc…
- 7. [email protected] 1. go to preference -> javascript -> languages & frameworks 2. choose ECMAScript 6
- 8. [email protected] Sublime Text 1. install package control 2. go to install packages 3. search for javascript next and install 4. switch language to javascript next
- 9. [email protected] 2 choose your compiler make your ES6 code compatible with current browsers
- 10. [email protected] Babel vs Traceur two popular javascript compilers. both of them will do the work. you can easily switch for any reason at any stage
- 11. [email protected] • 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/
- 12. [email protected] CLI npm install -g babel babel src --out-dir lib babel src.js --out-file compiled.js compile single file: compile directory: --watch watch for changes: --source-maps add source maps: +
- 13. [email protected] WebStorm set up a file watcher with Babel template: +
- 14. [email protected] Gulp npm 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 +
- 15. [email protected] • supports 60% of ES6 features • supports all major build systems (grunt, gulp etc..) • maintained by Google https://github.com/google/traceur-compiler
- 16. [email protected] 3 pick a module system if you already use one just integrate with it..
- 17. [email protected] JS modules modules are now a part of the javascript language. but until now we used other solutions to achieve modularity UMD each solution use it’s own patterns & syntax
- 18. [email protected] ES6 modules overview 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’;
- 19. [email protected] 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/
- 20. [email protected] if you are starting a new fresh project you need to know about some tools…
- 21. [email protected] “webpack takes modules with dependencies and generates static assets representing those modules”. http://webpack.github.io/
- 22. [email protected] 1. npm install -g webpack 2. npm install -g webpack-dev-server 3. npm install -D babel-loader 4. include the babel-loader in webpack.config.js 5. run webpack to bundle your files 6. run webpack-dev-server and relax… es6-up-and-running/webpack.config.js
- 23. [email protected] “jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader” http://jspm.io/
- 24. [email protected] 1. npm install -g jspm 2. jspm init 3. npm install <something from anywhere> 4. load system.js & config.js in your HTML 5. import your entry file and relax.. es6-up-and-running/src/index.html
- 25. [email protected] 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
- 26. [email protected] 4 migration to ES6 refactor your current javascript code to ES6
- 27. [email protected] step by step 1. 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.!