$30 off During Our Annual Pro Sale. View Details »

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. Evolving  the  World’s  Most  
    Popular  Programming  
    Language
    Dave  Herman,  Mozilla  Research

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. don’t break
    the web

    View Slide

  8.  <br/>!<br/>!<br/>!<br/>

    View Slide

  9.  <br/>    function  gen()  {  <br/>        yield  42;  <br/>    }  <br/>

    View Slide

  10.  <br/>    function  gen()  {  <br/>        yield  42;  <br/>    }  <br/>

    View Slide

  11.  <br/>    function  gen()  {  <br/>        yield  42;  <br/>    }  <br/>

    View Slide

  12. can  haz  one  JS?

    View Slide

  13.  <br/>    function*  gen()  {  <br/>        yield  42;  <br/>    }  <br/>

    View Slide

  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

    View Slide

  15. apps
    browsers

    View Slide

  16. http://babeljs.io

    View Slide

  17. classes

    View Slide

  18. function  Stack()  {  
       this.elements  =  [];  
    }  
    !
    Stack.prototype.isEmpty  =  function()  {  
       return  this.elements.length  ===  0;  
    };  
    Stack.prototype.push  =  function(x)  {  
       this.elements.push(x);  
    };

    View Slide

  19. .elements
    .isEmpty  
    .push  
    .pop  
    .top
    Stack.prototype
    var  stack  =  new  Stack();

    View Slide

  20. class  Stack  {  
       constructor()  {  
           this.elements  =  [];  
       }  
       isEmpty()  {  
           return  this.elements.length  ===  0;  
       }  
       push(x)  {  this.elements.push(x);  }  
       //  ...  
    }

    View Slide

  21. function  MyArray()  {  
       Array.call(this);  //  super  (!!)  
       //  ...  
    }  
    !
    MyArray.prototype  =  new  Array();  
    MyArray.prototype.foo  =  function()  {  
       //  ...  
    };

    View Slide

  22. var  a  =  new  MyArray();  
    a[17]  =  "foo";  
    a.length  //  0

    View Slide

  23. class  MyArray  extends  Array  {  
       constructor()  {  
           super();  
           //  ...  
       }  
       foo()  {  
           //  ...  
       }  
    }

    View Slide

  24. modules

    View Slide

  25. var  bytes  =  require("bytes");  
    var  iconv  =  require("iconv-­‐lite");  
    !
    module.exports  =  function(stream,  opts,  done)  {  
       //  ...  
    };

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. var  ಠ_ಠ  =  require("phoneQuery");  
    ಠ_ಠ("Mom").mobile  //  "555-­‐555-­‐5555"  
    ಠ_ಠ("Mom").email  //  "[email protected]"  
    ಠ_ಠ.call("Boss",  "work")  
    ಠ_ಠ.call(ಠ_ಠ,  query)  //  boom!

    View Slide

  30. //  phoneQuery.js  
    !
    //  look  up  a  phone  number  or  contact  
    export  default  function(query)  {  /*  ...  */  };  
    !
    //  initiate  a  phone  call  
    export  function  call()  {  /*  ...  */  };

    View Slide

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

    View Slide

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

    View Slide

  33. var  Folder  =  require("./folder.js");  
    var  File  =  require("./file.js");  
    //  ...  
    file.dotSlash()  //  object  is  not  a  function

    View Slide

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

    View Slide

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

    View Slide

  36. generators

    View Slide

  37. fs.readFile("/etc/passwd",  function(err,  data)  {  
       if  (err)  throw  err;  
       console.log(data);  
    }

    View Slide

  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;  
               //  ...  
           }  
       }  
    }

    View Slide

  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;  
         });

    View Slide

  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"  
    }

    View Slide

  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;  
       }  
    })

    View Slide

  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;  
       }  
    })

    View Slide

  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

    View Slide

  44. asm.js

    View Slide

  45. JavaScript  lacks  features  as  a  target  language.  
    JavaScript  is  slow.  
    Even  when  it’s  fast,  JavaScript  is  unpredictable.  
    JIT  compilation  can  be  janky.

    View Slide

  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

    View Slide

  47. function  compiledCalculation()  {  
       var  x  =  f()|0;  
       var  y  =  g()|0;  
       return  (x+y)|0;  
    }

    View Slide

  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;  
    }

    View Slide

  49. A  Safe  ‟JS  VM”
    • Static  validation:  no  guards,  deopts,  boxing  
    • SFI:  memory  access  constrained  to  binary  buffer

    View Slide

  50. Since  day  one,  asm.js  has  worked  across  browsers.

    View Slide

  51. View Slide

  52. The  Extensible  Web

    View Slide

  53. design
    evaluate
    design
    evaluate
    design
    evaluate

    View Slide

  54. do  {  
       product.build();  
       product.ship();  
       product.evaluate();  
    }  while  (!product.isPerfect());

    View Slide

  55. do  {  
       standard.design();  
       standard.ship();  
       standard.evaluate();  
       throw  new  DontBreakTheWeb();  
    }  while  (!standard.isPerfect());

    View Slide

  56. design
    evaluate
    design
    evaluate
    design
    evaluate

    View Slide

  57. Prioritize  the  Gaps
    • Standardize  low-­‐level,  general  functionality  
    • Leave  high-­‐level  experimentation  to  the  market  
    • Example:  SharedArrayBuffer

    View Slide

  58. browser  vendors webdevs
    development  
    workflow

    View Slide

  59. browser  vendors webdevs
    development  
    workflow

    View Slide

  60. Thank  you

    View Slide