Evolving the World's Most Popular Programming Language

Transcript

1. Evolving  the  World’s  Most   Popular  Programming   Language Dave

    Herman,  Mozilla  Research
2. None
3. None
4. None
5. None
6. None

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.

51. None

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