JavaScript: the High
Road & the Low Road
Brendan Eich
@BrendanEich <brendan@mozilla.org>
Wednesday, March 12, 14
Prologue
Wednesday, March 12, 14
If Web Dev is like...
• ... sewing with mittens
• ... juggling kittens
• ... fighting evil with one hand cut off
Wednesday,...
Wednesday, March 12, 14
Wednesday, March 12, 14
Wednesday, March 12, 14
https://twitter.com/_Lady_Jedi_/status/404082867048681472
Wednesday, March 12, 14
Then JavaScript is like...
• ... having a chainsaw for a hand
Wednesday, March 12, 14
Wednesday, March 12, 14
(Me after hacking JS in 10 days)
Wednesday, March 12, 14
Flash back to 1995
• (What’s with that hair?)
Wednesday, March 12, 14
Wednesday, March 12, 14
Wednesday, March 12, 14
Wednesday, March 12, 14
Groovy
Wednesday, March 12, 14
The High Road
Wednesday, March 12, 14
Harmony - ES6
• var	
  obj	
  =	
  {[“key_”	
  +	
  nextId()]:	
  value};
• var	
  obj	
  =	
  {method()	
  {	
  return	
 ...
Harmony - ES6, cont
• console.log(`interpolate	
  ${x}`);
• let	
  lexer	
  =	
  /w+|d+/y;	
  //	
  y	
  for	
  stickY
• m...
The module tag
• <script>
System.import(“myapp”).then(app	
  =>	
  {
	
  	
  //	
  ...
});
</script>
• <module>
import	
  ...
Harmony - ES6 Compat
Wednesday, March 12, 14
ES6 Resources
• https://github.com/google/traceur-compiler
• http://people.mozilla.org/~jorendorff/es6-draft.html
• http:/...
Harmony - ES7
• Object.observe(target,	
  observer)	
  	
  	
  	
  	
  	
  	
  	
  	
  (High	
  Road)
http://wiki.ecmascri...
The Low Road
Wednesday, March 12, 14
Value Objects
• int64, uint64
• int32x4, int32x8 (SIMD)
• float32 (to/from Float32Array today)
• float32x4, float32x8 (SIM...
Overloadable Operators
• | ^ &
• ==
• < <=
• << >> >>>
• + -
• * / %
• ~ boolean-test!! unary- unary+
Wednesday, March 12,...
Literal Syntax
• int64(0) ==> 0L // as in C#
• uint64(0) ==> 0UL // as in C#
• float32(0) ==> 0f // as in C#
• bignum(0) =...
Possible Operators API
function addPointAndNumber(a, b) {
return Point(a.x + b, a.y + b);
}
Function.defineOperator('+', a...
SIMD
Single Instruction, Multiple Data (SSE/AVX, NEON, etc.)
Wednesday, March 12, 14
SIMD intrinsics
• Game, DSP, other low-road hackers need them
• John McCutchan added them to DartVM
• Dart-to-the-heart? N...
Possible ES7 Polyfillable SIMD API
https://github.com/johnmccutchan/ecmascript_simd
var a = float32x4(1.0, 2.0, 3.0, 4.0);
...
Why Operator Syntax Matters
A comment from Cameron Purdy’s blog:
“At a client gig, they were doing business/financial codin...
Why decimal? AKA Who can spot the bug?
Wednesday, March 12, 14
Where the Low Road goes
Wednesday, March 12, 14
Nearly Native Performance
Wednesday, March 12, 14
Demos
Wednesday, March 12, 14
Epilogue:
The Two Roads Converge
Wednesday, March 12, 14
Extensible Web Manifesto
• http://extensiblewebmanifesto.org/
• Focus on safe, low-road capabilities for the Web platform
...
Always Bet On...WTF Evolution?
Wednesday, March 12, 14
Wednesday, March 12, 14
Conclusion
• First they said that JS + the Web stack
couldn’t do “Rich Internet Applications”
• Then they said it couldn’t...
Upcoming SlideShare
Loading in...5
×

Fluent14

6,612

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
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,612
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

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

×