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

So bright it burns

dherman
November 04, 2011

So bright it burns

My YUIConf 2011 keynote

dherman

November 04, 2011
Tweet

More Decks by dherman

Other Decks in Programming

Transcript

  1. THE FUTURE OF JAVASCRIPT SO BRIGHT IT BURNS

  2. Hi, I’m dherman @littlecalculist

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

    is...
  4. None
  5. None
  6. tl;dr

  7. TIER 1 AWESOMENESS modules • block scoping • generators •

    proxies • binary data • destructuring • rest-args & defaults TIER 2 AWESOMENESS name objects • custom iteration • comprehensions • string templates • hash tables & weak maps
  8. Great languages deserve great libraries and that means modules

  9. None
  10. browser <script></script>

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

     {  ...  }        return  {                Dict:  Dict        }; })();
  12. “The human compiler, at work.” — Paul Graham “The sincerest

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

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

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

     }  from  "underscore.js"; loaded once, before execution
  16. let is the new var block scoping (at long, long

    last)
  17. for  (i  =  0;  i  <  a.length;  i++)  {  

         var  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
  18. for  (i  =  0;  i  <  a.length;  i++)  {  

         let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
  19. Generator functions an alternative to callback spaghetti

  20. function*  counter()  {        yield  1;    

       yield  2;        yield  3; } var  g  =  counter(); alert(g.next());  //  1 alert(g.next());  //  2 alert(g.next());  //  3
  21. XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {  

                 XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                status.innerHTML  =                                        foo  +  bar  +  baz;                        },  1000);                });        }); });
  22. 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
  23. 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);                });        }); });
  24. 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);                });        }); });
  25. 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);        }); });
  26. 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);
  27. 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.
  28. 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; });
  29. Proxies meta-programming for fun and profit

  30. var  p  =  new  Proxy(obj,  {        get:

     function(...)  {  ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... });
  31. Bits, bytes and blobs binary file and network I/O

  32. var  Point2D  =  new  StructType({        x:  uint32,

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

           color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
  34. 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  }  } ])
  35. Destructuring try it, you’ll like it

  36. var  {  r,  g,  b  }  =  thing.color; var  [x,

     y]  =  circle.center; [a,  b]  =  [b,  a];
  37. function  div({  width,  height,  border  })  {      

     ... }
  38. Rest-args and defaults death to the arguments object!

  39. function  f(i,  j,  ...rest)  {        return  rest.slice(i,

     j); }
  40. array.push(thing1,  thing2,  ...moarThings); var  shape  =  new  Shape(...points);

  41. function  img(src,  width=320,  height=240)  {        ... }

  42. function  img({  src,              

                   width=320,                              height=240  })  {        ... }
  43. Name objects first-class, unique property keys

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

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

     } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
  46. Custom object iteration taming the for-in loop

  47. for  (x  in  [3,  4,  5])        

     //  0,  1,  2  (d’oh) for  (x  of  [3,  4,  5])          //  3,  4,  5 for  (x  of  keys(o))              //  keys  in  o for  (x  of  values(o))          //  values  of  o for  ([k,  v]  of  items(o))  //  props  of  o
  48. import  iterate  from  "@iter"; obj[iterate]  =  function()  {    

       return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
  49. Comprehensions beautiful array processing

  50. [  x  *  y  for  (x  of  obj1)  for  (y

     of  obj2)  ] (  x  *  y  for  (x  of  obj1)  for  (y  of  obj2)  )
  51. String templates untangling string formatting code

  52. "<p>\nohai,  "  + firstName  +  "  "  +  lastName  +

    "\n</p>"
  53. `<p> ohai,  ${firstName}  ${lastName} </p>`

  54. safeHTML`<p> ohai,  ${firstName}  ${lastName} </p>`

  55. Object-keyed tables hash tables and weak maps

  56. var  scores  =  new  Map(); var  player1  =  {  ...

     }; scores.set(player1,  0); scores.get(player1)  //  0
  57. var  markers  =  new  WeakMap(); var  tile  =  new  Tile(...);

    var  results  =  [...]; tiles.set(tile,  results);
  58. There is a bigger picture.

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

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

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

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

  63. How soon is now?

  64. We (Ecma) are working hard and fast on the spec.

    We (vendors) are prototyping and shipping features now. Transpilers as language shims: Traceur, Narcissus
  65. None