using javascript es2015 (es6), es2016, es2017 in production
TRANSCRIPT
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.
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)