The Future of JavaScript

SFRails, 4/19/12

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
    es-discuss@mozilla.org
    

    View Slide

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

    View Slide