So bright it burns

2e36436c692b2e5fbc172e9fb7563171?s=47 dherman
November 04, 2011

So bright it burns

My YUIConf 2011 keynote

2e36436c692b2e5fbc172e9fb7563171?s=128

dherman

November 04, 2011
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 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
  5. 9.
  6. 11.

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

     {  ...  }        return  {                Dict:  Dict        }; })();
  7. 12.
  8. 15.

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

     }  from  "underscore.js"; loaded once, before execution
  9. 17.

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

         var  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
  10. 18.

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

         let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
  11. 20.

    function*  counter()  {        yield  1;    

       yield  2;        yield  3; } var  g  =  counter(); alert(g.next());  //  1 alert(g.next());  //  2 alert(g.next());  //  3
  12. 21.

    XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {  

                 XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                status.innerHTML  =                                        foo  +  bar  +  baz;                        },  1000);                });        }); });
  13. 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
  14. 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);                });        }); });
  15. 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);                });        }); });
  16. 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);        }); });
  17. 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);
  18. 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.
  19. 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; });
  20. 30.

    var  p  =  new  Proxy(obj,  {        get:

     function(...)  {  ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... });
  21. 32.

    var  Point2D  =  new  StructType({        x:  uint32,

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

    var  Pixel  =  new  StructType({        point:  Point2D,

           color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
  23. 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  }  } ])
  24. 36.

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

     y]  =  circle.center; [a,  b]  =  [b,  a];
  25. 42.

    function  img({  src,              

                   width=320,                              height=240  })  {        ... }
  26. 44.

    function  Container()  {        var  secret  =  3;

           this.service  =  function()  {                if  (secret-­‐-­‐)  {                        ...                }        }; }
  27. 45.

    var  key  =  Name.create("secret"); function  Container()  {  this[key]  =  3

     } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
  28. 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
  29. 48.

    import  iterate  from  "@iter"; obj[iterate]  =  function()  {    

       return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
  30. 50.

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

     of  obj2)  ] (  x  *  y  for  (x  of  obj1)  for  (y  of  obj2)  )
  31. 56.

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

     }; scores.set(player1,  0); scores.get(player1)  //  0
  32. 57.

    var  markers  =  new  WeakMap(); var  tile  =  new  Tile(...);

    var  results  =  [...]; tiles.set(tile,  results);
  33. 60.

    Motivated by use cases. Solve with simple, general, composable features.

    Pieces have to fit together in a cohesive whole.
  34. 61.

    study the issues study the big picture study the issues

    again study the big picture again study the issues again SHIP IT!
  35. 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
  36. 65.