The Future of JavaScript

2e36436c692b2e5fbc172e9fb7563171?s=47 dherman
April 20, 2012

The Future of JavaScript

SFRails, 4/19/12

2e36436c692b2e5fbc172e9fb7563171?s=128

dherman

April 20, 2012
Tweet

Transcript

  1. THE FUTURE => OF JAVASCRIPT Dave Herman

  2. Hi, I’m dherman @littlecalculist

  3. I — JavaScript and I love the language it almost

    is...
  4. None
  5. None
  6. modules • block scoping • generators • proxies • binary

    data • destructuring • rest-args & defaults • name objects • custom iteration • comprehensions • string templates • hash tables & weak maps • class syntax • full Unicode • function/object shorthands tl;dr:
  7. Great libraries need modules

  8. var  Collections  =  (function()  {        function  Dict()

     {  ...  }        return  {                Dict:  Dict        }; })();
  9. None
  10. browser <script></script>

  11. “The human compiler, at work.” — Paul Graham “The sincerest

    form of feature request.” — someone?
  12. module  Collections  {        export  function  Dict()  {

     ...  } }
  13. import  {  $  }  from  "jquery.js"; import  {  map,  each

     }  from  "underscore.js";
  14. import  {  $  }  from  "jquery.js"; import  {  map,  each

     }  from  "underscore.js"; loaded once, before execution
  15. Generators cleaning up callback spaghetti

  16. XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {  

                 XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                status.innerHTML  =                                        foo  +  bar  +  baz;                        },  1000);                });        }); });
  17. XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {  

                 XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                status.innerHTML  =                                        foo  +  bar  +  baz;                        },  1000);                });        }); }); pyramid of doom
  18. function  onTimeout(foo,  bar,  baz)  {        status.innerHTML  =

     foo  +  bar  +  baz; } XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {                XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                onTimeout(foo,  bar,  baz);                        },  1000);                });        }); });
  19. function  onTimeout(foo,  bar,  baz)  {        status.innerHTML  =

     foo  +  bar  +  baz; } function  onBaz(foo,  bar,  baz)  {        setTimeout(function()  {                onTimeout(foo,  bar,  baz);        },  1000); } XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {                XHR("baz.txt",  function(baz)  {                        onBaz(foo,  bar,  baz);                });        }); });
  20. function  onTimeout(foo,  bar,  baz)  {        status.innerHTML  =

     foo  +  bar  +  baz; } function  onBaz(foo,  bar,  baz)  {        setTimeout(function()  {                onTimeout(foo,  bar,  baz);        },  1000); } function  onBar(foo,  bar)  {        XHR("baz.txt",  function(baz)  {                onBaz(foo,  bar,  baz);        }); } XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {                onBar(foo,  bar);        }); });
  21. function  onTimeout(foo,  bar,  baz)  {        status.innerHTML  =

     foo  +  bar  +  baz; } function  onBaz(foo,  bar,  baz)  {        setTimeout(function()  {                onTimeout(foo,  bar,  baz);        },  1000); } function  onBar(foo,  bar)  {        XHR("baz.txt",  function(baz)  {                onBaz(foo,  bar,  baz);        }); } function  onFoo(foo)  {        XHR("bar.txt",  function(bar)  {                onBar(foo,  bar);        }); } XHR("foo.txt",  onFoo);
  22. Pour 1/2 cup water into pan. When you’re done: Bring

    water to boil. When that’s done: Lower heat and add rice. After 15 minutes: Turn off heat and serve.
  23. spawn(function*()  {        var  foo  =  yield  read("foo.txt"),

                   bar  =  yield  read("bar.txt"),                baz  =  yield  read("baz.txt");        yield  sleep(1000);        status.innerHTML  =  foo  +  bar  +  baz; }); promise
  24. Binary data efficient memory layout and I/O

  25. var  Point2D  =  struct({        x:  uint32,  

         y:  uint32 }); var  Color  =  struct({        r:  uint8,  g:  uint8,  b:  uint8 });
  26. var  Pixel  =  struct({        point:  Point2D,  

         color:  Color }); var  Triangle  =  array(Pixel,  3);
  27. new  Triangle([        {  point:  {  x:  0,

     y:  0  },            color:  {  r:  255,  g:  255,  b:  255  }  },        {  point:  {  x:  5,  y:  5  },            color:  {  r:  128,  g:  0,  b:  0  }  },        {  point:  {  x:  10,  y:  0  },            color:  {  r:  0,  g:  0,  b:  128  }  } ])
  28. Name objects first-class, unique property keys

  29. function  Container()  {        var  secret  =  3;

           this.service  =  function()  {                if  (secret-­‐-­‐)  {                        ...                }        }; }
  30. var  key  =  new  Name("secret"); function  Container()  {  this[key]  =

     3  } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
  31. Familiar friends… should be no surprise for Rubyists

  32. Destructuring: var  [x,  y]  =  getPair(); Parameter defaults: function(x=0,  y=0)

     {  } Rest/splat: function(...args)  {  return  args  } Iterators: for  (x  of  keys(obj))  {  } String interpolation: `Hello  ${username}!`
  33. The bigger picture…

  34. “Be a better language for: a. complex apps b. libraries

    c. code generators”
  35. Motivated by use cases. Solve with simple, general, composable features.

    Pieces have to fit together in a cohesive whole.
  36. study the issues study the big picture study the issues

    again study the big picture again study the issues again SHIP IT!
  37. Work in the open wiki.ecmascript.org es-discuss@mozilla.org

  38. Work in the open wiki.ecmascript.org es-discuss@mozilla.org Thank you.