Capitol js

Capital^H^[email protected]

Sunday, September 18, 2011

mailto:[email protected]



• History, goals





• History, goals

• ES6, what’s in it?





• History, goals


• Dart: I can’t wait!





• History, goals



• Harmony tune-up





• History, goals



• Harmony tune-up

• RiverTrail demo




mozilla

A very brief history

2


mozilla


• Ten days in May 1995: “Mocha”, form validation, img rollovers, scripting of Java

2


mozilla



• September 1995: “LiveScript” (did Netscape marketing go to Microsoft after?)

2


mozilla




• December 1995: “JavaScript”, thanks to Bill Joy (a Sun Founder)

2


mozilla





• 1996-1997: ES1 thanks to ECMA (now Ecma) TC39 -- see my TXJS talk

2


mozilla






• 1999: ES3: function expressions, RegExps, try/catch/finally, switch, do-while

2


mozilla







• 2005: the Ajax revolution, followed by “The Ajax Experience”

2


mozilla








• 2008: ES4 RIP, Harmony founded in July at the Oslo TC39 meeting

2


mozilla








• 2008: ES4 RIP, Harmony founded in July at the Oslo TC39 meeting

• 2009: ES5: “use strict”, JSON, Object.create, etc.

2


mozilla

The Harmony goals

3


mozilla

The Harmony goals

• Be a better language for writing:

3


mozilla

The Harmony goals


• complex applications

3


mozilla

The Harmony goals



• libraries (including the DOM) shared by those applications

3


https://github.com/andreasgal/dom.js


mozilla

The Harmony goals




• code generators targeting the new edition

3




mozilla

The Harmony goals





• Better tests, if not a testable (executable) specification

3






mozilla

The Harmony goals






• Adopt de facto standards where possible

3






mozilla

The Harmony goals







• Keep versioning as simple and linear as possible

3






mozilla

The Harmony goals







• Keep versioning as simple and linear as possible

• Support a statically verifiable, object-capability secure subset

3






mozilla

Approved for ES6

4


mozilla

Approved for ES6

• let, const, function in block scope

4


mozilla

Approved for ES6


• destructuring: let {x, y} = pt; let [s, v, o] = triple()

4


mozilla

Approved for ES6



• parameter default values: function f(x, y=1, z=0) {...}

4


mozilla

Approved for ES6




• rest, spread: function g(i, j, ...r) { return r.slice(i, j); } let a = [0,1,2,3], o = new any_constructor(...a)

4


mozilla

Approved for ES6





• proxies, weak maps: Proxy.create(handler, proto), new WeakMap

4


mozilla

Approved for ES6






• modules: module M { export function fast_sin(x) {...} }

4


mozilla

Approved for ES6







• iterators, generators: function* gen() { yield 1; yield 2; }

4


mozilla

Approved for ES6







• iterators, generators: function* gen() { yield 1; yield 2; }

• comprehensions: return [a+b for a of A for b of B]

4


mozilla

Yet more approved for ES6

5


mozilla


• Binary data:

5


mozilla


• Binary data:

• const Point2D = new StructType({ x: uint32, y: uint32 }), Color = new StructType({ r: uint8, g: uint8, b: uint8 }), Pixel = new StructType({ point: Point2D, color: Color });

5


mozilla


• Binary data:


• const Triangle = new ArrayType(Pixel, 3);

5


mozilla


• Binary data:


• const Triangle = new ArrayType(Pixel, 3);

• new Triangle([{ point: { x: 0, y: 0 }, color: { r: 255, g: 255, b: 255 } }, { point: { x: 5, y: 5 }, color: { r: 128, g: 0, b: 0 } }, { point: { x: 10, y: 0 }, color: { r: 0, g: 0, b: 128 } }]);

5


mozilla

Quasi-Literals

6


mozilla

Quasi-Literals

• Injection-safer string interpolation and domain-specific languages

6


mozilla

Quasi-Literals


• Backtick-quoted string desugars to a function call that operates on the literal portions and substitution results:

6


mozilla

Quasi-Literals



• quasi`literalPart1${substitution}literalPart2` desugars to

6


mozilla

Quasi-Literals




• quasi({raw: ["literalPart1", "literalPart1"], unescaped: ["literalPart1", "literalPart1"]}, substitution)

6


mozilla

Quasi-Literals





• Multiline string literals w/o prefix: `literalPart1${substitution} (yes, that was a newline!) literalPart2`

6


mozilla

Quasi-Literals





• Multiline string literals w/o prefix: `literalPart1${substitution} (yes, that was a newline!) literalPart2`

• Multiline regexp literals: re`literalPart1${substitution} (yes, that was a newline!) \w+ literalPart2`

6


mozilla

Classes made it, barely (Yay, I think? Why am I sad?)

7


mozilla


• Sugar for prototypal object pattern, also supports closure patterns:

7


mozilla



• class Point { constructor(x, y) { private x = x, y = y; public closed_r() { return Math.sqrt(x*x + y*y); } } get x() { return @x; } get y() { return @y; } equals(p) { return @x === p@x && @y === p@y; } proto_r() { return Math.sqrt(@x * @x + @y * @y); } }

7


mozilla




• Private member reference syntax (@x, p@x) still up in the air...

7


mozilla




• Private member reference syntax (@x, p@x) still up in the air...

• extends, prototype, and super work the way you want

7


mozilla

Not yet in Harmony: arrow function syntax

8


mozilla


• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)

8


mozilla



• Just like CoffeeScript: let identity = (x) -> x

8


mozilla




• Expression body: const square = (x) -> (x * x)

8


mozilla





• Statement body: let countUsed = (str) -> { if (str in usedWords) usedWords[str]++; else usedWords[str] = 1; }

8


mozilla






• Fat arrow too: callback = (msg) => ( this.vmail.push(msg) )

8


mozilla






• Fat arrow too: callback = (msg) => ( this.vmail.push(msg) )

• Binding forms: let f() -> “writable” const K() -> “readonly”

8


mozilla

Not yet in Harmony: block lambda revival

• Inspired by Smalltalk via Ruby

let empty = {||}; // no need for space between bars

assert(empty() === undefined); assert(typeof empty === "function"); // native and implements [[Call]] assert(empty.length === 0); let identity = {|x| x}; // completion is return value assert(identity(42) === 42); assert(identity.length === 1); let a = [1, 2, 3, 4]; let b = a.map {|e| e * e} // paren-free call with block is // idiomatic control structure so // no semicolon at end

print(b); // [1, 4, 9, 16]

9


mozilla

More block lambda revival

• Paren-free calls, control effects: you know you want it...

10

b = a.map {|e| // newline in block ok e * e * e} // newline after ends call function find_first_odd(a) { a.forEach { |e, i| if (e & 1) return i; } // returns from function return -1;} function escape_return() { return {|e| return e};}b = escape_return();try { b(42); } catch (e) {} // error, return from // inactive function


mozilla

Syntax, yay

11


mozilla

Syntax, yay

• Do we need shorter function syntax at all?

11


mozilla

Syntax, yay


• Some say no. @mikeal: “I got 99 problems and JavaScript syntax ain’t one.”

11


https://twitter.com/%23!/mikeal


mozilla

Syntax, yay



• Others say yes, but divide into roughly three camps:

11




mozilla

Syntax, yay




• Arrow function syntax, as in CoffeeScript.

11




mozilla

Syntax, yay





• Block lambdas. @jashkenas: “For the record, I too favor [block lambdas] if arrows in JS will need curlies to delimit blocks. Curlies or arrows, not both.”

11




https://twitter.com/%23!/jashkenas


mozilla

Syntax, yay





• Block lambdas. @jashkenas: “For the record, I too favor [block lambdas] if arrows in JS will need curlies to delimit blocks. Curlies or arrows, not both.”

• Some leading ugly character, maybe \ -- unsure about this, return.

11






Dart to the heart


Dart to the heart• Some things I’ve heard & read



• “If JavaScript does not have {classes, “guards”}, then it will be REPLACED!” [May 2010 TC39 meeting]




• “better performance profile”





• “amenable to tooling”, “(e.g. with optional types)”





• “amenable to tooling”, “(e.g. with optional types)”

• “Fundamental problems [like the] single Number primitive....”


mozilla

iOS, lolwut?

13


mozilla

iOS, lolwut?

• Leaked memo: “The emergence of compelling alternative platforms like iOS has meant that the web platform must compete on its merits, not just its reach.”

13


mozilla

iOS, lolwut?

• Leaked memo: “The emergence of compelling alternative platforms like iOS has meant that the web platform must compete on its merits, not just its reach.”

• m-k-s on Hacker News: “If they think per the leaked mail that devs are choosing iOS over browsers because of JS, they have their heads in the sand.

Those choices are happening due to iOS as a platform not because devs are somehow so much more happier learning/using Objective-C! The best thing that Google could do is to KEEP working hard on improving the browser platform.”

13


http://news.ycombinator.com/user?id=m-k-s

http://news.ycombinator.com/user?id=m-k-s

http://news.ycombinator.com/item?id=2982256

http://news.ycombinator.com/item?id=2982256

mozilla

Food for thought

14


mozilla

Food for thought

• The “REPLACED” threat and “optional types” suggest either

14


mozilla

Food for thought


• Optional static types a la Strongtalk [Bracha & Griswold]

14


http://www.strongtalk.org/


http://citeseer.ist.psu.edu/bracha93strongtalk.html


mozilla

Food for thought



• Optional runtime guards, as proposed for Harmony but not in ES6

14






http://wiki.ecmascript.org/doku.php?id=strawman:guards


mozilla

Food for thought




• Syntax: let i :: int = 0; function f(a :: G)...

14








mozilla

Food for thought





• Semantics are runtime-pluggable, tie into trademarks proposal (nominal)

14








http://wiki.ecmascript.org/doku.php?id=strawman:trademarks


mozilla

Food for thought






• Proposals came at last minute (May TC39 meeting), not ready for ES6

14










mozilla

Food for thought






• Proposals came at last minute (May TC39 meeting), not ready for ES6

• Why not int32, int64, bignum, as well as number (double)?

14










http://wiki.ecmascript.org/doku.php?id=strawman:bignums

http://wiki.ecmascript.org/doku.php?id=strawman:bignums

mozilla

The trouble with numbers

15


mozilla


• How to introduce a sane numeric tower for JS?

15


mozilla



• Suffixes: 4294967295u + 1 === 0u,

2147483647i + 1 === -2147483648i; // WTF!

15


mozilla



• Suffixes: 4294967295u + 1 === 0u,

2147483647i + 1 === -2147483648i; // WTF!

• Promotion rules as in C, but with dynamic types

15


mozilla



• Suffixes: 4294967295u + 1 === 0u,

2147483647i + 1 === -2147483648i; // WTF!


• This smells like trouble

15


mozilla



• Suffixes: 4294967295u + 1 === 0u,

2147483647i + 1 === -2147483648i; // WTF!


• This smells like trouble

• Better: use bignum arithmetic; use int arithmetic; etc.

15


mozilla

Better performance predictability

16


mozilla


• JS engines currently have performance predictability problems, it’s true

16


http://blog.mozilla.com/dmandelin/2011/06/16/know-your-engines-at-oreilly-velocity-2011/


mozilla



• Speculation can go wrong, fall back on slow paths

16




mozilla




• Array holes, prototype properties being deleted, unshadowing/fore-shadowing all hurt a bit

16




mozilla





• But JS engines are still improving rapidly (e.g. the SpiderMonkey Type Inference work by Brian Hackett)

16




https://wiki.mozilla.org/TypeInference


mozilla






• It’s way too soon to throw in the towel

16






mozilla






• It’s way too soon to throw in the towel

• We could add more opt-into-high-performance knobs, but: No.

16






mozilla

Harmony tune-up

17


mozilla

Harmony tune-up

• It’s good to question the process

17


mozilla

Harmony tune-up


• Harmony is both conservative (consensus is hard to achieve) and path-dependent (because macro research takes time, we’re adding syntactic special forms that could be macros -- if only we had macros)

17


mozilla

Harmony tune-up



• Should we take the Dart clues to heart, without over-reacting?

17


mozilla

Harmony tune-up



• Should we take the Dart clues to heart, without over-reacting?

• My suggestion is to prototype in SpiderMonkey and V8 some of the strawman proposals that did not make ES6 now, and see if any deserve promotion to ES6

17


mozilla

RiverTrail: Parallel JS

18


mozilla


• A ParallelArray library, like typed arrays but immutable.

18


mozilla



• map, reduce, combine, filter, partition, scan, scatter -- all produce fresh ParallelArray results

18


mozilla




• Relies on commutativity to parallelize arithmetic operations (this does inject some f.p. non-determinism).

18


mozilla





• A Firefox add-on that runs a Narcissus-based JS-to-OpenCL compiler over ParallelArray code

18


mozilla






• Source: github.com/RiverTrail/RiverTrail (user id should’ve been IntelLabs)

18


http://github.com/RiverTrail/RiverTrail


mozilla






• Source: github.com/RiverTrail/RiverTrail (user id should’ve been IntelLabs)

• Demo code is funny: it contains a "DO NOT use strict”; directive!

18




mozilla

RiverTrail demo sample code

• the ParallelArray constructor builds on typed arrays:

NBody.private.initVel = new Array(numBodies);

NBody.private.initVelTA = new Float32Array(numBodies * 4);

var initAsteroidPos = new Array(50);

for (i = 0; i < 50; i++) { initAsteroidPos[i] = new ParallelArray([ NBody.private.posTA[i * 3 + 0], // x NBody.private.posTA[i * 3 + 1], NBody.private.posTA[i * 3 + 2], ]); } . . . NBody.private.asteroidPos = new ParallelArray(Float32Array, initAsteroidPos); . . . NBody.private.vel = new ParallelArray(Float32Array, NBody.private.initVel);

19


mozilla

ParallelArray methods in action

• combine method is a workhorse (takes variable number of args)

"animateTickParallel": function animateTickParallel() {

// increment (+=) velocity by acceleration var newVel = NBody.private.vel.combine( 1, low_precision(NBody.bodyVelocityLoopified), NBody.private.pos, numBodies, NBody.Constant.deltaTime, NBody.Constant.epsSqr, NBody.time, NBody.private.asteroidPos ); . . .

20


Always bet on JS


Always bet on JS• First they said JS couldn’t be useful

for buildling “rich Internet apps”




• Then they said it couldn’t be fast





• Then they said it couldn’t be fixed






• Then it couldn’t do multicore/GPU







• Wrong every time!







• Wrong every time!

• My advice: always bet on JS


mozilla

Q&A

• @BrendanEich on twitter

• [email protected]

• [email protected]

22


https://twitter.com/%23!/BrendanEich

https://twitter.com/%23!/BrendanEich





Technology

Capitol js