The Future of JavaScript

SFRails, 4/19/12

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