What’s New in ECMAScript 2015
Sasha dos Santos@sashageekette
Orlando Code Camp 2016
Static Methods
https://jsfiddle.net/boLg6oc1/2/
Spread Operator
https://jsfiddle.net/xLbhq1xe/21/
Destructuring Assignment - ex. 2
https://jsfiddle.net/9g06bgdx/25/
Modules
Backwards Compatibility
• No browser implements all of these new features
• To check compatibility:• CanIUse.com• http://kangax.github.io/compat-table/es
6/• MDN (mozilla developer network)
caniuse.com
kangax.github.io/compat-table/es6/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
JavaScript Transpilers• Compiler that translates between languages• ES6 -> ES5• Write code now in ES6, but browser
executes ES5 equivalent• Babel https://babeljs.io/• Traceur
https://github.com/google/traceur-compiler
Babel• Not recommended that you try to transpile
‘on the fly’ at the client, though its possible (https://cdnjs.com/libraries/babel-core)
• Option 1: Manually transpile code before publish
• Better Option 2: Integrate with you existing build tool such as Browserify, Webpack, Gulp, MSBuild, etc (babeljs.io/docs/setup)
Module Bundling• Webpack and Browserify are popular JS
bundling tools, but they support CommonJS modules and not the new ES6 imports
• Combine with Babel which will convert your import statements into require statements
• ex. Browserify + Babelify = use imports and bundle
Polyfills• Code that provides ‘native’ functionality
that isn’t actually supported by the browser.
• You code using ES6 and if not natively supported, the polyfill code is executed.
• Transpilers can rewrite code to ES5, but may still require polyfills for calls that have no ES5 equivalent
Polyfills (continued)• To look for
specific polyfills to copy into your project, go to MDN and search for feature
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Polyfills (continued)
• There are plenty of libraries (modules) that provide many polyfills and you can import only the ones you need (consult the google)
• ex. https://github.com/es-shims