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

The Future of JavaScript

dherman
April 20, 2012

The Future of JavaScript

SFRails, 4/19/12

dherman

April 20, 2012
Tweet

More Decks by dherman

Other Decks in Programming

Transcript

  1. THE FUTURE
    =>
    OF JAVASCRIPT
    Dave Herman

    View Slide

  2. Hi, I’m
    dherman
    @littlecalculist

    View Slide

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

    View Slide

  4. View Slide

  5. View Slide

  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:

    View Slide

  7. Great libraries
    need modules

    View Slide

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

    View Slide

  9. View Slide

  10. browser

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. Generators
    cleaning up callback spaghetti

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  24. Binary data
    efficient memory layout and I/O

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Name objects
    first-class, unique property keys

    View Slide

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

    View Slide

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

    View Slide

  31. Familiar friends…
    should be no surprise for Rubyists

    View Slide

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

    View Slide

  33. The bigger picture…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide