$30 off During Our Annual Pro Sale. View Details »

ECMAScript 6

othree
July 18, 2014

ECMAScript 6

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

othree

July 18, 2014
Tweet

More Decks by othree

Other Decks in Technology

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