Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/ILvHbv. Brendan Eich surveys interesting developments in the Web platform, analysing emergent trends, and making some predictions. Filmed at qconsf.com. Brendan Eich is CTO and SVP of Engineering for Mozilla, and widely recognized for his enduring contributions to the Internet revolution. In 1995, Eich invented JavaScript (ECMAScript), the Internet’s most widely used programming language. He co-founded the mozilla.org project in 1998, serving as chief architect, and has been a board member of the Mozilla Foundation since its inception in 2003.

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

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

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

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

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

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

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

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

9. Harmony - ES5 Compat
7

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

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

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

13. Harmony - ES6 Compat
11

14. 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:specification_drafts
12

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

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

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

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

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

20. Strict Equality Operators
• The strict equality operators, === and !==, cannot be overloaded
• They work on frozen-by-definition value objects via a structural
recursive strict equality test (beware, NaN !== NaN)
• Same-object-reference remains a fast-path optimization
18

21. Why Not Double Dispatch?
• Left-first 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

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

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

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

25. 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 suffix definition
23

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

27. SIMD
Single Instruction, Multiple Data (SSE, NEON, etc.)
25

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

29. Possible ES7 Polyfillable 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

30. Why Operator Syntax Matters
From Cameron Purdy’s blog:
“At a client gig, they were doing business/financial coding, so were using BigDecimal.
Of course, .add() and friends is too difficult, 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

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

32. Sys/Dev/Web APIs
[continue]
30

33. WebRTC
•
•
•
Video/audio/data p2p & n-way realtime browser-based communication
•
•
Peer-to-peer file 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

34. 32

35. 33

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

37. WebRTC in Detail
[continue]
35

38. WebRTC Resources
•
https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013
•
•
•
https://github.com/HenrikJoreteg/jsconfbr
http://iswebrtcreadyyet.com/
https://talky.io/
36

39. 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 fix things incrementally with better coordination
37

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

41. Servo
•
A brief demo showing of Mozilla’s new parallel/safe engine...
39

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

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