• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web futures
 

Web futures

on

  • 5,504 views

Main slides from my QConSF talk.

Main slides from my QConSF talk.

Statistics

Views

Total Views
5,504
Views on SlideShare
5,408
Embed Views
96

Actions

Likes
4
Downloads
6
Comments
0

4 Embeds 96

https://twitter.com 86
http://www.instacurate.com 4
http://moderation.local 4
http://www.twylah.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web futures Web futures Presentation Transcript

    • Web Platform: Present and Future Brendan Eich <brendan@mozilla.org> Friday, November 29, 13
    • Agenda • • • • • Friday, November 29, 13 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 • • • • • Friday, November 29, 13 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
    • JavaScript • • • AKA ECMAScript, ECMA-262, ES ES Harmony = editions from 5 on Harmony goals • • • Friday, November 29, 13 better for applications better for libraries better for code generators
    • Harmony - ES5 • • • • • • • • • • • Friday, November 29, 13 “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 • • • • • • • • • • • Friday, November 29, 13 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
    • Harmony - ES5 Compat Friday, November 29, 13
    • ES5 Resources • • • Friday, November 29, 13 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
    • Harmony - ES6 • • • • • • • Friday, November 29, 13 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 • • • • Friday, November 29, 13 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...
    • Harmony - ES6 Compat Friday, November 29, 13
    • ES6 Resources • • • • Friday, November 29, 13 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
    • 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 • Friday, November 29, 13 Value  objects  -­‐  deep  dive  ahead
    • 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 Friday, November 29, 13 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 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 + 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 Friday, November 29, 13
    • 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] 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 result Friday, 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) • 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 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 • • • • Friday, November 29, 13 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 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.js HTML/CSS/DOM/WebGL [continue] Friday, November 29, 13
    • Sys/Dev/Web APIs [continue] Friday, November 29, 13
    • WebRTC • • • • • Friday, November 29, 13 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
    • 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 • • • • Friday, November 29, 13 https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013 https://github.com/HenrikJoreteg/jsconfbr http://iswebrtcreadyyet.com/ https://talky.io/
    • Networking • • • • • • Friday, November 29, 13 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 • • • Friday, November 29, 13 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?
    • Servo • Friday, November 29, 13 A brief demo showing of Mozilla’s new parallel/safe engine...
    • Conclusion • • • • • • Friday, November 29, 13 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