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. 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

6. ARROW FUNCTIONS

7. STRING LITERALS

8. CLASSES

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

14. SECRET SAUCE
• gulp-babel
• gulp-cached

15. BUT IT’S SLOW?

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)