ECMAScript 6

Transcript

1. 1.

   ECMAScript 6 othree coscup

2. 2.

   https://github.com/voodootikigod/logo.js

3. 3.

   Self Intro @othree https://blog.othree.net twitter web standards murmur flickr photo

   guy for confs github html5.vim, tern-coffee… ntust phd candidate
4. 4.

   History Syntax

5. 5.

   1996 1997 1998 1999 History JavaScript 1.0 JScript 1.0 JavaScript

   1.1 JScript 2.0 JScript 3.0 JavaScript 1.2 JavaScript 1.3 Netscape Microsoft
6. 6.

   Standardization ⚈ Standard script language running on browser ⚈ Host

   by ECMA
7. 7.

   ECMA ₭ᇝểₔ⚧ᄯഅ⇐὜

8. 8.

   ECMAScript ⚈ Standard of JavaScript ⚈ ECMA-262, also called ECMAScript

   ⚈ 1.0, 2.0 published around 1997-1998 ⚈ Current Edition: 5.1 http://zh.wikipedia.org/wiki/ECMAScript
9. 9.

   History ⚈ Browser War ⚈ ES3 most supported ⚈ ES4

   abandoned ⚈ ES5 current ⚈ ES6 talking today 1999 2009 2014
10. 10.

    ES3 ⚈ Most supported ⚈ IE6, 7, 8

11. 11.

    ES4 ⚈ Flash, ActionScript ⚈ Abandoned

12. 12.

    ES5 ⚈ From 3.1 ⚈ Strict mode ⚈ More solid

    spec
13. 13.

    What is ES Now ⚈ ECMAScript is spec ⚈ JavaScript

    is implementation by Mozilla ⚈ IE’s: JScript ⚈ Host by ECMA International
14. 14.

    JavaScript 1.5 ECMAScript 3 1.6 array extras + array and

    string generics + E4X 1.7 Pythonic generators + iterators + let 1.8 generator expressions + expression closures 1.81 native JSON support 1.85 ECMAScript 5 compliance 1.86 more ES6 futures http://en.wikipedia.org/wiki/JavaScript#Version_history
15. 15.

    New in JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript

16. 16.

    ES6 ⚈ Next world wide web scripting language ⚈ Lots

    of new feature ⚈ Also called ECMAScript Harmony
17. 17.

    Q&A ⚈ May I use today

18. 18.

    Q&A ⚈ May I use today ⚈ Yes ⚈ Google

    is using (AngularJS 2.0)
19. 19.

    ES5 You May Not Know

20. 20.

    http://youtu.be/UTEqr0IlFKY

21. 21.

    ES6 Features

22. 22.

    Major Features Module Class Iterator Syntax

23. 23.

    Syntax History Iterator 
    

24. 24.

    let ⚈ Block scope local variable http://mdn.io/let

25. 25.

    let {! let foo = 100;! foo; // 100! }!

    ! foo; //undefined
26. 26.

    let for (let i = 0; i < len; i++)

    {! // blah! }
27. 27.

    const const foo = 100;! foo; // 100! ! foo

    = 101;! ! foo; // 100
28. 28.

    Template Literals var name = 'world';! ! var greeting =

    `hello ${name}`;! ! greeting; //hello world;
29. 29.

    None
30. 30.

    ` ⚈ Grave accent ⚈ Back tick ⚈ Shell: execute

    command in between
31. 31.

    Arrow Function var square = (x) => {! return x

    * x;! };! ! var square2 = x => x * x; http://mdn.io/arrow
32. 32.

    Arrow Function // Empty function body! var foo = (x)

    => {}! ! // Single parameter! var foo = x => {}! ! // No parameter! var foo = () => {}! ! // More parameters! var foo = (x, y) => {}
33. 33.

    Arrow Function // Single expression! var foo = (x) =>

    x*x! ! // Multiple expression! var foo = (x) => {! let y = x * x;! // need return! return y * x;! }
34. 34.

    Arrow Function ⚈ Auto return result of single expression ⚈

    Lexical this , like CoffeeScript
35. 35.

    Default Parameter function foo(x = 5, y = 5) {

    }
36. 36.

    Rest Parameters function foo(x = 5, ...rest) {! rest;! }!

    ! foo(1, 2, 3, 4, 5, 6);! // [2,3,4,5,6]
37. 37.

    Spread Operator function f(x, y, z) { }! var args

    = [0, 1, 2];! ! f.apply(null, args);! ! f(...args);
38. 38.

    Spread Operator var arg2 = [...args, 3, 4];! // [0,1,2,3,4]!

    ! var arg3 = arg.push(...arg2);! // [0,1,2,0,1,2,3,4]
39. 39.

    Destructing Assign var a, b;! ! [a, b] = [1,

    2];! //a:1, b:2
40. 40.

    Destructing Assign [a, b] = [b, a];! //swap! ! [a,

    ,[b, c]] = [1, 0, [2, 3]];! //a:1, b:2, c:3! ! {lan: a, lon: b} = getPOS();! //object destructing
41. 41.

    Destructing and Spread [a, ...b] = [1, 2, 3, 4,

    5];! //a:1, b:[2,3,4,5]
42. 42.

    Class class Counter {! constructor() {! this.count = 0;! }!

    tick() {! this.count++;! }! get count() {! return this.count;! }! }
43. 43.

    Class Extends class People extends Counter {! constructor(people) {! this.people

    = people;! for (let p in people) {! this.tick();! }! }! }! ! var p = new People([1,2,3,4,5]);! p.count; //5
44. 44.

    Class ⚈ No multiple inheritance ⚈ Define property only in

    constructor
45. 45.

    Map ⚈ Like object, {…} ⚈ Key, value pair data

    structure ⚈ Use non-string data as key ⚈ Native object’s key will use toString
46. 46.

    Map m = new Map();! m.set(true, 'T');! m.set(false, 'F');! !

    m.size; //2! ! m.get(true); //"T"! m.get(false); //"F"! ! m.get(1); // undefined
47. 47.

    Map Methods clear has delete keys entries set forEach values

    get
48. 48.

    Set ⚈ Like array, […] ⚈ Can’t get value at

    specific index ⚈ Use for…of
49. 49.

    Set s = new Set();! s.add('A');! s.add('B');! s.add('C');! ! for

    (v of s) {! console.log(v);! }! // A, B ,C
50. 50.

    Set Methods add forEach clear has delete values entries

51. 51.

    for…of

52. 52.

    for...of ⚈ New loop method ⚈ Like CoffeeScript’s for...in ⚈

    Used to loop iterable object items
53. 53.

    Iterable Array String Map Set

54. 54.

    Create Custom Iterable Object

55. 55.

    Iterator 
     Syntax Use ES6 Today

56. 56.

    Iterator ⚈ A new interface in ES spec ⚈ User

    can implement custom iterator ⚈ An object with next method http://mdn.io/iterator
57. 57.

    iterator.next ⚈ Return an object with value and done! ⚈

    value is next item’s value ⚈ done shows is this iterator finished ⚈ Can’t reuse
58. 58.

    Iterator var it = idMaker();! ! console.log(it.next().value);! console.log(it.next().value);! console.log(it.next().value);

59. 59.

    Generator ⚈ Like idMaker ⚈ Generator is a function, generate

    iterator ⚈ Different invoke will create different iterator, iterate the same list.
60. 60.

    Generator function idMaker() {! var index = 0;! return {!

    next: function () {! return {! value: index++,! done: false! };! }! };! }
61. 61.

    yield ⚈ yield is generator helper ⚈ Let you easy

    to create generator
62. 62.

    yield function* idMaker(){! var index = 0;! while(true)! yield index++;!

    } http://mdn.io/generator
63. 63.

    yield function* idMaker(){! var index = 0;! while(index < 6)!

    yield index++;! } http://mdn.io/generator
64. 64.

    yield ⚈ * is the indicator to tell runtime ⚈

    yield is return point
65. 65.

    yield function* idMaker(){! var index = 0;! while(index < 6)!

    yield index++;! } http://mdn.io/generator This is a generator
66. 66.

    First Call function* idMaker(){! var index = 0;! while(index <

    6)! yield index++;! } http://mdn.io/generator return starts here
67. 67.

    Second Call function* idMaker(){! var index = 0;! while(index <

    6)! yield index++;! } http://mdn.io/generator return starts here
68. 68.

    yield ⚈ Function end will return done: true

69. 69.

    Iterable ⚈ Have generator function in the object ⚈ Under

    @@iterator property
70. 70.

    Iterable ID = {};! ! ID['@@iterator'] = idMaker;! //or use

    Symbol! ID[Symbol.iterator] = idMaker;! ! for (id of ID) {! id;! //0,1,2,3,4,5! } http://people.mozilla.org/~jorendorff/es6-draft.html#table-1
71. 71.

    Iterable Features

72. 72.

    for…of

73. 73.

    Comprehension var ns = [1, 2, 3, 4];! ! var

    dbls = [for (i of ns) i*2];! ! dbls; // [2, 4, 6, 8] ᾏ≌ൔ
74. 74.

    CoffeeScript Syntax arr = [1, 2, 3, 4];! ! res

    = (x for x in arr);
75. 75.

    2 Level Comprehension var ms = [1, 2, 3, 4];!

    var ns = [2, 3, 4, 5];! ! [for (i of ms) for (j of ns) i*j];! // [2, 6, 12, 20]
76. 76.

    Conditional Comprehension var ns = [1, 2, 3, 4];! !

    [for (i of ns) if (i % 2) i];! //[1, 3]
77. 77.

    Comprehension for Iterator var ns = [1, 2, 3, 4];!

    ! (for (i of ns) if (i % 2) i);! //iterator with values [1, 3]
78. 78.

    more… ⚈ Object Literal Extensions ⚈ Proxy ⚈ Modules, Import,

    Export ⚈ Promise ⚈ Symbol
79. 79.

    Use ES6 Today Iterator 
     ECMAScript 7,8…

80. 80.

    None
81. 81.

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

82. 82.

    None
83. 83.

    Web

84. 84.

    ES6 for Web ⚈ Precompile ES6 to ES5 ⚈ traceur-compiler

    ⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
85. 85.

    None
86. 86.

    in Develop ⚈ Need watch and compile when file changes

    ⚈ Use gulp to watch ⚈ gulp-traceur or es6ify to compile ⚈ https://github.com/othree/es6-skeleton
87. 87.

    es6-skeleton ⚈ A project seed ⚈ Based on gulp ⚈

    browserify, es6ify ⚈ livereload
88. 88.

    ECMAScript 7,8… Use ES6 Today Conclusion

89. 89.

    ES.future ES7 ES8 guards macros contracts parallel arrays (SIMD) event

    loop concurrency http://www.2ality.com/2011/09/es6-8.html
90. 90.

    http://youtu.be/3WgVHE5Augc

91. 91.

    Type ⚈ First see in ActionScript

92. 92.

    ActionScript 3.0 Cookbook

93. 93.

    Type ⚈ TypeScript also has type imply syntax

94. 94.

    None
95. 95.

    None
96. 96.

    None
97. 97.

    Type in ES.future ⚈ Called guards

98. 98.

    let x :: Number = 37;! ! function f(p ::

    Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
99. 99.

    let x :: Number = 37;! ! function f(p ::

    Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
100. 100.

     Benefit ⚈ Write more solid code ⚈ Better Performance ⚈

     JS engine detects variable type change now ⚈ JSLint: confusion: true http://www.html5rocks.com/en/tutorials/speed/v8/
101. 101.

     Where is new Spec

102. 102.

     Traceur-Compiler Doc https://github.com/google/traceur-compiler/wiki/LanguageFeatures

103. 103.

     ES Wiki http://wiki.ecmascript.org/doku.php

104. 104.

     Spec Draft http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

105. 105.

     ES Wiki ⚈ strawman: pre proposal ⚈ harmony: TC39 approved

     proposal
106. 106.

     TC39 Meeting Notes https://github.com/rwaldron/tc39-notes

107. 107.

     Conclusion ECMAScript 7,8…

108. 108.

     Conclusion ⚈ ES6 is coming ⚈ You can use it

     today ⚈ Get ready for ES7, 8, 9, 10, 11
109. 109.

     Q&A