The Present and Future of the Web Platform

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

1

Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/web-evolution-trends

InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

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

2

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

3

JavaScript
•
•
•

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

•
•
•

better for applications
better for libraries
better for code generators

4

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

5

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

6

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

8

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

9

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

10

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

12

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

13

Value Objects

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

Overloadable Operators

•| ^ &
•==
•< <=
•<< >> >>>
•+ •* / %
•~ boolean-test

unary- unary+

15

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

16

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)

17

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

18

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

19

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]
20

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
21

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

22

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
23

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

24

SIMD

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

25

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

26

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.

27

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

28

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

29

Sys/Dev/Web APIs
[continue]

30

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

31

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

34

WebRTC in Detail
[continue]

35

WebRTC Resources
•

https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013

•
•
•

https://github.com/HenrikJoreteg/jsconfbr
http://iswebrtcreadyyet.com/
https://talky.io/

36

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

37

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?

38

Servo

•

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

39

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

40

Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/webevolution-trends

The Present and Future of the Web Platform

More Related Content

What's hot (15)

Viewers also liked (13)

Similar to The Present and Future of the Web Platform (20)

More from C4Media (20)

Recently uploaded (20)

The Present and Future of the Web Platform