Fluent14

JavaScript: the High
Road & the Low Road
Brendan Eich
@BrendanEich <brendan@mozilla.org>
Wednesday, March 12, 14

Prologue

If Web Dev is like...
• ... sewing with mittens
• ... juggling kittens
• ... ﬁghting evil with one hand cut off

https://twitter.com/_Lady_Jedi_/status/404082867048681472

Then JavaScript is like...
• ... having a chainsaw for a hand

(Me after hacking JS in 10 days)

Flash back to 1995
• (What’s with that hair?)

Groovy

The High Road

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;
}

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...

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

Harmony - ES6 Compat

ES6 Resources
• https://github.com/google/traceur-compiler
• http://people.mozilla.org/~jorendorff/es6-draft.html
• http://wiki.ecmascript.org/doku.php?
id=harmony:speciﬁcation_drafts
• http://kangax.github.io/es5-compat-table/es6/

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)

The Low Road

Value Objects
• int64, uint64
• int32x4, int32x8 (SIMD)
• float32 (to/from Float32Array today)
• float32x4, float32x8 (SIMD)
• bignum
• decimal
• rational
• complex

Overloadable Operators
• | ^ &
• ==
• < <=
• << >> >>>
• + -
• * / %
• ~ boolean-test!! unary- unary+

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)
• Predeﬁne units.L = int64, etc.

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);

SIMD
Single Instruction, Multiple Data (SSE/AVX, NEON, etc.)

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

Possible ES7 Polyﬁllable 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.

Why Operator Syntax Matters
A comment from Cameron Purdy’s blog:
“At a client gig, they were doing business/ﬁnancial coding, so were using
BigDecimal.
Of course, .add() and friends is too difﬁcult, 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

Why decimal? AKA Who can spot the bug?

Where the Low Road goes

Nearly Native Performance

Epilogue:
The Two Roads Converge

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

Always Bet On...WTF Evolution?

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 ﬁxed
• Wrong every time!
• Always bet on {JS, HTML,WebGL, ...}
• Really, always bet on Web Developers

Fluent14

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (13)

Similar a Fluent14

Similar a Fluent14 (20)

Último

Último (20)

Fluent14