What’s New in ECMAScript 2015

Sasha dos Santos@sashageekette

Orlando Code Camp 2016

Class

https://jsfiddle.net/87mp3gk5/2/

Inheritance

https://jsfiddle.net/t56f2afg/3/

Static Methods

https://jsfiddle.net/boLg6oc1/2/

Default Parameters

https://jsfiddle.net/67r879tn/2/

Arrow Functions - ex. 1

https://jsfiddle.net/powsc8u7/5/

Arrow Functions - ex. 2

https://jsfiddle.net/7091rwru/7/

Template Literals

https://jsfiddle.net/75uktrxn/2/

Spread Operator

https://jsfiddle.net/xLbhq1xe/21/

Object Literals

https://jsfiddle.net/wxhuL1gx/7/

Destructuring Assignment - ex. 1

https://jsfiddle.net/9g06bgdx/2/

Destructuring Assignment - ex. 2

https://jsfiddle.net/9g06bgdx/25/

let

https://jsfiddle.net/cys2eg3s/1/

const

https://jsfiddle.net/96svxzpa/4/

Object.assign

https://jsfiddle.net/b4zmquxt/6/

Iterators & Generators

https://jsfiddle.net/e7ea9vj3/24/

for…of

https://jsfiddle.net/v4q42oca/21/

Set

https://jsfiddle.net/cgfvyk44/22/

WeakMap

https://jsfiddle.net/oqLuaj7q/22/

Symbols

https://jsfiddle.net/995Lk2qp/5/

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