Upload
brendan-eich
View
6.864
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Main slides from my QConSF talk.
Citation preview
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
Friday, November 29, 13
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
Friday, November 29, 13
JavaScript
• AKA ECMAScript, ECMA-262, ES
• ES Harmony = editions from 5 on
• Harmony goals
• better for applications
• better for libraries
• better for code generators
Friday, November 29, 13
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])
Friday, November 29, 13
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
Friday, November 29, 13
Harmony - ES5 Compat
Friday, November 29, 13
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/
Friday, November 29, 13
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; }
Friday, November 29, 13
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...
Friday, November 29, 13
Harmony - ES6 Compat
Friday, November 29, 13
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/
Friday, November 29, 13
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
Friday, November 29, 13
Value Objects
• int64, uint64
• int32x4, int32x8 (SIMD)
• float32 (to/from Float32Array today)
• float32x4, float32x8 (SIMD)
• bignum
• decimal
• rational
• complex
Friday, November 29, 13
Overloadable Operators
•| ^ &
•==
•< <=
•<< >> >>>
•+ -
•* / %
•~ boolean-test unary- unary+
Friday, November 29, 13
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)
Friday, November 29, 13
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)
Friday, November 29, 13
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
Friday, November 29, 13
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
Friday, November 29, 13
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]
Friday, November 29, 13
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);
Friday, November 29, 13
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
Friday, November 29, 13
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.}
Friday, November 29, 13
SIMD
Single Instruction, Multiple Data (SSE, NEON, etc.)
Friday, November 29, 13
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
Friday, November 29, 13
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.
Friday, November 29, 13
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
Friday, November 29, 13
Emscripten & asm.jsHTML/CSS/DOM/WebGL
[continue]
Friday, November 29, 13
Sys/Dev/Web APIs[continue]
Friday, November 29, 13
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
Friday, November 29, 13
Friday, November 29, 13
Friday, November 29, 13
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”) }
);
Friday, November 29, 13
WebRTC in Detail[continue]
Friday, November 29, 13
WebRTC Resources
• https://speakerdeck.com/henrikjoreteg/webrtc-jsconf-brazil-2013
• https://github.com/HenrikJoreteg/jsconfbr
• http://iswebrtcreadyyet.com/
• https://talky.io/
Friday, November 29, 13
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
Friday, November 29, 13
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?
Friday, November 29, 13
Servo
• A brief demo showing of Mozilla’s new parallel/safe engine...
Friday, November 29, 13
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
Friday, November 29, 13