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

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/

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

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 [email protected]

Thank you

twitter.com/anzeznidarsic

Wanna attend a cool JavaScript and/or PHP conference? Refresh www.devdays.si every day or like https://www.facebook.com/phpkonferenca-128591437167977/

(from the same team that brought you one of the biggest PHP events in Europe: Slovenian PHP Conference 2008-2010)