ECMAScript 6

talk at COSCUP 2014 (http://coscup.org/2014/)

Transcript

1. ECMAScript 6
   othree coscup
   

   View Slide

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

   View Slide

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
   

   View Slide

4. History
   Syntax
   

   View Slide

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
   

   View Slide

6. Standardization
   ⚈ Standard script language running on browser
   ⚈ Host by ECMA
   

   View Slide

7. ECMA
   ₭ᇝểₔ⚧ᄯഅ⇐὜
   

   View Slide

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
   

   View Slide

9. History
   ⚈ Browser War
   ⚈ ES3 most supported
   ⚈ ES4 abandoned
   ⚈ ES5 current
   ⚈ ES6 talking today
   1999
   2009
   2014
   

   View Slide

10. ES3
    ⚈ Most supported
    ⚈ IE6, 7, 8
    

    View Slide

11. ES4
    ⚈ Flash, ActionScript
    ⚈ Abandoned
    

    View Slide

12. ES5
    ⚈ From 3.1
    ⚈ Strict mode
    ⚈ More solid spec
    

    View Slide

13. What is ES Now
    ⚈ ECMAScript is spec
    ⚈ JavaScript is implementation by Mozilla
    ⚈ IE’s: JScript
    ⚈ Host by ECMA International
    

    View Slide

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
    

    View Slide

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

    View Slide

16. ES6
    ⚈ Next world wide web scripting language
    ⚈ Lots of new feature
    ⚈ Also called ECMAScript Harmony
    

    View Slide

17. Q&A
    ⚈ May I use today
    

    View Slide

18. Q&A
    ⚈ May I use today
    ⚈ Yes
    ⚈ Google is using (AngularJS 2.0)
    

    View Slide

19. ES5 You May Not
    Know
    

    View Slide

20. http://youtu.be/UTEqr0IlFKY
    

    View Slide

21. ES6 Features
    

    View Slide

22. Major Features
    Module Class
    Iterator Syntax
    

    View Slide

23. Syntax
    History
    Iterator
    
    

    View Slide

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

    View Slide

25. let
    {!
    let foo = 100;!
    foo; // 100!
    }!
    !
    foo; //undefined
    

    View Slide

26. let
    for (let i = 0; i < len; i++) {!
    // blah!
    }
    

    View Slide

27. const
    const foo = 100;!
    foo; // 100!
    !
    foo = 101;!
    !
    foo; // 100
    

    View Slide

28. Template Literals
    var name = 'world';!
    !
    var greeting = `hello ${name}`;!
    !
    greeting; //hello world;
    

    View Slide

29. View Slide

30. `
    ⚈ Grave accent
    ⚈ Back tick
    ⚈ Shell: execute command in between
    

    View Slide

31. Arrow Function
    var square = (x) => {!
    return x * x;!
    };!
    !
    var square2 = x => x * x;
    http://mdn.io/arrow
    

    View Slide

32. Arrow Function
    // Empty function body!
    var foo = (x) => {}!
    !
    // Single parameter!
    var foo = x => {}!
    !
    // No parameter!
    var foo = () => {}!
    !
    // More parameters!
    var foo = (x, y) => {}
    

    View Slide

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

    View Slide

34. Arrow Function
    ⚈ Auto return result of single expression
    ⚈ Lexical this , like CoffeeScript
    

    View Slide

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

    View Slide

36. Rest Parameters
    function foo(x = 5, ...rest) {!
    rest;!
    }!
    !
    foo(1, 2, 3, 4, 5, 6);!
    // [2,3,4,5,6]
    

    View Slide

37. Spread Operator
    function f(x, y, z) { }!
    var args = [0, 1, 2];!
    !
    f.apply(null, args);!
    !
    f(...args);
    

    View Slide

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]
    

    View Slide

39. Destructing Assign
    var a, b;!
    !
    [a, b] = [1, 2];!
    //a:1, b:2
    

    View Slide

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
    

    View Slide

41. Destructing and Spread
    [a, ...b] = [1, 2, 3, 4, 5];!
    //a:1, b:[2,3,4,5]
    

    View Slide

42. Class
    class Counter {!
    constructor() {!
    this.count = 0;!
    }!
    tick() {!
    this.count++;!
    }!
    get count() {!
    return this.count;!
    }!
    }
    

    View Slide

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
    

    View Slide

44. Class
    ⚈ No multiple inheritance
    ⚈ Define property only in constructor
    

    View Slide

45. Map
    ⚈ Like object, {…}
    ⚈ Key, value pair data structure
    ⚈ Use non-string data as key
    ⚈ Native object’s key will use toString
    

    View Slide

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
    

    View Slide

47. Map Methods
    clear has
    delete keys
    entries set
    forEach values
    get
    

    View Slide

48. Set
    ⚈ Like array, […]
    ⚈ Can’t get value at specific index
    ⚈ Use for…of
    

    View Slide

49. Set
    s = new Set();!
    s.add('A');!
    s.add('B');!
    s.add('C');!
    !
    for (v of s) {!
    console.log(v);!
    }!
    // A, B ,C
    

    View Slide

50. Set Methods
    add forEach
    clear has
    delete values
    entries
    

    View Slide

51. for…of
    

    View Slide

52. for...of
    ⚈ New loop method
    ⚈ Like CoffeeScript’s for...in
    ⚈ Used to loop iterable object items
    

    View Slide

53. Iterable
    Array String
    Map Set
    

    View Slide

54. Create Custom
    Iterable Object
    

    View Slide

55. Iterator
    
    Syntax
    Use ES6 Today
    

    View Slide

56. Iterator
    ⚈ A new interface in ES spec
    ⚈ User can implement custom iterator
    ⚈ An object with next method
    http://mdn.io/iterator
    

    View Slide

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
    

    View Slide

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

    View Slide

59. Generator
    ⚈ Like idMaker
    ⚈ Generator is a function, generate iterator
    ⚈ Different invoke will create different iterator,
    iterate the same list.
    

    View Slide

60. Generator
    function idMaker() {!
    var index = 0;!
    return {!
    next: function () {!
    return {!
    value: index++,!
    done: false!
    };!
    }!
    };!
    }
    

    View Slide

61. yield
    ⚈ yield is generator helper
    ⚈ Let you easy to create generator
    

    View Slide

62. yield
    function* idMaker(){!
    var index = 0;!
    while(true)!
    yield index++;!
    }
    http://mdn.io/generator
    

    View Slide

63. yield
    function* idMaker(){!
    var index = 0;!
    while(index < 6)!
    yield index++;!
    }
    http://mdn.io/generator
    

    View Slide

64. yield
    ⚈ * is the indicator to tell runtime
    ⚈ yield is return point
    

    View Slide

65. yield
    function* idMaker(){!
    var index = 0;!
    while(index < 6)!
    yield index++;!
    }
    http://mdn.io/generator
    This is a generator
    

    View Slide

66. First Call
    function* idMaker(){!
    var index = 0;!
    while(index < 6)!
    yield index++;!
    }
    http://mdn.io/generator
    return
    starts here
    

    View Slide

67. Second Call
    function* idMaker(){!
    var index = 0;!
    while(index < 6)!
    yield index++;!
    }
    http://mdn.io/generator
    return
    starts here
    

    View Slide

68. yield
    ⚈ Function end will return done: true
    

    View Slide

69. Iterable
    ⚈ Have generator function in the object
    ⚈ Under @@iterator property
    

    View Slide

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
    

    View Slide

71. Iterable Features
    

    View Slide

72. for…of
    

    View Slide

73. Comprehension
    var ns = [1, 2, 3, 4];!
    !
    var dbls = [for (i of ns) i*2];!
    !
    dbls; // [2, 4, 6, 8]
    ᾏ≌ൔ
    

    View Slide

74. CoffeeScript Syntax
    arr = [1, 2, 3, 4];!
    !
    res = (x for x in arr);
    

    View Slide

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]
    

    View Slide

76. Conditional Comprehension
    var ns = [1, 2, 3, 4];!
    !
    [for (i of ns) if (i % 2) i];!
    //[1, 3]
    

    View Slide

77. Comprehension for Iterator
    var ns = [1, 2, 3, 4];!
    !
    (for (i of ns) if (i % 2) i);!
    //iterator with values [1, 3]
    

    View Slide

78. more…
    ⚈ Object Literal Extensions
    ⚈ Proxy
    ⚈ Modules, Import, Export
    ⚈ Promise
    ⚈ Symbol
    

    View Slide

79. Use ES6 Today
    Iterator
    
    ECMAScript 7,8…
    

    View Slide

80. View Slide

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

    View Slide

82. View Slide

83. Web
    

    View Slide

84. ES6 for Web
    ⚈ Precompile ES6 to ES5
    ⚈ traceur-compiler
    ⚈ from Google
    ⚈ AngularJS 2.0
    https://github.com/google/traceur-compiler
    

    View Slide

85. View Slide

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
    

    View Slide

87. es6-skeleton
    ⚈ A project seed
    ⚈ Based on gulp
    ⚈ browserify, es6ify
    ⚈ livereload
    

    View Slide

88. ECMAScript 7,8…
    Use ES6 Today
    Conclusion
    

    View Slide

89. ES.future
    ES7 ES8
    guards macros
    contracts
    parallel arrays
    (SIMD)
    event loop concurrency
    http://www.2ality.com/2011/09/es6-8.html
    

    View Slide

90. http://youtu.be/3WgVHE5Augc
    

    View Slide

91. Type
    ⚈ First see in ActionScript
    

    View Slide

92. ActionScript 3.0 Cookbook
    

    View Slide

93. Type
    ⚈ TypeScript also has type imply syntax
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. Type in ES.future
    ⚈ Called guards
    

    View Slide

98. let x :: Number = 37;!
    !
    function f(p :: Int) :: cType {}!
    !
    let o = {!
    a :: Number : 42,!
    b: “b"!
    };
    

    View Slide

99. let x :: Number = 37;!
    !
    function f(p :: Int) :: cType {}!
    !
    let o = {!
    a :: Number : 42,!
    b: “b"!
    };
    

    View Slide

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/
     

     View Slide

101. Where is new Spec
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

107. Conclusion
     ECMAScript 7,8…
     

     View Slide

108. Conclusion
     ⚈ ES6 is coming
     ⚈ You can use it today
     ⚈ Get ready for ES7, 8, 9, 10, 11
     

     View Slide

109. Q&A
     

     View Slide