So bright it burns

My YUIConf 2011 keynote

Transcript

1. THE FUTURE OF JAVASCRIPT SO BRIGHT IT BURNS
2. Hi, I’m dherman @littlecalculist
3. I — JavaScript and I love the language it almost is...
6. tl;dr
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
8. Great languages deserve great libraries and that means modules
10. browser <script></script>
11. var  Collections  =  (function()  {        function  Dict()  {  ...  }        return  {                Dict:  Dict        }; })();
12. “The human compiler, at work.” — Paul Graham “The sincerest form of feature request.” — someone?
13. module  Collections  {        export  function  Dict()  {  ...  } }
14. import  {  $  }  from  "jquery.js"; import  {  map,  each  }  from  "underscore.js";
15. import  {  $  }  from  "jquery.js"; import  {  map,  each  }  from  "underscore.js"; loaded once, before execution
16. let is the new var block scoping (at long, long last)
17. for  (i  =  0;  i  <  a.length;  i++)  {        var  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
18. for  (i  =  0;  i  <  a.length;  i++)  {        let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
19. Generator functions an alternative to callback spaghetti
20. function*  counter()  {        yield  1;        yield  2;        yield  3; } var  g  =  counter(); alert(g.next());  //  1 alert(g.next());  //  2 alert(g.next());  //  3
21. XHR("foo.txt",  function(foo)  {        XHR("bar.txt",  function(bar)  {                XHR("baz.txt",  function(baz)  {                        setTimeout(function()  {                                status.innerHTML  =                                        foo  +  bar  +  baz;                        },  1000);                });        }); });
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
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);                });        }); });
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);                });        }); });
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);        }); });
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);
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.
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; });
29. Proxies meta-programming for fun and profit
30. var  p  =  new  Proxy(obj,  {        get:  function(...)  {  ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... });
31. Bits, bytes and blobs binary file and network I/O
32. var  Point2D  =  new  StructType({        x:  uint32,        y:  uint32 }); var  Color  =  new  StructType({        r:  uint8,  g:  uint8,  b:  uint8 });
33. var  Pixel  =  new  StructType({        point:  Point2D,        color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
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  }  } ])
35. Destructuring try it, you’ll like it
36. var  {  r,  g,  b  }  =  thing.color; var  [x,  y]  =  circle.center; [a,  b]  =  [b,  a];
37. function  div({  width,  height,  border  })  {        ... }
38. Rest-args and defaults death to the arguments object!
39. function  f(i,  j,  ...rest)  {        return  rest.slice(i,  j); }
40. array.push(thing1,  thing2,  ...moarThings); var  shape  =  new  Shape(...points);
41. function  img(src,  width=320,  height=240)  {        ... }
42. function  img({  src,                              width=320,                              height=240  })  {        ... }
43. Name objects first-class, unique property keys
44. function  Container()  {        var  secret  =  3;        this.service  =  function()  {                if  (secret-­‐-­‐)  {                        ...                }        }; }
45. var  key  =  Name.create("secret"); function  Container()  {  this[key]  =  3  } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
46. Custom object iteration taming the for-in loop
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
48. import  iterate  from  "@iter"; obj[iterate]  =  function()  {        return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
49. Comprehensions beautiful array processing
50. [  x  *  y  for  (x  of  obj1)  for  (y  of  obj2)  ] (  x  *  y  for  (x  of  obj1)  for  (y  of  obj2)  )
51. String templates untangling string formatting code
52. "<p>\nohai,  "  + firstName  +  "  "  +  lastName  + "\n</p>"
53. `<p> ohai,  ${firstName}  ${lastName} </p>`
54. safeHTML`<p> ohai,  ${firstName}  ${lastName} </p>`
55. Object-keyed tables hash tables and weak maps
56. var  scores  =  new  Map(); var  player1  =  {  ...  }; scores.set(player1,  0); scores.get(player1)  //  0
57. var  markers  =  new  WeakMap(); var  tile  =  new  Tile(...); var  results  =  [...]; tiles.set(tile,  results);
58. There is a bigger picture.
59. “Be a better language for: a. complex apps b. libraries c. code generators”
60. Motivated by use cases. Solve with simple, general, composable features. Pieces have to fit together in a cohesive whole.
61. study the issues study the big picture study the issues again study the big picture again study the issues again SHIP IT!
62. Work in the open wiki.ecmascript.org es-discuss
63. How soon is now?
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