THE FUTURE => OF JAVASCRIPT Dave Herman

Hi, I’m dherman @littlecalculist

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

No content

No content

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:

Great libraries need modules

var  Collections  =  (function()  {        function  Dict()  {  ...  }        return  {                Dict:  Dict        }; })();

No content

browser

“The human compiler, at work.” — Paul Graham “The sincerest form of feature request.” — someone?

module  Collections  {        export  function  Dict()  {  ...  } }

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

import  {  $  }  from  "jquery.js"; import  {  map,  each  }  from  "underscore.js"; loaded once, before execution

Generators cleaning up callback spaghetti

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

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

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

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

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

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

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.

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

Binary data efficient memory layout and I/O

var  Point2D  =  struct({        x:  uint32,        y:  uint32 }); var  Color  =  struct({        r:  uint8,  g:  uint8,  b:  uint8 });

var  Pixel  =  struct({        point:  Point2D,        color:  Color }); var  Triangle  =  array(Pixel,  3);

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

Name objects first-class, unique property keys

function  Container()  {        var  secret  =  3;        this.service  =  function()  {                if  (secret-­‐-­‐)  {                        ...                }        }; }

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

Familiar friends… should be no surprise for Rubyists

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}!`

The bigger picture…

“Be a better language for: a. complex apps b. libraries c. code generators”

Motivated by use cases. Solve with simple, general, composable features. Pieces have to fit together in a cohesive whole.

study the issues study the big picture study the issues again study the big picture again study the issues again SHIP IT!

Work in the open wiki.ecmascript.org [email protected]

Work in the open wiki.ecmascript.org [email protected] Thank you.