Pro Yearly is on sale from $80 to $50! »

ECMAScript 6

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
July 18, 2014

ECMAScript 6

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

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

July 18, 2014
Tweet

Transcript

  1. ECMAScript 6 othree coscup

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

  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. History Syntax

  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. Standardization ⚈ Standard script language running on browser ⚈ Host

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

  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. History ⚈ Browser War ⚈ ES3 most supported ⚈ ES4

    abandoned ⚈ ES5 current ⚈ ES6 talking today 1999 2009 2014
  10. ES3 ⚈ Most supported ⚈ IE6, 7, 8

  11. ES4 ⚈ Flash, ActionScript ⚈ Abandoned

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

    spec
  13. What is ES Now ⚈ ECMAScript is spec ⚈ JavaScript

    is implementation by Mozilla ⚈ IE’s: JScript ⚈ Host by ECMA International
  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. New in JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript

  16. ES6 ⚈ Next world wide web scripting language ⚈ Lots

    of new feature ⚈ Also called ECMAScript Harmony
  17. Q&A ⚈ May I use today

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

    is using (AngularJS 2.0)
  19. ES5 You May Not Know

  20. http://youtu.be/UTEqr0IlFKY

  21. ES6 Features

  22. Major Features Module Class Iterator Syntax

  23. Syntax History Iterator 

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

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

    ! foo; //undefined
  26. let for (let i = 0; i < len; i++)

    {! // blah! }
  27. const const foo = 100;! foo; // 100! ! foo

    = 101;! ! foo; // 100
  28. Template Literals var name = 'world';! ! var greeting =

    `hello ${name}`;! ! greeting; //hello world;
  29. None
  30. ` ⚈ Grave accent ⚈ Back tick ⚈ Shell: execute

    command in between
  31. Arrow Function var square = (x) => {! return x

    * x;! };! ! var square2 = x => x * x; http://mdn.io/arrow
  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. Arrow Function // Single expression! var foo = (x) =>

    x*x! ! // Multiple expression! var foo = (x) => {! let y = x * x;! // need return! return y * x;! }
  34. Arrow Function ⚈ Auto return result of single expression ⚈

    Lexical this , like CoffeeScript
  35. Default Parameter function foo(x = 5, y = 5) {

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

    ! foo(1, 2, 3, 4, 5, 6);! // [2,3,4,5,6]
  37. Spread Operator function f(x, y, z) { }! var args

    = [0, 1, 2];! ! f.apply(null, args);! ! f(...args);
  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. Destructing Assign var a, b;! ! [a, b] = [1,

    2];! //a:1, b:2
  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. Destructing and Spread [a, ...b] = [1, 2, 3, 4,

    5];! //a:1, b:[2,3,4,5]
  42. Class class Counter {! constructor() {! this.count = 0;! }!

    tick() {! this.count++;! }! get count() {! return this.count;! }! }
  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. Class ⚈ No multiple inheritance ⚈ Define property only in

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

    structure ⚈ Use non-string data as key ⚈ Native object’s key will use toString
  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. Map Methods clear has delete keys entries set forEach values

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

    specific index ⚈ Use for…of
  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. Set Methods add forEach clear has delete values entries

  51. for…of

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

    Used to loop iterable object items
  53. Iterable Array String Map Set

  54. Create Custom Iterable Object

  55. Iterator  Syntax Use ES6 Today

  56. Iterator ⚈ A new interface in ES spec ⚈ User

    can implement custom iterator ⚈ An object with next method http://mdn.io/iterator
  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. Iterator var it = idMaker();! ! console.log(it.next().value);! console.log(it.next().value);! console.log(it.next().value);

  59. Generator ⚈ Like idMaker ⚈ Generator is a function, generate

    iterator ⚈ Different invoke will create different iterator, iterate the same list.
  60. Generator function idMaker() {! var index = 0;! return {!

    next: function () {! return {! value: index++,! done: false! };! }! };! }
  61. yield ⚈ yield is generator helper ⚈ Let you easy

    to create generator
  62. yield function* idMaker(){! var index = 0;! while(true)! yield index++;!

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

    yield index++;! } http://mdn.io/generator
  64. yield ⚈ * is the indicator to tell runtime ⚈

    yield is return point
  65. yield function* idMaker(){! var index = 0;! while(index < 6)!

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

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

    6)! yield index++;! } http://mdn.io/generator return starts here
  68. yield ⚈ Function end will return done: true

  69. Iterable ⚈ Have generator function in the object ⚈ Under

    @@iterator property
  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. Iterable Features

  72. for…of

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

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

    = (x for x in arr);
  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. Conditional Comprehension var ns = [1, 2, 3, 4];! !

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

    ! (for (i of ns) if (i % 2) i);! //iterator with values [1, 3]
  78. more… ⚈ Object Literal Extensions ⚈ Proxy ⚈ Modules, Import,

    Export ⚈ Promise ⚈ Symbol
  79. Use ES6 Today Iterator  ECMAScript 7,8…

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

  82. None
  83. Web

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

    ⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
  85. None
  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. es6-skeleton ⚈ A project seed ⚈ Based on gulp ⚈

    browserify, es6ify ⚈ livereload
  88. ECMAScript 7,8… Use ES6 Today Conclusion

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

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

  91. Type ⚈ First see in ActionScript

  92. ActionScript 3.0 Cookbook

  93. Type ⚈ TypeScript also has type imply syntax

  94. None
  95. None
  96. None
  97. Type in ES.future ⚈ Called guards

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

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

    Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
  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. Where is new Spec

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

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

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

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

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

  107. Conclusion ECMAScript 7,8…

  108. Conclusion ⚈ ES6 is coming ⚈ You can use it

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