Web futures

Web Platform: Present and
Future
Brendan Eich
<brendan@mozilla.org>

Friday, November 29, 13

Agenda
•
•
•
•
•


Extensible Web Manifesto
JavaScript Deep Dive
Emscripten and asm.js
HTML/CSS/DOM/WebGL
Dev/Sys/Web APIs

•
•
•
•
•

WebRTC
Networking
Privacy, Trust, User Agency
Servo
Conclusion

Extensible Web Manifesto
•
•
•
•
•

http://extensiblewebmanifesto.org/
Focus on new, safe, low-level capabilities for the web platform
Expose capabilities that explain existing features, e.g., HTML
Develop and test new high-level standard libraries on github
Prioritize efforts that follow these recommendations over
other work

JavaScript
•
•
•

AKA ECMAScript, ECMA-262, ES
ES Harmony = editions from 5 on
Harmony goals

•
•
•

better for applications
better for libraries
better for code generators

Harmony - ES5
•
•
•
•
•
•
•
•
•
•
•


“use
strict”;
//
strict
mode
pseudo-‐pragma
Object.create(proto,
props)
Object.defineProperty(obj,
name,
desc)
Object.defineProperties(obj,
descs)
Object.getPrototypeOf(obj)
Object.keys(obj)
Object.seal(obj)
Object.freeze(obj)
Object.preventExtensions(obj)
Object.isSealed(obj)
Object.isFrozen(obj)

•
•
•
•
•
•
•
•
•
•
•

Object.isExtensible(obj)
Object.getOwnPropertyDescriptor(obj,
name)
Object.getOwnPropertyNames(obj)
Date.prototype.toISOString()
Date.now()
Array.isArray(value)
JSON
Function.prototype.bind(self,
...args)
String.prototype.trim()
Array.prototype.indexOf(value[,
from])
Array.prototype.lastIndexOf(value[,
from])

Harmony - ES5, cont
•
•
•
•
•
•
•
•
•
•
•


Array.prototype.every(callback[,
self])
Array.prototype.some(callback[,
self])
Array.prototype.forEach(callback[,
self])
Array.prototype.map(callback[,
self])
Array.prototype.filter(callback[,
self])
Array.prototype.reduce(callback[,
accum])

•

Strict
errors:

•
•
•
•
•

Array.prototype.reduceRight(call[,
accum])
var
obj
=
{get
x()
{return
this._x;}
...};
var
obj
=
{set
x(nx)
{this._x
=
nx;}
...};
var
s
=
“asdf”;
assertEqual(s[3],
‘f’);
var
keywords
=
{delete:1,
if:2,
while:3};

f.caller,
f.arguments
for
function
f
var
o
=
{dup:
1,
dup:
2};
with
(o);
//
any
with
statement
function
f(dup,
dup)
{...}
let
implements
interface
private
public
package
protected
static
yield

•
•
•
•

octal
numeric
literals
&
string
escapes
can’t
create
global
var
by
assignment
eval,
arguments,
delete
restrictions
this
is
not
coerced
to
object

Harmony - ES5 Compat


ES5 Resources
•
•
•


http://ecma-international.org/ecma-262/5.1/

http://kangax.github.io/es5-compat-table/

http://www.ecma-international.org/publications/standards/
Ecma-262-arch.htm

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,
entries}
from
“@iter”;
for
(let
[k,v]
of
entries(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

•
•
•
•
•
•
•

const
Triangle
=
new
ArrayType(Point,
3);

var
proxy
=
new
Proxy(target,
handler);
const
Point
=

new
StructType({x:
uint32,
y:
uint32});

{
function
in_block()
{
return
42;
}
...
}
let
{x,
y}
=
aPoint;
let
[v1,
v2,
v3]
=
aTriangle;
Object.assign(target,
source);
Object.mixin(target,
source);
Symbols,
many
new
methods,
more...

Harmony - ES6 Compat


ES6 Resources
•
•
•
•

https://github.com/google/traceur-compiler

http://kangax.github.io/es5-compat-table/es6/

http://people.mozilla.org/~jorendorff/es6-draft.html
http://wiki.ecmascript.org/doku.php?
id=harmony:speciﬁcation_drafts

Harmony - ES7
•

Object.observe(target,
observer)
//
http://wiki.ecmascript.org/doku.php?id=harmony:observe

•

SIMD
intrinsics,
e.g.
SIMD.add(a,
b)
//
https://github.com/johnmccutchan/ecmascript_simd

•


Value
objects
-‐
deep
dive
ahead

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+

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


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)


Strict Equality Operators

• The strict equality operators, === and !==, cannot be overloaded
• They work on frozen-by-deﬁnition value objects via a structural
recursive strict equality test (beware, NaN !== NaN)

• Same-object-reference remains a fast-path optimization


Why Not Double Dispatch?

• Left-ﬁrst asymmetry (v value, n number):
•v
•n

+ n

==>

v.add(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


Cacheable Multimethods

• Proposed in 2009 by Christian Plesner Hansen (Google) in esdiscuss

• 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 the V8 team)

• Background reading: [Chambers 1992]

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.size != 1 throw a TypeError
• Let f = r[0]; if f is not a function, throw
• Evaluate f(v, u) and return the result

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


Literal Syntax

• int64(0)
• uint64(0)
• float32(0)
• bignum(0)
• decimal(0)

==>

0L // as in C#

==> 0UL // as in C#
==>

0f // as in C#

==>

0n // avoid i/I

==>

0m // or M, C/F#

• We want a syntax extension mechanism, but declarative not
runtime API

• This means new syntax for operator and sufﬁx deﬁnition

Straw Value 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.
}


SIMD

Single Instruction, Multiple Data (SSE, NEON, etc.)


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

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


Emscripten & asm.js
HTML/CSS/DOM/WebGL
[continue]


Sys/Dev/Web APIs
[continue]


WebRTC
•
•
•
•
•


Video/audio/data p2p & n-way realtime browser-based communication

Peer-to-peer ﬁle sharing: https://www.sharefest.me/

A simple two-party videocall: https://apprtc.webrtc.org/
Multiparty conferences (up to 4 people): http://tokbox.com/opentok/
quick-start/demo.html

Real-time multiplayer gaming: https://developer.mozilla.org/en-US/demos/
detail/bananabread/launch

WebRTC Sample JS
•
•
•

var
pc
=
new
RTCPeerConnection();
var
localVideo
=
document.getElementById(“local”);
navigator.getUserMedia(

{video:
true,
audio:
true},

function
(stream)
{

pc.addStream(stream);

//
See
https://github.com/HenrikJoreteg/attachMediaStream

attachMediaStream(localVideo,
stream);

},

function
()
{
console.log(“failed
to
get
video
camera”)
}
);


WebRTC in Detail
[continue]


WebRTC Resources
•
•
•
•

https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013
https://github.com/HenrikJoreteg/jsconfbr
http://iswebrtcreadyyet.com/
https://talky.io/

Networking
•
•
•
•
•
•

Layering hurts (Sam Ruby, OSCON 2005? I forget)
DNS lookup, HTML load, img and script step on each other
and power up the radio just as it is powering down
10kbs on LTE, not great
Here, underused on server side: SPDY; coming: HTTP2
We can ﬁx things incrementally with better coordination

Privacy, Trust, User Agency
•
•

•

Mozilla won “Most Trusted for Privacy” award in 2012
Working to earn it:

•
•
•
•

Sync encrypts client-side, but key mgmt beyond most users
Verified builds on Linux, using bootstrapped/verified clang
Use as a trust anchor to verify Mozilla services
Yes, Mozilla is doing services: https://services.mozilla.com/

What would a user-first Web of services look like?

Servo

•


A brief demo showing of Mozilla’s new parallel/safe engine...

Conclusion
•
•
•
•
•
•

First they said that JS or 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

Web futures

More Related Content

What's hot

Viewers also liked

Similar to Web futures

Recently uploaded

Web futures