Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What's New in ECMAScript 2015

568 views

Published on

Look at features added to the latest standard behind JavaScript.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

What's New in ECMAScript 2015

  1. 1. What’s New in ECMAScript 2015 Sasha dos Santos @sashageekette Orlando Code Camp 2016
  2. 2. Class https://jsfiddle.net/87mp3gk5/2/
  3. 3. Inheritance https://jsfiddle.net/t56f2afg/3/
  4. 4. Static Methods https://jsfiddle.net/boLg6oc1/2/
  5. 5. Default Parameters https://jsfiddle.net/67r879tn/2/
  6. 6. Arrow Functions - ex. 1 https://jsfiddle.net/powsc8u7/5/
  7. 7. Arrow Functions - ex. 2 https://jsfiddle.net/7091rwru/7/
  8. 8. Template Literals https://jsfiddle.net/75uktrxn/2/
  9. 9. Spread Operator https://jsfiddle.net/xLbhq1xe/21/
  10. 10. Object Literals https://jsfiddle.net/wxhuL1gx/7/
  11. 11. Destructuring Assignment - ex. 1 https://jsfiddle.net/9g06bgdx/2/
  12. 12. Destructuring Assignment - ex. 2 https://jsfiddle.net/9g06bgdx/25/
  13. 13. let https://jsfiddle.net/cys2eg3s/1/
  14. 14. const https://jsfiddle.net/96svxzpa/4/
  15. 15. Object.assign https://jsfiddle.net/b4zmquxt/6/
  16. 16. Iterators & Generators https://jsfiddle.net/e7ea9vj3/24/
  17. 17. for…of https://jsfiddle.net/v4q42oca/21/
  18. 18. Set https://jsfiddle.net/cgfvyk44/22/
  19. 19. WeakMap https://jsfiddle.net/oqLuaj7q/22/
  20. 20. Symbols https://jsfiddle.net/995Lk2qp/5/
  21. 21. Modules
  22. 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)
  23. 23. caniuse.com kangax.github.io/compat-table/es6/
  24. 24. per.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_O
  25. 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
  26. 26. 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)
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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

×