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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Fluent14

Ähnlich wie Fluent14 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Fluent14