SlideShare a Scribd company logo

JS Responsibilities

•
•
Brendan Eich
Brendan Eich

Brendan Eich discusses his responsibilities regarding JavaScript and upcoming ECMAScript standards. He outlines proposals for ES7 including object observe microtasks, SIMD intrinsics, value objects like int64 and decimal, overloadable operators, and multimethods for binary operators. He also mentions potential future work on threads and improving JavaScript performance through asm.js.

Related slideshows

Mining Functional Patterns
Mining Functional PatternsMining Functional Patterns
Mining Functional Patterns
 
Functional and Algebraic Domain Modeling
Functional and Algebraic Domain ModelingFunctional and Algebraic Domain Modeling
Functional and Algebraic Domain Modeling
 
Constructors and destructors
Constructors and destructorsConstructors and destructors
Constructors and destructors
 
1 of 34
Download to read offline
JS Responsibilities Brendan Eich <brendan@mozilla.org> @BrendanEich 1
Quick Recap • JavaScript: who is to blame? • Me first, Netscape second, Java third • Who has the power? • Ecma TC39, made up of both • Browser vendors, who compete for • Developers: extensiblewebmanifesto.org • Yet I still feel responsible • There are a few things more to do 2
ES6, ES7 in parallel, rapid-ish release • class MyNodeList extends NodeList ... • const square = (x) => x * x; • const aRot = (h, ...t) => t.push(h); • let {top, left} = e.getClientRect(); • function conv(from, to = “EUR”) ... • import {keys, entries} from “@iter”; • for (let [k, v] of entries(obj)) ... • function* gen() {yield 1; yield 2;} • Etc., see Kangax’s compat table for progress 3
Let’s talk about new stuff • ES6 is kind of old news (ES5 is old news) • ES7 Object.observe involves microtasks • Skip it! Maybe another time... • Low-level JS looks important for • Emscripten, Mandreel, other compilers • Unreal Engine 3 => 4, + other game engines • Hand-coded WebGL-based modules (e.g. OTOY’s ORBX codec) 4
Value Objects • symbol, maybe • int64, uint64 • int32x4, int32x8 (SIMD) • float32 (to/from Float32Array today) • float32x4, float32x8 (SIMD) • bignum • decimal • rational • complex 5
Overloadable Operators •| ^ & •== •< <= •<< >> >>> •+ - •* / % •~ boolean-test unary- unary+ 6
Preserving Boolean Algebra • != and ! are not overloadable, to preserve identities including • X ? A : B <=> !X ? B : A • !(X && Y) <=> !X || !Y • !(X || Y) <=> !X && !Y • X != Y <=> !(X == Y) 7
Preserving Relational Relations • > and >= are derived from < and <= as follows: • A > B <=> B < A • A >= B <=> B <= A • We provide <= in addition to < rather than derive A <= B from !(B < A) in order to allow the <= overloading to match the same value object’s == semantics -- and for special cases, e.g., unordered values (NaNs) 8
Strict Equality Operators • The strict equality operators, === and !==, cannot be overloaded • They work on frozen-by-definition value objects via a structural recursive strict equality test (beware, NaN !== NaN) • Same-object-reference remains a fast-path optimization 9
Why Not Double Dispatch? • Left-first asymmetry (v value, n number): • v + n ==> v.add(n) • n + v ==> v.radd(n) • Anti-modular: exhaustive other-operand type enumeration required in operator method bodies • Consequent loss of compositionality: complex and rational cannot be composed to make ratplex without modifying source or wrapping in proxies 10
Cacheable Multimethods • Proposed in 2009 by Christian Plesner Hansen (Google) in es-discuss • Avoids double-dispatch drawbacks from last slide: binary operators implemented by 2-ary functions for each pair of types • Supports Polymorphic Inline Cache (PIC) optimizations (Christian was on theV8 team) • Background reading: [Chambers 1992] 11
Binary Operator Example • For the expression v + u • Let p = v.[[Get]](@@ADD) • If p is not a Set, throw a TypeError • Let q = u.[[Get]](@@ADD_R) • If q is not a Set, throw a TypeError • Let r = p intersect q • If r.length != 1 throw a TypeError • Let f = r[0]; if f is not a function, throw • Evaluate f(v, u) and return the result 12
API Idea from CPH 2009 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); 13
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# • We want a syntax extension mechanism, but declarative not runtime API • This means new syntax for operator and suffix definition 14
StrawValue Object Declaration Syntax value class point2d { // implies typeof “point2d” constructor point2d(x, y) { this.x = +x; this.y = +y; // implicit Object.freeze(this) on return } point2d + number (a, b) { return point2d(a.x + b, a.y + b); } number + point2d (a, b) { return point2d(a + b.x, a + b.y); } point2d + point2d (a, b) { return point2d(a.x + b.x, a.y + b.y); } // more operators, suffix declaration handler, etc. } 15
SIMD Single Instruction, Multiple Data (SSE, NEON, etc.) 16
SIMD intrinsics • Game, DSP, other low- level 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 17
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.add(a, b); // Also SIMD.{sub,mul,div,neg,abs} etc. // See ES7 Value Objects for some sweet // operator overloading sugar. 18
Why Operator Syntax Matters 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 19
Threads? • “Threads Suck” - me, 2007 • Emscripten and Mandreel want shared-memory threads for top-of-line C++ game engines • Data races? C and C++ don’t care • Researching asm.js-confined shared buffers at Mozilla: github.com/sstangl/pthreads-gecko • We will not expose data races to JS user code or JSVMs (all competitive runtimes are single- threaded for perf) 20
asm.js progress 21
Speed on the Web • Speed is determined by many things • Network layer • DOM • Graphics • JS • This is JSConf.eu, so let’s talk about JS speed 22
How Fast is JS? • The Epic Citadel Demo is one way to measure • Over one million lines of C++ compiled to JS using Emscripten • OpenGL renderer, compiled to use WebGL • Uses only standardized web technologies 23
Epic Citadel Progress Launched March, 2013 Over 6 months, browsers have improved 24
Current Performance Results 25
Emscripten+asm.js Demos • Where’s My Water, an alpha-stage port to Firefox OS (booted on a Nexus 4) • Unreal Tournament, Sanctuary level • FreeDoom (Boon) embedded in a worker inside BananaBread (only ~100 lines of JS to integrate the two) 26
27
End Demos Back to Responsibilities 28
John Henry vs. the Steam Hammer 29
Responsibilities... 30
“Two of them b!tches” -Skinny Pete 31
Always Bet On...WTF Evolution? 32
33
34

More Related Content

JS Responsibilities

  • 2. Quick Recap • JavaScript: who is to blame? • Me first, Netscape second, Java third • Who has the power? • Ecma TC39, made up of both • Browser vendors, who compete for • Developers: extensiblewebmanifesto.org • Yet I still feel responsible • There are a few things more to do 2
  • 3. ES6, ES7 in parallel, rapid-ish release • class MyNodeList extends NodeList ... • const square = (x) => x * x; • const aRot = (h, ...t) => t.push(h); • let {top, left} = e.getClientRect(); • function conv(from, to = “EUR”) ... • import {keys, entries} from “@iter”; • for (let [k, v] of entries(obj)) ... • function* gen() {yield 1; yield 2;} • Etc., see Kangax’s compat table for progress 3
  • 4. Let’s talk about new stuff • ES6 is kind of old news (ES5 is old news) • ES7 Object.observe involves microtasks • Skip it! Maybe another time... • Low-level JS looks important for • Emscripten, Mandreel, other compilers • Unreal Engine 3 => 4, + other game engines • Hand-coded WebGL-based modules (e.g. OTOY’s ORBX codec) 4
  • 5. Value Objects • symbol, maybe • int64, uint64 • int32x4, int32x8 (SIMD) • float32 (to/from Float32Array today) • float32x4, float32x8 (SIMD) • bignum • decimal • rational • complex 5
  • 6. Overloadable Operators •| ^ & •== •< <= •<< >> >>> •+ - •* / % •~ boolean-test unary- unary+ 6
  • 7. Preserving Boolean Algebra • != and ! are not overloadable, to preserve identities including • X ? A : B <=> !X ? B : A • !(X && Y) <=> !X || !Y • !(X || Y) <=> !X && !Y • X != Y <=> !(X == Y) 7
  • 8. Preserving Relational Relations • > and >= are derived from < and <= as follows: • A > B <=> B < A • A >= B <=> B <= A • We provide <= in addition to < rather than derive A <= B from !(B < A) in order to allow the <= overloading to match the same value object’s == semantics -- and for special cases, e.g., unordered values (NaNs) 8
  • 9. Strict Equality Operators • The strict equality operators, === and !==, cannot be overloaded • They work on frozen-by-definition value objects via a structural recursive strict equality test (beware, NaN !== NaN) • Same-object-reference remains a fast-path optimization 9
  • 10. Why Not Double Dispatch? • Left-first asymmetry (v value, n number): • v + n ==> v.add(n) • n + v ==> v.radd(n) • Anti-modular: exhaustive other-operand type enumeration required in operator method bodies • Consequent loss of compositionality: complex and rational cannot be composed to make ratplex without modifying source or wrapping in proxies 10
  • 11. Cacheable Multimethods • Proposed in 2009 by Christian Plesner Hansen (Google) in es-discuss • Avoids double-dispatch drawbacks from last slide: binary operators implemented by 2-ary functions for each pair of types • Supports Polymorphic Inline Cache (PIC) optimizations (Christian was on theV8 team) • Background reading: [Chambers 1992] 11
  • 12. Binary Operator Example • For the expression v + u • Let p = v.[[Get]](@@ADD) • If p is not a Set, throw a TypeError • Let q = u.[[Get]](@@ADD_R) • If q is not a Set, throw a TypeError • Let r = p intersect q • If r.length != 1 throw a TypeError • Let f = r[0]; if f is not a function, throw • Evaluate f(v, u) and return the result 12
  • 13. API Idea from CPH 2009 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); 13
  • 14. 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# • We want a syntax extension mechanism, but declarative not runtime API • This means new syntax for operator and suffix definition 14
  • 15. StrawValue Object Declaration Syntax value class point2d { // implies typeof “point2d” constructor point2d(x, y) { this.x = +x; this.y = +y; // implicit Object.freeze(this) on return } point2d + number (a, b) { return point2d(a.x + b, a.y + b); } number + point2d (a, b) { return point2d(a + b.x, a + b.y); } point2d + point2d (a, b) { return point2d(a.x + b.x, a.y + b.y); } // more operators, suffix declaration handler, etc. } 15
  • 16. SIMD Single Instruction, Multiple Data (SSE, NEON, etc.) 16
  • 17. SIMD intrinsics • Game, DSP, other low- level 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 17
  • 18. 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.add(a, b); // Also SIMD.{sub,mul,div,neg,abs} etc. // See ES7 Value Objects for some sweet // operator overloading sugar. 18
  • 19. Why Operator Syntax Matters 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 19
  • 20. Threads? • “Threads Suck” - me, 2007 • Emscripten and Mandreel want shared-memory threads for top-of-line C++ game engines • Data races? C and C++ don’t care • Researching asm.js-confined shared buffers at Mozilla: github.com/sstangl/pthreads-gecko • We will not expose data races to JS user code or JSVMs (all competitive runtimes are single- threaded for perf) 20
  • 22. Speed on the Web • Speed is determined by many things • Network layer • DOM • Graphics • JS • This is JSConf.eu, so let’s talk about JS speed 22
  • 23. How Fast is JS? • The Epic Citadel Demo is one way to measure • Over one million lines of C++ compiled to JS using Emscripten • OpenGL renderer, compiled to use WebGL • Uses only standardized web technologies 23
  • 24. Epic Citadel Progress Launched March, 2013 Over 6 months, browsers have improved 24
  • 26. Emscripten+asm.js Demos • Where’s My Water, an alpha-stage port to Firefox OS (booted on a Nexus 4) • Unreal Tournament, Sanctuary level • FreeDoom (Boon) embedded in a worker inside BananaBread (only ~100 lines of JS to integrate the two) 26
  • 27. 27
  • 28. End Demos Back to Responsibilities 28
  • 29. John Henry vs. the Steam Hammer 29
  • 31. “Two of them b!tches” -Skinny Pete 31
  • 32. Always Bet On...WTF Evolution? 32
  • 33. 33
  • 34. 34