What's New in ECMAScript 2015
Download as PPTX, PDF0 likes868 views
The document summarizes new features in ECMAScript 2015 including classes, inheritance, arrow functions, template literals, default parameters, destructuring assignment, let/const, iterators/generators, modules, symbols, and sets. It discusses transpiling ES6 to ES5 using tools like Babel and polyfills for cross-browser compatibility when native support is lacking for new JavaScript features. Browser and tooling support for ES6 is checked using resources like CanIUse, MDN, and kangax compatibility tables.
What's New in ECMAScript 2015
- 1. What’s New in ECMAScript 2015 Sasha dos Santos @sashageekette Orlando Code Camp 2016
- 6. Arrow Functions - ex. 1 https://jsfiddle.net/powsc8u7/5/
- 7. Arrow Functions - ex. 2 https://jsfiddle.net/7091rwru/7/
- 11. Destructuring Assignment - ex. 1 https://jsfiddle.net/9g06bgdx/2/
- 12. Destructuring Assignment - ex. 2 https://jsfiddle.net/9g06bgdx/25/
- 21. Modules
- 22. Backwards Compatibility • No browser implements all of these new features • To check compatibility: • CanIUse.com • http://kangax.github.io/compat-table/es6/ • MDN (mozilla developer network)
- 25. 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
- 27. 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)
- 28. 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
- 29. 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
- 30. Polyfills (continued) • To look for specific polyfills to copy into your project, go to MDN and search for feature mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objec
- 31. 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