ES6: your new friend?

Here we cover a subset of the new features of the specification of ECMAScript 2015

Transcript

1. ES6:your new friend? ES6:your new friend?
2. Who I am? Who I am? Computer Science student at FCEyN Working at Kidozen ( ) www.kidozen.com Working with CoderHouse to build the Back End course Github: a0viedo Bitbucket: a0viedo Twitter: @a0viedo Pinterest: '' Instragram: '' ICQ: ''
3. What's ECMA? What's ECMA? Ecma International is an industry association founded in 1961 and dedicated to the standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE). Ecma created a committee called TC39 ECMAScript in 2012 with the following purpose: Standardization of the general purpose, cross platform, vendor-neutral programming language ECMAScript. This includes the language syntax, semantics, and libraries and complementary technologies that support the language.
4. Who's p Who's part of TC39? art of TC39?
5. Where i can find the specs? Where i can find the specs? An unofficial HTML version of ECMAScript 6 (a.k.a. Next (a.k.a. Harmony)) working draft is being maintained by Mozilla . For specification drafts released by ECMA you can visit . here wiki.ecmascript.org 633 pages of pure love!
6. Features Features
7. Did i just read classes? Did i just read classes?
8. Current Status Current Status Source: http://kangax.github.io/compat-table/es6/
9. Shimmable or not Shimmable or not Unshimmable subset of ES6: Unshimmable subset of ES6: Basically any new syntax (i.e. let, const, etc). Same goes with Proxies and Modules.
10. Arrow functions Arrow functions Arrows are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. Unlike functions, arrows share the same lexical this as their surrounding code. Arrow functions are always anonymous! Example: [1,2,3].forEach(function(x) { console.log(x + 1) }); // can be changed to [1,2,3].forEach(x => console.log(x + 1)); (a, b) => { //your code }
11. Lexical Lexical this this var example = { count: 0, increment: function(){ setTimeout(function timeout() { this.count++; }, 1000); } } example.increment();
12. A solution (ES5) A solution (ES5) var example = { count: 0, increment: function(){ var that = this; setTimeout(function timeout() { that.count++; }, 1000); } } example.increment();
13. Using arrows Using arrows var example = { count: 0, increment: function() { setTimeout(() => this.count++, 1000); } } example.increment();
14. Extended object literals Extended object literals Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls. var obj = { // __proto__ __proto__: theProtoObj, // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 };
15. Destructuring Destructuring In a programming language, destructuring assignment denotes the use of patterns to extract parts of an object. The latest ECMAScript 6 defines the grammar for destructuring assignment in Section 11.13.1. There are two different forms: array pattern and object pattern.
16. Array Pattern Array Pattern var [d, m, a] = [21, 10, 2015]; //instead of var d = 21, m = 10, a = 2015; x = 3; y = 4; [x, y] = [y, x] // instead of temp = [y, x]; x = temp[0]; y = temp[1]; function now() { return [15, 5, 2014, 20, 0]; } var [d, m] = now(); // m = 15, d = 5 var [,,year] = now(); // no need to accept all elements
17. Object Pattern Object Pattern function today() { return { d: 15, m: 5, y: 2014 }; } var { m: month, y: year } = today(); // month = 5, year = 2014 var document = { timestamp: 1400077764803, latitude: -8.137003, longitud function processDocument({ latitude: lat, longitude: long }) { // do something here }
18. Block scope Block scope Two new reserved keywords are added in ECMAScript 6 for variable declaration: let and const. Example: for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); }, 10); }
19. Modules Modules There's none built-in support for modules in ES5. The two most important work-arounds standards are CommonJS Modules (CJS): the popular implementation of this standard is Node.js modules Asynchronous Module Definition (AMD): The most popular implementation of this standard is RequireJS
20. ECMAScript 6 Modules Syntax ECMAScript 6 Modules Syntax Exporting: A module can be any file with Javascript in it. You can export a variable declaration, a function declaration or a class declaration using the export keyword. Suppose we have a calc.js file with this code: let notExported = 'abc'; export function multiply(x) { return x * MY_CONSTANT; } export const MY_CONSTANT = 7;
21. Another option is: let notExported = 'abc'; function multiply(x) { return x * MY_CONSTANT; } const MY_CONSTANT = 7; export { multiply, MY_CONSTANT }; You can rename while exporting: export { multiply as mult, MY_CONSTANT as ANOTHER_CONSTANT }; Re-exporting: You can re-export some exports of another module like this: export { sha-1 as sha-1 } from 'lib/crypto'; // re-exports only sha-1 export * from 'lib/crypto'; // or re-export everything
22. ES6 Modules ES6 Modules Importing Now to import calc.js module into main.js you could just write Main.js refers to calc.js through module ID 'calc' (string). The default interpretation of the module ID is a path relative to the importing module. Another option would be to import the module as an object: import { multiply } from 'calc'; console.log(multiply(3)); import 'calc' as c; console.log(c.multiply(3));
23. Using ECMAScript 6 modules today Using ECMAScript 6 modules today There are several projects that enables you to use ECMAScript 6 modules today: : write your modules using a subset of ECMAScript 6 (roughly: ECMAScript 5 + export + import), compile them to AMD or CommonJS modules. : polyfills the ECMAScript 6 module loader API on current browsers. other: (plugin for RequireJS), (transpiler) or TypeScript. ES6 Module Transpiler ES6 Module Loader require-hm Traceur
24. Covered in this talk Covered in this talk
25. Resources Resources - http://www.2ality.com/search/label/esnext - http://ariya.ofilabs.com/tag/es6 - http://www.nczonline.net/blog/tag/ecmascript-6 by Luke Hoban - https://github.com/lukehoban/es6features Bonus: - http://carnotaurus.philipcarney.com/post/3010984357/classes- versus-prototypes-some-philosophical-and 2ality on ES6 Ariya Hidayat on ES6 Nicholas C. Zakas on ES6 ES6 Features Classes and prototypes
26. Thank you! Thank you! Questions? Questions? get this talk at bit.ly/es6part1