web futures

Web Platform: Present and Future

Brendan Eich<[email protected]>

Friday, November 29, 13

mailto:[email protected]

mailto:[email protected]

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


http://extensiblewebmanifesto.org

http://extensiblewebmanifesto.org

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

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

• Strict errors:

• 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://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

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


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


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


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’) // 42map.get(obj) // “foo”map.set(obj, “bar”)map.get(obj) // “bar”map.size // 2for (let [k, v] of map) print(k, v)map.delete(‘key’); map.size // 1

• set = Set([0, 1, 2, 3]);set.has(0) // trueset.add(9)set.size // 5for (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);

• Symbols, many new methods, more...


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:specification_drafts

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


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

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





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


http://wiki.ecmascript.org/doku.php?id=harmony:observe

http://wiki.ecmascript.org/doku.php?id=harmony:observe

https://github.com/johnmccutchan/ecmascript_simd


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-definition 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-first asymmetry (v value, n number):

• v + n ==> v.add(n)

• 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 es-discuss

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


https://mail.mozilla.org/pipermail/es-discuss/2009-June/009603.html

https://mail.mozilla.org/pipermail/es-discuss/2009-June/009603.html

http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.121.134

http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.121.134

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 resultFriday, November 29, 13

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) ==> 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#

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

• This means new syntax for operator and suffix definition


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 Polyfillable SIMD API


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


http://www.jroller.com/cpurdy/entry/the_seven_habits_of_highly1%23comment-1130764636000

http://www.jroller.com/cpurdy/entry/the_seven_habits_of_highly1%23comment-1130764636000

Emscripten & asm.jsHTML/CSS/DOM/WebGL

[continue]


Sys/Dev/Web APIs[continue]


WebRTC

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

• A simple two-party videocall: https://apprtc.webrtc.org/

• Multiparty conferences (up to 4 people): http://tokbox.com/opentok/quick-start/demo.html

• Peer-to-peer file sharing: https://www.sharefest.me/

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


https://apprtc.webrtc.org

https://apprtc.webrtc.org

http://tokbox.com/opentok/quick-start/demo.html




https://www.sharefest.me

https://www.sharefest.me

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-jsconf-brazil-2013

• https://github.com/HenrikJoreteg/jsconfbr

• http://iswebrtcreadyyet.com/

• https://talky.io/


https://speakerdeck.com/henrikjoreteg/webrtc-jsconf-brazil-2013




https://github.com/HenrikJoreteg/jsconfbr

https://github.com/HenrikJoreteg/jsconfbr

http://iswebrtcreadyyet.com

http://iswebrtcreadyyet.com

https://talky.io

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 fix 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?


https://services.mozilla.com

https://services.mozilla.com

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 fixed

• Wrong every time!

• Always bet on {JS, HTML, WebGL, ...}

• Really, always bet on Web Developers


web futures

Technology

x classpoint

y implicit object

source object

harmony es7 object

keysobj object

isfrozenobj object

sealobj object

issealedobj object