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

1
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/web-evolution-trends

InfoQ.c...
Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Agenda
•
•
•
•
•

Extensible Web Manifesto
JavaScript Deep Dive
Emscripten and asm.js
HTML/CSS/DOM/WebGL
Dev/Sys/Web APIs
...
Extensible Web Manifesto
•
•
•
•
•

http://extensiblewebmanifesto.org/
Focus on new, safe, low-level capabilities for the ...
JavaScript
•
•
•

AKA ECMAScript, ECMA-262, ES
ES Harmony = editions from 5 on
Harmony goals

•
•
•

better for applicatio...
Harmony - ES5
•
•
•
•
•
•
•
•
•
•
•

“use	
  strict”;	
  //	
  strict	
  mode	
  pseudo-­‐pragma
Object.create(proto,	
  p...
Harmony - ES5, cont
•
•
•
•
•
•
•
•
•
•
•

Array.prototype.every(callback[,	
  self])
Array.prototype.some(callback[,	
  s...
Harmony - ES5 Compat

7
ES5 Resources
•
•

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

•

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

http://www.e...
Harmony - ES6
•
•
•
•

•
•
•

var	
  obj	
  =	
  {[“key_”	
  +	
  nextId()]:	
  value};
var	
  obj	
  =	
  {method()	
  {	...
Harmony - ES6, cont
•
•
•

•

console.log(`interpolate	
  ${x}`);
let	
  lexer	
  =	
  /w+|d+/y;	
  //	
  y	
  for	
  stic...
Harmony - ES6 Compat

11
ES6 Resources
•
•
•

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

•

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

http://...
Harmony - ES7
•

Object.observe(target,	
  observer)
//	
  http://wiki.ecmascript.org/doku.php?id=harmony:observe

•

SIMD...
Value Objects

• int64, uint64
• int32x4, int32x8 (SIMD)
• float32 (to/from Float32Array today)
• float32x4, float32x8 (SI...
Overloadable Operators

•| ^ &
•==
•< <=
•<< >> >>>
•+ •* / %
•~ boolean-test

unary- unary+

15
Preserving Boolean Algebra

• != and ! are not overloadable, to preserve identities including
• X ? A : B <=> !X ? B : A
•...
Preserving Relational Relations

• > and >= are derived from < and <= as follows:
• A > B <=> B < A
• A >= B <=> B <= A

•...
Strict Equality Operators

• The strict equality operators, === and !==, cannot be overloaded
• They work on frozen-by-defi...
Why Not Double Dispatch?

• Left-first asymmetry (v value, n number):
•v
•n

+ n

==>

v.add(n)

+ v

==>

v.radd(n)

• Ant...
Cacheable Multimethods

• Proposed in 2009 by Christian Plesner Hansen (Google) in esdiscuss

• Avoids double-dispatch dra...
Binary Operator Example

• For the expression v + u
• Let p = v.[[Get]](@@ADD)
• If p is not a Set, throw a TypeError
• Le...
API Idea from CPH 2009
function addPointAndNumber(a, b) {
return Point(a.x + b, a.y + b);
}
Function.defineOperator('+', a...
Literal Syntax

• int64(0)
• uint64(0)
• float32(0)
• bignum(0)
• decimal(0)

==>

0L // as in C#

==> 0UL // as in C#
==>...
Straw Value Object Declaration Syntax
value class point2d { // implies typeof “point2d”
constructor point2d(x, y) {
this.x...
SIMD

Single Instruction, Multiple Data (SSE, NEON, etc.)

25
SIMD intrinsics
•
•
•
•

Game, DSP, other low-level hackers need them
John McCutchan added them to DartVM
Dart-to-the-hear...
Possible ES7 Polyfillable SIMD API

https://github.com/johnmccutchan/ecmascript_simd

var a = float32x4(1.0, 2.0, 3.0, 4.0)...
Why Operator Syntax Matters
From Cameron Purdy’s blog:

“At a client gig, they were doing business/financial coding, so wer...
Emscripten & asm.js
HTML/CSS/DOM/WebGL
[continue]

29
Sys/Dev/Web APIs
[continue]

30
WebRTC
•
•
•

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

•
•

Peer-to-peer file sharing: https://ww...
32
33
WebRTC Sample JS
•
•
•

var	
  pc	
  =	
  new	
  RTCPeerConnection();
var	
  localVideo	
  =	
  document.getElementById(“l...
WebRTC in Detail
[continue]

35
WebRTC Resources
•

https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013

•
•
•

https://github.com/HenrikJorete...
Networking
•
•
•
•
•
•

Layering hurts (Sam Ruby, OSCON 2005? I forget)
DNS lookup, HTML load, img and script step on each...
Privacy, Trust, User Agency
•
•

•

Mozilla won “Most Trusted for Privacy” award in 2012
Working to earn it:

•
•
•
•

Syn...
Servo

•

A brief demo showing of Mozilla’s new parallel/safe engine...

39
Conclusion
•

First they said that JS or the Web stack
couldn’t do “Rich Internet Applications”

•
•
•
•
•

Then they said...
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/webevolution-trends
Upcoming SlideShare
Loading in …5
×

The Present and Future of the Web Platform

625 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
625
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Present and Future of the Web Platform

  1. 1. Web Platform: Present and Future Brendan Eich <brendan@mozilla.org> 1
  2. 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. 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. 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. 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. 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. 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. 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. 9. Harmony - ES5 Compat 7
  10. 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. 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. 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. 13. Harmony - ES6 Compat 11
  14. 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. 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. 16. Value Objects • int64, uint64 • int32x4, int32x8 (SIMD) • float32 (to/from Float32Array today) • float32x4, float32x8 (SIMD) • bignum • decimal • rational • complex 14
  17. 17. Overloadable Operators •| ^ & •== •< <= •<< >> >>> •+ •* / % •~ boolean-test unary- unary+ 15
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. SIMD Single Instruction, Multiple Data (SSE, NEON, etc.) 25
  28. 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. 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. 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. 31. Emscripten & asm.js HTML/CSS/DOM/WebGL [continue] 29
  32. 32. Sys/Dev/Web APIs [continue] 30
  33. 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. 34. 32
  35. 35. 33
  36. 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. 37. WebRTC in Detail [continue] 35
  38. 38. WebRTC Resources • https://speakerdeck.com/henrikjoreteg/webrtc-jsconfbrazil-2013 • • • https://github.com/HenrikJoreteg/jsconfbr http://iswebrtcreadyyet.com/ https://talky.io/ 36
  39. 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. 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. 41. Servo • A brief demo showing of Mozilla’s new parallel/safe engine... 39
  42. 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. 43. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/webevolution-trends

×