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.
Upcoming SlideShare
ES6 in Production [JSConfUY2015]
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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)

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.

Views

Total views

3,432

On Slideshare

0

From embeds

0

Number of embeds

10

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×