際際滷

際際滷Share a Scribd company logo

Using JavaScript ES2015 (ES6), ES2016, ES2017 in production

?Download as PPTX, PDF?
?
A
An?e ?nidar?i?

This document summarizes the history and new features of JavaScript ES2015 and later versions. It discusses features added in ES2015 like block scope variables, arrow functions, classes, string literals and modules. It also covers browser support for ES2015 and tools like Babel that can transpile newer JavaScript to older versions. The document provides an overview of their development workflow using technologies like Gulp, Babel, Ansible and Livereload. It briefly mentions new features in ES2016 like exponentiation operator and Array.includes and async functions in ES2017.

1 of 22
Download to read offline
USING JAVASCRIPT ES2015 (ES6), ES2016, ES* IN PRODUCTION Anze Znidarsic, Flycom d.o.o.
JS/ES QUICK HISTORY ? 1995 - JavaScript is made (in 10 days, Brendan Eich) ? 1997 - First ECMAScript (ES) spec ? 1999 - ES3 ? ES4 - Huuuge update - Abandoned ? 2009 - ES5 ? 2015 - ES2015 (formerly ES6) new release procedure ? 2016 - ES2016 (formerly ES7) ? 2017 - ES2017
WHATS NEW IN ES2015 ? block scope variables and constants ? arrow functions ? classes ? string literals ? modules ? etc.
WHAT DO YOU GUYS BUILD? more: bit.ly/gms3video
BLOCK SCOPED VARIABLES AND CONSTANTS
ARROW FUNCTIONS
STRING LITERALS
CLASSES
ES2015 BROWSER SUPPORT ? Chrome 49: 91% (Chrome 51: 97%) ? Firefox 45: 86% (FF 46: 91%) ? MS Edge 12: 61% (Edge 14: 86%) ? Safari 9 (desktop and iOS): 54% (WK: 87%) ? Android 5.1: 30% ? MS IE11: 16% :( ? More: http://kangax.github.io/compat-table/es6/
Using JavaScript ES2015 (ES6), ES2016, ES2017 in production
BABEL TO THE RESCUE! ? transpile ES2015 code to ES5 ? transpile ES2016 and up to ES5 ? tranpile JSX (React) to JavaScript ? transpile YourAwesomeScript to JS ? www.babeljs.io
OUR DEVELOPMENT WORKFLOW ? Local vagrant dev boxes ? Provisioning, updating and code deployment done through Ansible
YES, WE USE GULP.. ? .. I know, Gulp is like sooooo 2014 ? npm install --save-dev gulp-babel
SECRET SAUCE ? gulp-babel ? gulp-cached
BUT IT¨S SLOW?
BROWSER RELOAD? ? livereload.com ? browsersync.io ? our own solution
Using JavaScript ES2015 (ES6), ES2016, ES2017 in production
ES2016 IN 1 MINUTE ? Exponentiation operator ** ? 2 ** 3 // same as 2 * 2 * 2 ? a **= 3 // same as a * a * a ? Array.prototype.includes
ES2017? ? Async ftw ? source: http://www.2ality.com/2016/02/async-functions.html
FURTHER READING ? http://es6-features.org/ ? http://www.2ality.com/ ? http://exploringjs.com/ ? https://babeljs.io/docs/learn-es2015/
OUR ROADMAP ? React ? Hot Module Reload ? When the time comes separate IE11 build :) (history repeats itself) ? Play with some other stuff
Yes, we¨re hiring. If you¨re WebGL (THREE.JS primarily) expert/enthusiast, please contact me at anze@flycom.si Thank you twitter.com/anzeznidarsic r PHP conference? Refresh www.devdays.si every day or like https://www.facebook.com (from the same team that brought you one of the biggest PHP events in Europe: Slovenian PHP Conference 2008-2010)

More Related Content

Using JavaScript ES2015 (ES6), ES2016, ES2017 in production

  • 1. USING JAVASCRIPT ES2015 (ES6), ES2016, ES* IN PRODUCTION Anze Znidarsic, Flycom d.o.o.
  • 2. JS/ES QUICK HISTORY ? 1995 - JavaScript is made (in 10 days, Brendan Eich) ? 1997 - First ECMAScript (ES) spec ? 1999 - ES3 ? ES4 - Huuuge update - Abandoned ? 2009 - ES5 ? 2015 - ES2015 (formerly ES6) new release procedure ? 2016 - ES2016 (formerly ES7) ? 2017 - ES2017
  • 3. WHATS NEW IN ES2015 ? block scope variables and constants ? arrow functions ? classes ? string literals ? modules ? etc.
  • 4. WHAT DO YOU GUYS BUILD? more: bit.ly/gms3video
  • 5. BLOCK SCOPED VARIABLES AND CONSTANTS
  • 9. ES2015 BROWSER SUPPORT ? Chrome 49: 91% (Chrome 51: 97%) ? Firefox 45: 86% (FF 46: 91%) ? MS Edge 12: 61% (Edge 14: 86%) ? Safari 9 (desktop and iOS): 54% (WK: 87%) ? Android 5.1: 30% ? MS IE11: 16% :( ? More: http://kangax.github.io/compat-table/es6/
  • 11. BABEL TO THE RESCUE! ? transpile ES2015 code to ES5 ? transpile ES2016 and up to ES5 ? tranpile JSX (React) to JavaScript ? transpile YourAwesomeScript to JS ? www.babeljs.io
  • 12. OUR DEVELOPMENT WORKFLOW ? Local vagrant dev boxes ? Provisioning, updating and code deployment done through Ansible
  • 13. YES, WE USE GULP.. ? .. I know, Gulp is like sooooo 2014 ? npm install --save-dev gulp-babel
  • 16. BROWSER RELOAD? ? livereload.com ? browsersync.io ? our own solution
  • 18. ES2016 IN 1 MINUTE ? Exponentiation operator ** ? 2 ** 3 // same as 2 * 2 * 2 ? a **= 3 // same as a * a * a ? Array.prototype.includes
  • 19. ES2017? ? Async ftw ? source: http://www.2ality.com/2016/02/async-functions.html
  • 20. FURTHER READING ? http://es6-features.org/ ? http://www.2ality.com/ ? http://exploringjs.com/ ? https://babeljs.io/docs/learn-es2015/
  • 21. OUR ROADMAP ? React ? Hot Module Reload ? When the time comes separate IE11 build :) (history repeats itself) ? Play with some other stuff
  • 22. Yes, we¨re hiring. If you¨re WebGL (THREE.JS primarily) expert/enthusiast, please contact me at anze@flycom.si Thank you twitter.com/anzeznidarsic r PHP conference? Refresh www.devdays.si every day or like https://www.facebook.com (from the same team that brought you one of the biggest PHP events in Europe: Slovenian PHP Conference 2008-2010)
AboutCopyright
? 2025 際際滷