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

Evolving the World's Most Popular Programming Language

dherman
March 04, 2015

Evolving the World's Most Popular Programming Language

My presentation to Dawn Song's #wt294 course

dherman

March 04, 2015
Tweet

More Decks by dherman

Other Decks in Programming

Transcript

  1. <script>      function*  gen()  {        

     yield  42;      }   </script>
  2. 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
  3. function  Stack()  {      this.elements  =  [];   }

      ! Stack.prototype.isEmpty  =  function()  {      return  this.elements.length  ===  0;   };   Stack.prototype.push  =  function(x)  {      this.elements.push(x);   };
  4. class  Stack  {      constructor()  {      

       this.elements  =  [];      }      isEmpty()  {          return  this.elements.length  ===  0;      }      push(x)  {  this.elements.push(x);  }      //  ...   }
  5. function  MyArray()  {      Array.call(this);  //  super  (!!)  

       //  ...   }   ! MyArray.prototype  =  new  Array();   MyArray.prototype.foo  =  function()  {      //  ...   };
  6. class  MyArray  extends  Array  {      constructor()  {  

           super();          //  ...      }      foo()  {          //  ...      }   }
  7. var  bytes  =  require("bytes");   var  iconv  =  require("iconv-­‐lite");  

    ! module.exports  =  function(stream,  opts,  done)  {      //  ...   };
  8. import  bytes  from  "bytes";   import  iconv  from  "iconv-­‐lite";  

    ! export  default  function(stream,  opts,  done)  {      //  ...   };
  9. import  bytes  from  "bytes";   import  iconv  from  "iconv-­‐lite";  

    ! export  default  function(stream,  opts,  done)  {      //  ...   };
  10. //  phoneQuery.js   ! //  look  up  a  phone  number

     or  contact   module.exports  =  function(query)  {  /*  ...  */  };   ! //  initiate  a  phone  call   module.exports.call  =  function()  {  /*  ...  */  };
  11. //  phoneQuery.js   ! //  look  up  a  phone  number

     or  contact   export  default  function(query)  {  /*  ...  */  };   ! //  initiate  a  phone  call   export  function  call()  {  /*  ...  */  };
  12. //  file.js   var  Folder  =  require("./folder.js");   //  ...

      ! function  File()  {  /*  ...  */  }   File.prototype.dotSlash  =  function()  {      ...  new  Folder(...)  ...;   }   module.exports  =  File;
  13. //  folder.js   var  File  =  require("./file.js");   //  ...

      ! function  Folder()  {  /*  ...  */  }   Folder.prototype.contents  =  function()  {      ...  new  File(...)  ...;   }   module.exports  =  Folder;
  14. var  Folder  =  require("./folder.js");   var  File  =  require("./file.js");  

    //  ...   file.dotSlash()  //  object  is  not  a  function
  15. //  file.js   import  Folder  from  "./folder.js";   //  ...

      ! export  default  class  File  {      //  ...      dotSlash()  {          ...  new  Folder(...)  ...;      }   }
  16. //  folder.js   import  File  from  "./file.js";   //  ...

      ! export  default  class  Folder  {      //  ...      contents()  {          ...  new  File(...)  ...      }   }
  17. 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;              //  ...          }      }   }
  18. 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;        });
  19. function*  f(x,  y,  z)  {      yield  x;  

       yield  y;      yield  z;   }   for  (s  of  f("aloha",  "howdy",  "hey"))  {      console.log(s);  //  "aloha",  "howdy",  "hey"   }
  20. 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;      }   })
  21. 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;      }   })
  22. 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
  23. JavaScript  lacks  features  as  a  target  language.   JavaScript  is

     slow.   Even  when  it’s  fast,  JavaScript  is  unpredictable.   JIT  compilation  can  be  janky.
  24. 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
  25. function  compiledCalculation()  {      var  x  =  f()|0;  

       var  y  =  g()|0;      return  (x+y)|0;   }
  26. var  MEM8  =  new  Uint8Array(1024  *  1024);   var  MEM32

     =  new  Uint32Array(MEM8.buffer);   ! function  compiledMemoryAccess()  {      MEM8[x]  =  MEM8[x+10];      MEM32[(x+16)>>2]  =  100;   }
  27. A  Safe  ‟JS  VM” • Static  validation:  no  guards,  deopts,

     boxing   • SFI:  memory  access  constrained  to  binary  buffer
  28. do  {      product.build();      product.ship();    

     product.evaluate();   }  while  (!product.isPerfect());
  29. do  {      standard.design();      standard.ship();    

     standard.evaluate();      throw  new  DontBreakTheWeb();   }  while  (!standard.isPerfect());
  30. Prioritize  the  Gaps • Standardize  low-­‐level,  general  functionality   •

    Leave  high-­‐level  experimentation  to  the  market   • Example:  SharedArrayBuffer