So bright it burns

My YUIConf 2011 keynote

Transcript

1. THE FUTURE OF JAVASCRIPT
   SO BRIGHT IT BURNS
   

   View Slide

2. Hi, I’m
   dherman
   @littlecalculist
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

6. tl;dr
   

   View Slide

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
   

   View Slide

8. Great languages deserve
   great libraries
   and that means modules
   

   View Slide

9. View Slide

10. browser
    
    

    View Slide

11. var  Collections  =  (function()  {
           function  Dict()  {  ...  }
           return  {
                   Dict:  Dict
           };
    })();
    

    View Slide

12. “The human compiler, at work.”
    — Paul Graham
    “The sincerest form of feature request.”
    — someone?
    

    View Slide

13. module  Collections  {
           export  function  Dict()  {  ...  }
    }
    

    View Slide

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

    View Slide

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

    View Slide

16. let is the new var
    block scoping (at long, long last)
    

    View Slide

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

    View Slide

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

    View Slide

19. Generator functions
    an alternative to callback spaghetti
    

    View Slide

20. function*  counter()  {
           yield  1;
           yield  2;
           yield  3;
    }
    var  g  =  counter();
    alert(g.next());  //  1
    alert(g.next());  //  2
    alert(g.next());  //  3
    

    View Slide

21. XHR("foo.txt",  function(foo)  {
           XHR("bar.txt",  function(bar)  {
                   XHR("baz.txt",  function(baz)  {
                           setTimeout(function()  {
                                   status.innerHTML  =
                                           foo  +  bar  +  baz;
                           },  1000);
                   });
           });
    });
    

    View Slide

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
    

    View Slide

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);
                   });
           });
    });
    

    View Slide

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);
                   });
           });
    });
    

    View Slide

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);
           });
    });
    

    View Slide

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);
    

    View Slide

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.
    

    View Slide

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;
    });
    

    View Slide

29. Proxies
    meta-programming for fun and profit
    

    View Slide

30. var  p  =  new  Proxy(obj,  {
           get:  function(...)  {  ...  },
           set:  function(...)  {  ...  },
           delete:  function(...)  {  ...  },
           ...
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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  }  }
    ])
    

    View Slide

35. Destructuring
    try it, you’ll like it
    

    View Slide

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

    View Slide

37. function  div({  width,  height,  border  })  {
           ...
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Name objects
    first-class, unique property keys
    

    View Slide

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

    View Slide

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

    View Slide

46. Custom object iteration
    taming the for-in loop
    

    View Slide

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
    

    View Slide

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

    View Slide

49. Comprehensions
    beautiful array processing
    

    View Slide

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

    View Slide

51. String templates
    untangling string formatting code
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. Object-keyed tables
    hash tables and weak maps
    

    View Slide

56. var  scores  =  new  Map();
    var  player1  =  {  ...  };
    scores.set(player1,  0);
    scores.get(player1)  //  0
    

    View Slide

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

    View Slide

58. There is a bigger picture.
    

    View Slide

59. “Be a better language for:
    a. complex apps
    b. libraries
    c. code generators”
    

    View Slide

60. Motivated by use cases.
    Solve with simple, general, composable features.
    Pieces have to fit together in a cohesive whole.
    

    View Slide

61. study the issues
    study the big picture
    study the issues again
    study the big picture again
    study the issues again
    SHIP IT!
    

    View Slide

62. Work in the open
    wiki.ecmascript.org
    es-discuss
    

    View Slide

63. How soon is now?
    

    View Slide

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
    

    View Slide

65. View Slide