ECMAScript 6

787
-1

Published on

talk at COSCUP 2014

ECMAScript 6

  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.0JavaScript 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. ` ⚈ Grave accent ⚈ Back tick ⚈ Shell: execute command in between
  30. 30. Arrow Function var square = (x) => {! return x * x;! };! ! var square2 = x => x * x; http://mdn.io/arrow
  31. 31. Arrow Function // Empty function body! var foo = (x) => {}! ! // Single parameter! var foo = x => {}! ! // No parameter! var foo = () => {}! ! // More parameters! var foo = (x, y) => {}
  32. 32. Arrow Function // Single expression! var foo = (x) => x*x! ! // Multiple expression! var foo = (x) => {! let y = x * x;! // need return! return y * x;! }
  33. 33. Arrow Function ⚈ Auto return result of single expression ⚈ Lexical this , like CoffeeScript
  34. 34. Default Parameter function foo(x = 5, y = 5) { }
  35. 35. Rest Parameters function foo(x = 5, ...rest) {! rest;! }! ! foo(1, 2, 3, 4, 5, 6);! // [2,3,4,5,6]
  36. 36. Spread Operator function f(x, y, z) { }! var args = [0, 1, 2];! ! f.apply(null, args);! ! f(...args);
  37. 37. 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]
  38. 38. Destructing Assign var a, b;! ! [a, b] = [1, 2];! //a:1, b:2
  39. 39. 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
  40. 40. Destructing and Spread [a, ...b] = [1, 2, 3, 4, 5];! //a:1, b:[2,3,4,5]
  41. 41. Class class Counter {! constructor() {! this.count = 0;! }! tick() {! this.count++;! }! get count() {! return this.count;! }! }
  42. 42. 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
  43. 43. Class ⚈ No multiple inheritance ⚈ Define property only in constructor
  44. 44. Map ⚈ Like object, {…} ⚈ Key, value pair data structure ⚈ Use non-string data as key ⚈ Native object’s key will use toString
  45. 45. 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
  46. 46. Map Methods clear has delete keys entries set forEach values get
  47. 47. Set ⚈ Like array, […] ⚈ Can’t get value at specific index ⚈ Use for…of
  48. 48. Set s = new Set();! s.add('A');! s.add('B');! s.add('C');! ! for (v of s) {! console.log(v);! }! // A, B ,C
  49. 49. Set Methods add forEach clear has delete values entries
  50. 50. for…of
  51. 51. for...of ⚈ New loop method ⚈ Like CoffeeScript’s for...in ⚈ Used to loop iterable object items
  52. 52. Iterable Array String Map Set
  53. 53. Create Custom Iterable Object
  54. 54. Iterator Syntax Use ES6 Today
  55. 55. Iterator ⚈ A new interface in ES spec ⚈ User can implement custom iterator ⚈ An object with next method http://mdn.io/iterator
  56. 56. iterator.next ⚈ Return an object with value and done! ⚈ value is next item’s value ⚈ done shows is this iterator finished ⚈ Can’t reuse
  57. 57. Iterator var it = idMaker();! ! console.log(it.next().value);! console.log(it.next().value);! console.log(it.next().value);
  58. 58. Generator ⚈ Like idMaker ⚈ Generator is a function, generate iterator ⚈ Different invoke will create different iterator, iterate the same list.
  59. 59. Generator function idMaker() {! var index = 0;! return {! next: function () {! return {! value: index++,! done: false! };! }! };! }
  60. 60. yield ⚈ yield is generator helper ⚈ Let you easy to create generator
  61. 61. yield function* idMaker(){! var index = 0;! while(true)! yield index++;! } http://mdn.io/generator
  62. 62. yield function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator
  63. 63. yield ⚈ * is the indicator to tell runtime ⚈ yield is return point
  64. 64. yield function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator This is a generator
  65. 65. First Call function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
  66. 66. Second Call function* idMaker(){! var index = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
  67. 67. yield ⚈ Function end will return done: true
  68. 68. Iterable ⚈ Have generator function in the object ⚈ Under @@iterator property
  69. 69. 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
  70. 70. Iterable Features
  71. 71. for…of
  72. 72. Comprehension var ns = [1, 2, 3, 4];! ! var dbls = [for (i of ns) i*2];! ! dbls; // [2, 4, 6, 8] 簡約式
  73. 73. CoffeeScript Syntax arr = [1, 2, 3, 4];! ! res = (x for x in arr);
  74. 74. 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]
  75. 75. Conditional Comprehension var ns = [1, 2, 3, 4];! ! [for (i of ns) if (i % 2) i];! //[1, 3]
  76. 76. Comprehension for Iterator var ns = [1, 2, 3, 4];! ! (for (i of ns) if (i % 2) i);! //iterator with values [1, 3]
  77. 77. more… ⚈ Object Literal Extensions ⚈ Proxy ⚈ Modules, Import, Export ⚈ Promise ⚈ Symbol
  78. 78. Use ES6 Today Iterator ECMAScript 7,8…
  79. 79. http://kangax.github.io/compat-table/es6/
  80. 80. Web
  81. 81. ES6 for Web ⚈ Precompile ES6 to ES5 ⚈ traceur-compiler ⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
  82. 82. 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
  83. 83. es6-skeleton ⚈ A project seed ⚈ Based on gulp ⚈ browserify, es6ify ⚈ livereload
  84. 84. ECMAScript 7,8… Use ES6 Today Conclusion
  85. 85. ES.future ES7 ES8 guards macros contracts parallel arrays (SIMD) event loop concurrency http://www.2ality.com/2011/09/es6-8.html
  86. 86. http://youtu.be/3WgVHE5Augc
  87. 87. Type ⚈ First see in ActionScript
  88. 88. ActionScript 3.0 Cookbook
  89. 89. Type ⚈ TypeScript also has type imply syntax
  90. 90. Type in ES.future ⚈ Called guards
  91. 91. let x :: Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
  92. 92. let x :: Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
  93. 93. 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/
  94. 94. Where is new Spec
  95. 95. Traceur-Compiler Doc https://github.com/google/traceur-compiler/wiki/LanguageFeatures
  96. 96. ES Wiki http://wiki.ecmascript.org/doku.php
  97. 97. Spec Draft http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
  98. 98. ES Wiki ⚈ strawman: pre proposal ⚈ harmony: TC39 approved proposal
  99. 99. TC39 Meeting Notes https://github.com/rwaldron/tc39-notes
  100. 100. Conclusion ECMAScript 7,8…
  101. 101. Conclusion ⚈ ES6 is coming ⚈ You can use it today ⚈ Get ready for ES7, 8, 9, 10, 11
  102. 102. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×