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

    View full-size slide

  2. Hi, I’m
    dherman
    @littlecalculist

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. var  Pixel  =  new  StructType({
           point:  Point2D,
           color:  Color
    });
    var  Triangle  =  new  ArrayType(Pixel,  3);

    View full-size slide

  7. 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 full-size slide

  8. Keep off my property
    private names

    View full-size slide

  9. function  Container()  {
           var  secret  =  3;
           this.service  =  function()  {
                   if  (secret-­‐-­‐)  {
                           ...
                   }
           };
    }

    View full-size slide

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

    View full-size slide

  11. var  markers  =  new  WeakMap();
    var  tile  =  new  Tile(...);
    var  results  =  [...];
    tiles.set(tile,  results);

    View full-size slide

  12. var  obj  =  Proxy.create({
           get:  function(...)  {  ...  },
           set:  function(...)  {  ...  },
           delete:  function(...)  {  ...  },
           ...
    },  proto);

    View full-size slide

  13. Callbacks: the new goto?
    (well, no, but... still.)

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. generators a.k.a. coroutines a.k.a.
    Interruptible functions

    View full-size slide

  18. function*  g()  {
           yield  1;
           yield  2;
    }
    var  obj  =  g();
    obj.next();  //  1
    obj.next();  //  2

    View full-size slide

  19. var  task  =  new  Task(function*()  {
           var  text  =  yield  XHR("file.txt");
           yield  timeout(1000);
           status.innerHTML  =  text;
    });
    task.start();

    View full-size slide

  20. Great languages deserve
    great libraries
    and that means modules

    View full-size slide

  21. var  Collections  =  (function()  {
           function  Dictionary()  {  ...  }
           return  {
                   Dictionary:  Dictionary
           };
    })();

    View full-size slide

  22. “The human compiler, at work.”
    — Paul Graham

    View full-size slide

  23. module  Collections  {
           export  function  Dictionary()  {  ...  }
    }

    View full-size slide

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

    View full-size slide

  25. import  {  $  }  from  "jquery.js";
    import  {  map,  each  }  from  "underscore.js";
    loaded once, before execution

    View full-size slide

  26. Expressiveness artwork credit: sam flores

    View full-size slide

  27. Death of a thousand cuts
    typeof  null  ===  "object"  //  wtfjs?
    arguments isn’t an Array
    #$@?! var hoisting

    View full-size slide

  28. function  f(i,  j,  ...rest)  {
           return  rest.slice(i,  j);
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. var  {  r,  g,  b  }  =  thing.color;
    var  [x,  y]  =  circle.center;
    [a,  b]  =  [b,  a];

    View full-size slide

  34. var  obj  =  {
           foo:  "foo",
           bar()  {  return  this.foo  },
           [getName()]:  17
    };

    View full-size slide

  35. 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

    View full-size slide

  36. import  iterate  from  "@iter";
    obj[iterate]  =  function()  {
           return  {
                   next:  function()  {  ...  }
           }
    }
    for  (x  of  obj)  {  ...  }

    View full-size slide

  37. [  x  *  y  for  (x  of  obj1)  for  (y  of  obj2)  ]

    View full-size slide

  38. "\nohai,  "  +
    firstName  +  "  "  +  lastName  +
    "\n"

    View full-size slide

  39. `
    ohai,  ${firstName}  ${lastName}
    `

    View full-size slide

  40. safeHTML`
    ohai,  ${firstName}  ${lastName}
    `

    View full-size slide

  41. How soon is now?

    View full-size slide

  42. 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

    View full-size slide