Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

JavaScript has been evolving very fast in recent years. At a first glance it seems awesome to have all these new features, but you soon realize that browser/server support is a huge bottleneck. This talk will show you how we use ES2015, ES2016, ES* in production code on a large project.

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. USING JAVASCRIPT ES2015 (ES6), ES2016, ES* IN PRODUCTION Anze Znidarsic, Flycom d.o.o.
  2. 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. 3. WHATS NEW IN ES2015 • block scope variables and constants • arrow functions • classes • string literals • modules • etc.
  4. 4. WHAT DO YOU GUYS BUILD? more: bit.ly/gms3video
  5. 5. BLOCK SCOPED VARIABLES AND CONSTANTS
  6. 6. ARROW FUNCTIONS
  7. 7. STRING LITERALS
  8. 8. CLASSES
  9. 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/
  10. 10. 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
  11. 11. OUR DEVELOPMENT WORKFLOW • Local vagrant dev boxes • Provisioning, updating and code deployment done through Ansible
  12. 12. YES, WE USE GULP.. • .. I know, Gulp is like sooooo 2014 • npm install --save-dev gulp-babel
  13. 13. SECRET SAUCE • gulp-babel • gulp-cached
  14. 14. BUT IT’S SLOW?
  15. 15. BROWSER RELOAD? • livereload.com • browsersync.io • our own solution
  16. 16. ES2016 IN 1 MINUTE • Exponentiation operator ** • 2 ** 3 // same as 2 * 2 * 2 • a **= 3 // same as a * a * a • Array.prototype.includes
  17. 17. ES2017? • Async ftw • source: http://www.2ality.com/2016/02/async-functions.html
  18. 18. FURTHER READING • http://es6-features.org/ • http://www.2ality.com/ • http://exploringjs.com/ • https://babeljs.io/docs/learn-es2015/
  19. 19. OUR ROADMAP • React • Hot Module Reload • When the time comes separate IE11 build :) (history repeats itself) • Play with some other stuff
  20. 20. 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)

×