Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evolving the World's Most Popular Programming Language

2e36436c692b2e5fbc172e9fb7563171?s=47 dherman
March 04, 2015

Evolving the World's Most Popular Programming Language

My presentation to Dawn Song's #wt294 course

2e36436c692b2e5fbc172e9fb7563171?s=128

dherman

March 04, 2015
Tweet

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