Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES2015 - Workshop 1/2

Átila Fassina
September 13, 2016

ES2015 - Workshop 1/2

A quick presentation about features from ES2015 to be used in a daily project

Átila Fassina

September 13, 2016
Tweet

More Decks by Átila Fassina

Other Decks in Technology

Transcript

  1. Modules ➔ AMD (Asynchronous Module Definition) ➔ CommonJS ➔ UMD

    (Universal Module Definition) ➔ ES2015 Standard (a.k.a ES6 Modules)
  2. AMD ➔ Asynchronous Small modules on demand (via Ajax) define(function

    () { function Taste(food) { this.food = food; } taste.prototype = { placeOrder: function () { console.log('Bitte ein ' + food); } }; return taste; }); Taste.js define(['./Taste'], function (Taste) { var m1 = new Taste('schnitzel'); return m1; }); person.js
  3. CommonJS ➔ Synchronous No extra requests module.exports = function Square(width)

    { getArea: function () { return width * width; } }; Square.js var Square = require('./Square.js'); var mySquare = new Square(22); console.log('The area of my square is ' + mySquare.getArea()); main.js
  4. UMD (function (root, factory) { if (typeof define === 'function'

    && define.amd) { // AMD define(['jquery', 'underscore'], factory); } else if (typeof exports === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery'), require('underscore')); } else { // Browser globals (root is window) root.returnExports = factory(root.jQuery, root._); } } // ...
  5. var x = 3; function func(randomize) { if (randomize) {

    var x = Math.random(); return x; } return x; } func(false); var var x = 3; function func(randomize) { if (randomize) { var x = Math.random(); // (A) scope: whole function return x; } return x; // accesses the x from line A } func(false); // undefined ➔ function-scoped
  6. var x = 3; function func(randomize) { var x; if

    (randomize) { x = Math.random(); return x; } return x; } func(false); // undefined Was ist HOISTING ?! Variable declarations are always interpreted at the top of the scope var x = 3; var x;
  7. let, const let x = 3; function func(randomize) { if

    (randomize) { let x = Math.random(); return x; } return x; } func(false); // 3 ➔ block-scoped
  8. Simplified import { hashListener } from 'hashListener'; import 1. 2.

    3. export default sonar; export 1. 2. 3. import 'clipboard'; import sonar from 'sonar'; export { hashListener, foo, bar, baz }; ---
  9. How many variables are you exporting? 1 0 > 1

    Are you sure this code should be a module? export default variable export { var1,var2,... } No import Yes get a peer review import variable import { var1,var2,... } class or function
  10. export export const sqrt = Math.sqrt; export function square(x) {

    return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } multiple //------ myFunc.js ------ export default function () { ··· } // no semicolon! //------ MyClass.js ------ export default class { ··· } // no semicolon! default - anonymous
  11. import import * as name from "module-name"; basic import {

    member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import clickout as foo { hashListener as bar } from 'bigModule'; import defaultMember, * as name from "module-name"; combined import { member } from "module-name"; import { member as alias } from "module-name"; import "module-name"; import defaultMember from "module-name";
  12. Async coding! new Promise(function(resolve, reject) { ... } ); The

    Promise object is used for asynchronous computations. A Promise represents a value which may be available now, in the future, or never. -- mdn.io/promises
  13. let smallPromise = new Promise(function(resolve, reject) { setTimeout(() => {

    let divs = [].slice.call(document.querySelectorAll('div')); if(divs.length > 0) { resolve(divs); } else { reject(reason); } }, 5000); console.log('promise was made'); }); smallPromise.then(function(array) { console.log('returned promise'); console.info(`This page has ${array.length} divs`); }).catch(function(reason) { console.log(`Rejected promise: ${reason}.`); }); Do something now, and then...
  14. Promise.all() let p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500,

    "one"); }); let p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); }); Promise.all([p1, p2]).then( function(values) { console.log(values); // ['one', 'two'] }); Promise.all([array]).then(function(value) { // … });
  15. Promise.race() let p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500,

    "one"); }); let p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); }); Promise.race([p1, p2]).then(function(value) { console.log(value); // "two" // Both resolve, but p2 is faster }); Promise.race([array]).then(function(value) { // … });
  16. What is this ? A Javascript keyword. E.g.: import, export,

    new, if, else, etc... this is assigned by the JS compiler to represent the current context.
  17. function Person() { this.age = 0; setInterval(function growUp() { this.age++;

    }, 1000); } var p = new Person(); Function and dynamic this
  18. Function and dynamic this function Person() { this.age = 0;

    setInterval(function growUp() { this.age++; }, 1000); } var p = new Person(); setInterval and setTimeout run on window scope this === window
  19. Solutions for "this" (pun intended) setInterval( growUp.apply([parameters], newThis), 1000); setInterval(

    growUp().bind(newThis), 1000); var self; setInterval(function growUp() { self++; }, 1000); }
  20. function Person() { this.age = 0; setInterval(() => { this.age++;

    }, 1000); } var p = new Person(); Arrows and lexical this
  21. let allDivs = Array.from(document.querySelectorAll('div')); ME GUSTA stuff Array.from() const arr

    = ['a', NaN]; console.log(arr.findIndex(x => Number.isNaN(x))); // 1 Array.findIndex()
  22. ME GUSTA stuff 'schnitzel'.includes('z') // true ''.includes() 'schnitzel'.startsWith('s') // true

    ''.startsWith() 'schnitzel'.endsWith('l') // true ''.endsWith()
  23. Tell me MOAR! ➔ Exploring JS : exploringjs.com/es6 ➔ Mozilla

    Development Network: mdn.io ➔ Babel JS docs: babeljs.io/docs/learn-es2015 ➔ Understanding ES6 : leanpub.com/understandinges6/read ➔ You Don't Know JS (book series): github.com/getify/You-Dont-Know-JS ➔ Principals of Object Oriented Programming: leanpub.com/oopinjavascript ➔ ES6 for Everyone (online video-course): es6.io
  24. Coming next... ➔ Restful Parameters + Default + Spread ➔

    Generators ➔ Destructuring ➔ Iterators ➔ aaaaaaaaand...