Web futures

Web Platform: Present and Future

Brendan Eich<[email protected]>

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

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