JS 2016

A sneak peek into new ECMAScript features

Transcript

1. JavaScript 2016
2. JavaScript “Sei giorni me n’andai matina e sera per balze e per pendici orride e strane, dove non via, dove sentier non era, dove né segno di vestigie umane; poi giunse in una valle inculta e fiera, di ripe cinta e spaventose tane, che nel mezzo s’un sasso avea un castello forte e ben posto, a maraviglia bello. Da lungi par che come fiamma lustri, né sia di terra cotta, né di marmi. ES2015 Come più m’avicino ai muri illustri, l’opra più bella e più mirabil parmi. E seppi poi, come i demoni industri, da suffumigi tratti e sacri carmi, tutto d’acciaio avean cinto il bel loco, temprato all’onda et allo stigio foco.” L. Ariosto, Orlando Furioso, Canto IL
3. Language overview JS is a scripting language, developed by Brendan Eich for Netscape navigator in 1995 and officially adopted by Netscape 2 in 1996. Netscape delivered JavaScript to Ecma International for standardization and the work on the specification ECMA-262 began in November 1996. It’s the lingua franca of the web, but it’s now available on server-side environment (nodejs), for building desktop application and inside some software (Adobe AfterEffect, Phoroshop, etc.). We’ll talk about the core JS, not to be confused with environment-specific API, such as HTML5.
4. Timeline 1. 1995: development 2. 1997: version 1 3. 1999: version 3, the one adopted and supported till IE8 4. 2009: version 5, the first great innovation 5. 2015: ES6 or ECMAScript 2015, the leap forward 6. 2016: ES7 or ECMAScript 2016 From 2015, ECMA-262 working group is committed to deliver every year in June an update to the language, less dramatic than the last two.
5. ES6: the future is now Lots of new features, involving almost every area of the language. Backward compatiblity is granted, meaning that you’ll still be able to write plain old JS with no particular deal. The idea behind this update is to make JS a more robust language, suitable to write complex application and not only doing some funny thing into a web page. As when it was first developed, some ideas were borrowed from other programming language, such as Perl, Python, etc.
6. Some new feature 1. modules 2. arrow function 3. shorthand property (say goodbye to the function keyword) 4. dynamic keyword 5. Object.assign 6. new statement: let, const 7. template literal 8. promise 9. class
7. Modules Import: import {AidaMenu} from ‘/aidamenu’; import * as formValidationRules from '../utils/formValidationRules'; Export: export const AidaMenu = { validationRules: Object.assign({}, formValidationRules) }; AidaMenu.init(); <script type="module" src="path/to/module.js"></script>
8. Arrow function New school: let users = []; users.forEach( (user) => user.toUpperCase() ); Old school: var users = []; users.forEach(function(user){ return user.toUpperCase(); });
9. Template literal Old school var version = ‘1.2’; var settings = { version: ‘Version: ’ + version; }; New school let version = ‘1.2’; const settings = { version: `Version: ${version}` }; (Multiline strings) (Tagged template literals)
10. Dynamic keyword const paths = { cssPath: 'style.css', sassPath: 'scss/style.scss' }; let version = { options: { [paths.sassPath]: function(content, version) { return content.replace( /Version: .*/, `Version: ${version}` ); } } }
11. Promise const p = new Promise( function (resolve, reject) { // (A) ··· if (···) { resolve(value); // success } else { reject(reason); // failure } }); promise .then(value => { /* fulfillment */ }) .catch(error => { /* rejection */ });
12. Class Use the class constructor and you’ll get this treatment:
14. Tools So, how to use all this cool new stuff, now? Modern browsers have various levels of support and nodejs (current version is 6.3) implements 93% of available ES6 features. In order to start playing, you need to transpile your shiny new code from ES6 to ES5. The most used transpiler nowadays is Babel. js and its tagline goes like this: Use next generation JavaScript, today. It can be used as a command line tool, as a task of Gulp, Grunt or, as made famous by React, in conjunction with Webpack. babel script.js --out-file script-compiled.js browserify: { dist: { options: { transform: [['babelify', { 'presets': ['es2015'] }]] }, files: { 'js/modules/modules.min.js': 'js/modules/modules.js' } } }
15. ES6 Overview in 350 Bullet Points ES6 In Depth Articles Exporing ES6 Understanding ECMAScript 6 ECMA compatiblity table Babel.js Resources
16. Grazie!