Front End London: Intro to ES6

Transcript

1. 1.

   None
2. 2.

   @Jack_Franklin

3. 3.

   None
4. 4.

   None
5. 5.

   Arrow Functions

6. 6.

   var nums = [1,2,3]; ! nums.map(function(x) { return x *

   2; }); ! nums.map((x) => x * 2);
7. 7.

   var nums = [1,2,3]; ! nums.map(function(x) { return x *

   2; }); ! nums.map((x) => x * 2);
8. 8.

   var jack = { name: ‘jack’, friends: [‘james’, ‘steve’], printFriends:

   function() { this.friends.forEach(function(f) { log(this.name, ‘knows’, f);
 })
 } }; ! // undefined knows james // undefined knows steve
9. 9.

   var jack = { name: ‘jack’, friends: [‘james’, ‘steve’], printFriends:

   function() { this.friends.forEach((f) => { log(this.name, ‘knows’, f);
 })
 } }; ! // jack knows james // jack knows steve
10. 10.

    var someAjax = { name: ‘jack’, get: function() { $.getJSON(url,

    function(d) { log(this.name, d); })
 } };
11. 11.

    var someAjax = { name: ‘jack’, get: function() { $.getJSON(url,(d)

    => { log(this.name, d); })
 } };
12. 12.

    Classes

13. 13.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
14. 14.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
15. 15.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
16. 16.

    var jack = new Person(‘jack’, 22); ! jack.about(); //=> jack

    22
17. 17.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
18. 18.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
19. 19.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
20. 20.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
21. 21.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; ! var jack = new Son(‘jack’, 22); jack.about(); //=> jack 22 jack.son; //=> true
22. 22.

    Object Literals

23. 23.

    var jack = { name: ‘jack’, age: 22, about() {

    log(this.name, this.age);
 } };
24. 24.

    var jack = { ['hello_' + (() => 'world')()]: 42

    }; ! console.log(jack.hello_world); // 42
25. 25.

    Template Strings

26. 26.

    `In JavaScript '\n' is a line-feed.` !

27. 27.

    var f =`Multiline strings with back ticks in ES6.` !

    console.log(f); ! Multiline strings with back ticks in ES6
28. 28.

    var name = ‘jack’; var age = 22; `${name} is

    ${age} years old`
29. 29.

    Destructuring

30. 30.

    var [a, b] = [1, 2]; ! a == 1

    ! b == 2
31. 31.

    var [a, ,b] = [1, 2, 3]; ! a ==

    1 ! b == 3
32. 32.

    var {a, b} = {a: 2, b: 3} ! a

    == 2 ! b == 3
33. 33.

    var {a, b} = {b: 3} ! a == undefined

    ! b == 3
34. 34.

    function getPerson() { return { name: ‘jack’, age: 22 }


    }; ! var {name, age} = getPerson();
35. 35.

    Function Arguments

36. 36.

    function getInfo(print: false) { if(print) { log(this.name, this.age);
 } else

    { return `${this.name} ${this.age}`
 }
 } ! getInfo();
37. 37.

    function length(...nums) { log(nums.length); }; ! length(1,2,3); // 3

38. 38.

    function total(x, y, z) { log(x + y + z);

    }; ! total(1, 2, 3) ! total.apply(null, [1, 2, 3]); ! total(...[1, 2, 3]);
39. 39.

    function total(x, y, z) { log(x + y + z);

    }; ! total(1, 2, 3) ! total.apply(null, [1, 2, 3]); ! total(...[1, 2, 3]);
40. 40.

    function foo({name, age}) { console.log(name, age); } ! foo({ name:

    'jack', age: 22}) ! //=> jack, 22
41. 41.

    Scope

42. 42.

    Global Scope (window) Function Scope

43. 43.

    foo = 2; ! var fad = 2; ! !

    function() { bar = 3; ! var baz = 4;
 } ! foo: 2, fad: 2, bar: 3 baz: 4
44. 44.

    function() { if(x) { var foo = 3; } var

    baz = 4;
 } foo: 3, baz: 4
45. 45.

    Global Scope (window) Function Scope Block Scope

46. 46.

    foo = 2; ! function() { var baz = 4;

    if(x) { let y = 2;
 }
 } ! foo: 2 ! baz: 4 ! y: 2
47. 47.

    foo = 2; ! function() { var baz = 4;

    if(x) { var z = 3; let y = 2;
 }
 } ! foo: 2 ! baz: 4, z: 3 ! y: 2
48. 48.

    Modules

49. 49.

    var foo = 2; var bar = 3; ! export

    {foo, bar}; import {foo} from ‘app’ ! console.log(foo); // 2 app.js foo.js
50. 50.

    export var foo = 2; import {foo} from ‘app’ !

    console.log(foo); // 2 app.js foo.js
51. 51.

    export default function() { return 2; }; import foo from

    ‘app’ ! console.log(foo()); // 2 app.js foo.js
52. 52.

    export var foo = 2; export var bar = 3;

    module stuff from ‘app’; ! stuff.foo // 2 stuff.bar // 3 app.js foo.js
53. 53.

    Generators

54. 54.

    Person.findOne({id: 5}, (per) => { // person has been got

    Location.findOne(…, (loc) => { // location has been got });
 });
55. 55.

    var per = yield Person.findOne(…); ! var loc = yield

    Location.findOne(…); ! // async but reads as sync! !
56. 56.

    ES6 Today

57. 57.

    http://kangax.github.io/compat-table/es6/

58. 58.

    chrome://flags

59. 59.

    Traceur https://github.com/google/traceur-compiler

60. 60.

    node --harmony

61. 61.

    ES6 module transpiler https://github.com/esnext/es6-module-transpiler

62. 62.

    New projects should use ES6 Modules

63. 63.

    Maps, Sets, Proxies, Promises, Symbols, Module Loaders, new Object APIs

64. 64.

    https://github.com/ jackfranklin/epic-fel-es6- today-links

65. 65.

    @Jack_Franklin