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. I HAVE SEEN THE FUTURE OF JAVASCRIPT AND IT’S AMAZING

  2. Hi, I’m dherman @littlecalculist

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

    is...
  4. None
  5. None
  6. POWER

  7. Bits, bytes and blobs binary file and network I/O

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

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

           color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
  10. 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  }  } ])
  11. Keep off my property private names

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

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

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

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

     ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... },  proto);
  16. Callbacks: the new goto? (well, no, but... still.)

  17. 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.
  18. pan.pourWater(function()  {        range.bringToBoil(function()  {      

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

             range.lowerHeat(function()  {                        pan.addRice(function()  {                                setTimeout(function()  {                                        range.turnOff();                                        serve();                                },  15  *  60  *  1000);                        });                });        }); }); pyramid of doom
  20. generators a.k.a. coroutines a.k.a. Interruptible functions

  21. function*  g()  {        yield  1;    

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

     text  =  yield  XHR("file.txt");        yield  timeout(1000);        status.innerHTML  =  text; }); task.start();
  23. Great languages deserve great libraries and that means modules

  24. None
  25. browser <script></script>

  26. var  Collections  =  (function()  {        function  Dictionary()

     {  ...  }        return  {                Dictionary:  Dictionary        }; })();
  27. “The human compiler, at work.” — Paul Graham

  28. module  Collections  {        export  function  Dictionary()  {

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

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

     }  from  "underscore.js"; loaded once, before execution
  31. Expressiveness artwork credit: sam flores

  32. Death of a thousand cuts typeof  null  ===  "object"  //

     wtfjs? arguments isn’t an Array #$@?! var hoisting
  33. function  f(i,  j,  ...rest)  {        return  rest.slice(i,

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

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

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

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

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

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

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

       return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
  42. [  x  *  y  for  (x  of  obj1)  for  (y

     of  obj2)  ]
  43. "<p>\nohai,  "  + firstName  +  "  "  +  lastName  +

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

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

  46. How soon is now?

  47. 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
  48. None