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