Evolving the World's Most Popular Programming Language

My presentation to Dawn Song's #wt294 course

Transcript

1. Evolving  the  World’s  Most   Popular  Programming   Language Dave  Herman,  Mozilla  Research
7. don’t break the web
8. <script  type="application/javascript;version=4">   ! ! ! </script>
9. <script  type="application/javascript;version=4">      function  gen()  {          yield  42;      }   </script>
10. <script  type="application/javascript;version=4">      function  gen()  {          yield  42;      }   </script> ✘
11. <script  type="application/javascript;version=6">      function  gen()  {          yield  42;      }   </script>
12. can  haz  one  JS?
13. <script>      function*  gen()  {          yield  42;      }   </script>
14. Evolution’s  Evolutionary  Advantage Focus:  avoid  scope  creep,  second  system  syndrome   Consistency:  keep  a  unified  development  model   Stability:  apps  keep  working   Adoption✨:  lower  opt-­‐in  costs,  enable  shims
15. apps browsers
16. http://babeljs.io
17. classes
18. function  Stack()  {      this.elements  =  [];   }   ! Stack.prototype.isEmpty  =  function()  {      return  this.elements.length  ===  0;   };   Stack.prototype.push  =  function(x)  {      this.elements.push(x);   };
19. .elements .isEmpty   .push   .pop   .top Stack.prototype var  stack  =  new  Stack();
20. class  Stack  {      constructor()  {          this.elements  =  [];      }      isEmpty()  {          return  this.elements.length  ===  0;      }      push(x)  {  this.elements.push(x);  }      //  ...   }
21. function  MyArray()  {      Array.call(this);  //  super  (!!)      //  ...   }   ! MyArray.prototype  =  new  Array();   MyArray.prototype.foo  =  function()  {      //  ...   };
22. var  a  =  new  MyArray();   a[17]  =  "foo";   a.length  //  0
23. class  MyArray  extends  Array  {      constructor()  {          super();          //  ...      }      foo()  {          //  ...      }   }
24. modules
25. var  bytes  =  require("bytes");   var  iconv  =  require("iconv-­‐lite");   ! module.exports  =  function(stream,  opts,  done)  {      //  ...   };
26. import  bytes  from  "bytes";   import  iconv  from  "iconv-­‐lite";   ! export  default  function(stream,  opts,  done)  {      //  ...   };
27. import  bytes  from  "bytes";   import  iconv  from  "iconv-­‐lite";   ! export  default  function(stream,  opts,  done)  {      //  ...   };
28. //  phoneQuery.js   ! //  look  up  a  phone  number  or  contact   module.exports  =  function(query)  {  /*  ...  */  };   ! //  initiate  a  phone  call   module.exports.call  =  function()  {  /*  ...  */  };
29. var  ಠ_ಠ  =  require("phoneQuery");   ಠ_ಠ("Mom").mobile  //  "555-­‐555-­‐5555"   ಠ_ಠ("Mom").email  //  "mom@example.com"   ಠ_ಠ.call("Boss",  "work")   ಠ_ಠ.call(ಠ_ಠ,  query)  //  boom!
30. //  phoneQuery.js   ! //  look  up  a  phone  number  or  contact   export  default  function(query)  {  /*  ...  */  };   ! //  initiate  a  phone  call   export  function  call()  {  /*  ...  */  };
31. //  file.js   var  Folder  =  require("./folder.js");   //  ...   ! function  File()  {  /*  ...  */  }   File.prototype.dotSlash  =  function()  {      ...  new  Folder(...)  ...;   }   module.exports  =  File;
32. //  folder.js   var  File  =  require("./file.js");   //  ...   ! function  Folder()  {  /*  ...  */  }   Folder.prototype.contents  =  function()  {      ...  new  File(...)  ...;   }   module.exports  =  Folder;
33. var  Folder  =  require("./folder.js");   var  File  =  require("./file.js");   //  ...   file.dotSlash()  //  object  is  not  a  function
34. //  file.js   import  Folder  from  "./folder.js";   //  ...   ! export  default  class  File  {      //  ...      dotSlash()  {          ...  new  Folder(...)  ...;      }   }
35. //  folder.js   import  File  from  "./file.js";   //  ...   ! export  default  class  Folder  {      //  ...      contents()  {          ...  new  File(...)  ...      }   }
36. generators
37. fs.readFile("/etc/passwd",  function(err,  data)  {      if  (err)  throw  err;      console.log(data);   }
38. fs.readFile("/etc/passwd",  function(err,  data)  {      if  (err)  throw  err;      fs.readFile("~/.bashrc",  function(err,  data2)  {          if  (err)  throw  err;          fs.readFile(tmp,  function(err,  data3)  {              if  (err)  throw  err;              //  ...          }      }   }
39. fsp.readFile("/etc/passwd")        .then(function(data)  {            return  fsp.readFile("~/.bashrc");        })        .then(function(data2)  {            return  fsp.readFile(tmp);        })        .then(function(data3)  {            //  ...        })        .catch(function(err)  {            throw  err;        });
40. function*  f(x,  y,  z)  {      yield  x;      yield  y;      yield  z;   }   for  (s  of  f("aloha",  "howdy",  "hey"))  {      console.log(s);  //  "aloha",  "howdy",  "hey"   }
41. spawn(function*()  {      try  {          var  data  =  yield  fsp.readFile("/etc/passwd");          var  data2  =  yield  fsp.readFile("~/.bashrc");          var  data3  =  yield  fsp.readFile(tmp);          //  ...      }  catch  (err)  {          throw  err;      }   })
42. async  function  f()  {      try  {          var  data  =  await  fsp.readFile("/etc/passwd");          var  data2  =  await  fsp.readFile("~/.bashrc");          var  data3  =  await  fsp.readFile(tmp);          //  ...      }  catch  (err)  {          throw  err;      }   })
43. Much  more • Default  parameters,  rest-­‐params,  argument  spread   • Destructuring  binding  and  assignment   • Object,  function,  method  shorthands   • Proxy,  Map,  WeakMap,  Set,  WeakSet   • Typed  arrays   • Lexical  bindings   • Unique  symbols   • String  interpolation   • Reflection  API   • Proper  tail  calls
44. asm.js
45. JavaScript  lacks  features  as  a  target  language.   JavaScript  is  slow.   Even  when  it’s  fast,  JavaScript  is  unpredictable.   JIT  compilation  can  be  janky.
46. Revolution:  bytecode  VM   Evolution:   • build  a  native  →  JS  compiler   • study  and  optimize  code  patterns  it  generates   • close  gaps  where  we  aren't  generating  optimal  code   • formalize  pattern  as  validator  㱺  AOT
47. function  compiledCalculation()  {      var  x  =  f()|0;      var  y  =  g()|0;      return  (x+y)|0;   }
48. var  MEM8  =  new  Uint8Array(1024  *  1024);   var  MEM32  =  new  Uint32Array(MEM8.buffer);   ! function  compiledMemoryAccess()  {      MEM8[x]  =  MEM8[x+10];      MEM32[(x+16)>>2]  =  100;   }
49. A  Safe  ‟JS  VM” • Static  validation:  no  guards,  deopts,  boxing   • SFI:  memory  access  constrained  to  binary  buffer
50. Since  day  one,  asm.js  has  worked  across  browsers.
52. The  Extensible  Web
53. design evaluate design evaluate design evaluate
54. do  {      product.build();      product.ship();      product.evaluate();   }  while  (!product.isPerfect());
55. do  {      standard.design();      standard.ship();      standard.evaluate();      throw  new  DontBreakTheWeb();   }  while  (!standard.isPerfect());
56. design evaluate design evaluate design evaluate
57. Prioritize  the  Gaps • Standardize  low-­‐level,  general  functionality   • Leave  high-­‐level  experimentation  to  the  market   • Example:  SharedArrayBuffer
58. browser  vendors webdevs development   workflow
59. browser  vendors webdevs development   workflow
60. Thank  you