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

The future of JavaScript

dherman
September 27, 2011

The future of JavaScript

I've seen the future of JavaScript, and it's AMAZING

dherman

September 27, 2011
Tweet

More Decks by dherman

Other Decks in Programming

Transcript

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

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

           color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
  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  }  } ])
  4. function  Container()  {        var  secret  =  3;

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

     } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
  6. var  markers  =  new  WeakMap(); var  tile  =  new  Tile(...);

    var  results  =  [...]; tiles.set(tile,  results);
  7. var  obj  =  Proxy.create({        get:  function(...)  {

     ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... },  proto);
  8. 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.
  9. pan.pourWater(function()  {        range.bringToBoil(function()  {      

             range.lowerHeat(function()  {                        pan.addRice(function()  {                                setTimeout(function()  {                                        range.turnOff();                                        serve();                                },  15  *  60  *  1000);                        });                });        }); });
  10. pan.pourWater(function()  {        range.bringToBoil(function()  {      

             range.lowerHeat(function()  {                        pan.addRice(function()  {                                setTimeout(function()  {                                        range.turnOff();                                        serve();                                },  15  *  60  *  1000);                        });                });        }); }); pyramid of doom
  11. function*  g()  {        yield  1;    

       yield  2; } var  obj  =  g(); obj.next();  //  1 obj.next();  //  2
  12. var  task  =  new  Task(function*()  {        var

     text  =  yield  XHR("file.txt");        yield  timeout(1000);        status.innerHTML  =  text; }); task.start();
  13. var  Collections  =  (function()  {        function  Dictionary()

     {  ...  }        return  {                Dictionary:  Dictionary        }; })();
  14. import  {  $  }  from  "jquery.js"; import  {  map,  each

     }  from  "underscore.js"; loaded once, before execution
  15. Death of a thousand cuts typeof  null  ===  "object"  //

     wtfjs? arguments isn’t an Array #$@?! var hoisting
  16. for  (i  =  0;  i  <  a.length;  i++)  {  

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

         let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; } block scoped
  18. var  {  r,  g,  b  }  =  thing.color; var  [x,

     y]  =  circle.center; [a,  b]  =  [b,  a];
  19. var  obj  =  {        foo:  "foo",  

         bar()  {  return  this.foo  },        [getName()]:  17 };
  20. 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
  21. import  iterate  from  "@iter"; obj[iterate]  =  function()  {    

       return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
  22. We (Ecma) are working hard and fast on the spec.

    We (vendors) will ship features before the spec is done. Transpilers as language shims: Traceur, Narcissus