Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fluent14

8,230 views

Published on

My Fluent 2014 keynote slides, without demos (Intel SIMD, BananaBread with Boon/FreeDOOM inside, Epic Games Unreal Tournament on UE3, Epic Games Soul on UE4).

Published in: Technology

Fluent14

  1. 1. JavaScript: the High Road & the Low Road Brendan Eich @BrendanEich <brendan@mozilla.org> Wednesday, March 12, 14
  2. 2. Prologue Wednesday, March 12, 14
  3. 3. If Web Dev is like... • ... sewing with mittens • ... juggling kittens • ... fighting evil with one hand cut off Wednesday, March 12, 14
  4. 4. Wednesday, March 12, 14
  5. 5. Wednesday, March 12, 14
  6. 6. Wednesday, March 12, 14
  7. 7. https://twitter.com/_Lady_Jedi_/status/404082867048681472 Wednesday, March 12, 14
  8. 8. Then JavaScript is like... • ... having a chainsaw for a hand Wednesday, March 12, 14
  9. 9. Wednesday, March 12, 14
  10. 10. (Me after hacking JS in 10 days) Wednesday, March 12, 14
  11. 11. Flash back to 1995 • (What’s with that hair?) Wednesday, March 12, 14
  12. 12. Wednesday, March 12, 14
  13. 13. Wednesday, March 12, 14
  14. 14. Wednesday, March 12, 14
  15. 15. Groovy Wednesday, March 12, 14
  16. 16. The High Road Wednesday, March 12, 14
  17. 17. Harmony - ES6 • var  obj  =  {[“key_”  +  nextId()]:  value}; • var  obj  =  {method()  {  return  42;  }}; • var  square  =  x  =>  x  *  x; • class  Point  {    constructor(x,  y)  {        this.x  =  x,  this.y  =  y;    }    add(p)  {        this.x  +=  p.x,  this.y  +=  p.y;    } } • class  MyNodeList  extends  NodeList  {...} • let  x  =  “outer”;  {let  x  =  “inner”;  ...} • const  TAU  =  2  *  Math.PI; • function  f(a  =  1,  b  =  2  *  a)  {...} • let  rotateArray  =  (h,  ...t)  =>  t.push(h); • let  a  =  [1,  2,  3];  rotateArray(0,  ...a); • let  b  =  [0,  ...a,  4,  5,  6]; • export  function  transcode(src,  url)  {...} • import  {keys,  items}  from  “itertools”; • for  (let  [k,v]  of  items(o))  print(k,v); • let  eager  =  [for  (v  of  values(o))  2  *  v]; • let  lazy    =  (for  (v  of  values(o))  2  *  v); • function  iter()  {  return  {next()  {...};  } • function*  gen()  {  yield  1;  yield  2;  } Wednesday, March 12, 14
  18. 18. Harmony - ES6, cont • console.log(`interpolate  ${x}`); • let  lexer  =  /w+|d+/y;  //  y  for  stickY • map  =  Map([[‘key’,  42],  [obj,  “foo”]]); map.get(‘key’)  //  42 map.get(obj)      //  “foo” map.set(obj,  “bar”) map.get(obj)  //  “bar” map.size          //  2 for  (let  [k,  v]  of  map)  print(k,  v) map.delete(‘key’);  map.size  //  1 • set  =  Set([0,  1,  2,  3]); set.has(0)  //  true set.add(9) set.size  //  5 for  (let  elt  of  set)  print(elt) set.delete(9);  set.size  //  4 • let  objectCache  =  WeakMap();  //  advanced • var  proxy  =  new  Proxy(target,  handler); • const  Point  =    new  StructType({x:  uint32,  y:  uint32}); • const  Triangle  =  new  ArrayType(Point,  3); • {  function  in_block()  {  return  42;  }  ...  } • let  {x,  y}  =  aPoint; • let  [v1,  v2,  v3]  =  aTriangle; • Object.assign(target,  source); • Object.mixin(target,  source); • Promises,  Symbols,  and  more... Wednesday, March 12, 14
  19. 19. The module tag • <script> System.import(“myapp”).then(app  =>  {    //  ... }); </script> • <module> import  app  from  “myapp”; //  ... </module> async, strict, isolated top-level body scope FTW https://github.com/dherman/web-modules/blob/master/module-tag/explainer.md Wednesday, March 12, 14
  20. 20. Harmony - ES6 Compat Wednesday, March 12, 14
  21. 21. ES6 Resources • https://github.com/google/traceur-compiler • http://people.mozilla.org/~jorendorff/es6-draft.html • http://wiki.ecmascript.org/doku.php? id=harmony:specification_drafts • http://kangax.github.io/es5-compat-table/es6/ Wednesday, March 12, 14
  22. 22. Harmony - ES7 • Object.observe(target,  observer)                  (High  Road) http://wiki.ecmascript.org/doku.php?id=harmony:observe • SIMD  intrinsics,  e.g.  SIMD.add(a,  b)          (Low  Road) https://github.com/johnmccutchan/ecmascript_simd • Value  objects  -­‐  int64,  decimal,  etc.          (Low  Road) Wednesday, March 12, 14
  23. 23. The Low Road Wednesday, March 12, 14
  24. 24. Value Objects • int64, uint64 • int32x4, int32x8 (SIMD) • float32 (to/from Float32Array today) • float32x4, float32x8 (SIMD) • bignum • decimal • rational • complex Wednesday, March 12, 14
  25. 25. Overloadable Operators • | ^ & • == • < <= • << >> >>> • + - • * / % • ~ boolean-test!! unary- unary+ Wednesday, March 12, 14
  26. 26. Literal Syntax • int64(0) ==> 0L // as in C# • uint64(0) ==> 0UL // as in C# • float32(0) ==> 0f // as in C# • bignum(0) ==> 0n // avoid i/I • decimal(0) ==> 0m // or M, C/F# • Can we generalize? 0u for unit u translates via lookup table at compile time to units.u(0) • Predefine units.L = int64, etc. Wednesday, March 12, 14
  27. 27. Possible Operators API function addPointAndNumber(a, b) { return Point(a.x + b, a.y + b); } Function.defineOperator('+', addPointAndNumber, Point, Number); function addNumberAndPoint(a, b) { return Point(a + b.x, a + b.y); } Function.defineOperator('+', addNumberAndPoint, Number, Point); function addPoints(a, b) { return Point(a.x + b.x, a.y + b.y); } Function.defineOperator('+', addPoints, Point, Point); Wednesday, March 12, 14
  28. 28. SIMD Single Instruction, Multiple Data (SSE/AVX, NEON, etc.) Wednesday, March 12, 14
  29. 29. SIMD intrinsics • Game, DSP, other low-road hackers need them • John McCutchan added them to DartVM • Dart-to-the-heart? No, Dart2JS needs ‘em in JS • A Google, Intel, Mozilla, Ecma TC39 joint Wednesday, March 12, 14
  30. 30. Possible ES7 Polyfillable SIMD API https://github.com/johnmccutchan/ecmascript_simd var a = float32x4(1.0, 2.0, 3.0, 4.0); var b = float32x4(5.0, 6.0, 7.0, 8.0); var c = SIMD.float32x4.add(a, b); // Also SIMD {sub,mul,div,neg,abs} etc. // See ES7 Value Objects for some sweet // operator overloading sugar. Wednesday, March 12, 14
  31. 31. Why Operator Syntax Matters A comment from Cameron Purdy’s blog: “At a client gig, they were doing business/financial coding, so were using BigDecimal. Of course, .add() and friends is too difficult, so they ended up with roughly: BigDecimal subA = ... BigDecimal subB = ... BigDecimal total = new BigDecimal( subA.doubleValue() + subB.doubleValue() ); It was beautiful.” Posted by Bob McWhirter on October 31, 2005 at 08:17 AM EST Wednesday, March 12, 14
  32. 32. Why decimal? AKA Who can spot the bug? Wednesday, March 12, 14
  33. 33. Where the Low Road goes Wednesday, March 12, 14
  34. 34. Nearly Native Performance Wednesday, March 12, 14
  35. 35. Demos Wednesday, March 12, 14
  36. 36. Epilogue: The Two Roads Converge Wednesday, March 12, 14
  37. 37. Extensible Web Manifesto • http://extensiblewebmanifesto.org/ • Focus on safe, low-road capabilities for the Web platform • Expose capabilities that explain Web features, e.g., HTML • Complete the high-road language work in ES6 and ES7 • Develop and test new high-road libraries on GitHub • Prioritize efforts that follow these recommendations Wednesday, March 12, 14
  38. 38. Always Bet On...WTF Evolution? Wednesday, March 12, 14
  39. 39. Wednesday, March 12, 14
  40. 40. Conclusion • First they said that JS + the Web stack couldn’t do “Rich Internet Applications” • Then they said it couldn’t be fast enough • Then they said it couldn’t be fixed • Wrong every time! • Always bet on {JS, HTML,WebGL, ...} • Really, always bet on Web Developers Wednesday, March 12, 14

×