The future of JavaScript

Transcript

1. 1.

   I HAVE SEEN THE FUTURE OF JAVASCRIPT AND IT’S AMAZING

2. 2.

   Hi, I’m dherman @littlecalculist

3. 3.

   I — JavaScript and I love the language it almost

   is...
4. 4.

   None
5. 5.

   None
6. 6.

   POWER

7. 7.

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

8. 8.

   var  Point2D  =  new  StructType({        x:  uint32,

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

   var  Pixel  =  new  StructType({        point:  Point2D,

          color:  Color }); var  Triangle  =  new  ArrayType(Pixel,  3);
10. 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. 11.

    Keep off my property private names

12. 12.

    function  Container()  {        var  secret  =  3;

           this.service  =  function()  {                if  (secret-­‐-­‐)  {                        ...                }        }; }
13. 13.

    var  key  =  Name.create("secret"); function  Container()  {  this[key]  =  3

     } Container.prototype  =  {        service:  function()  {                if  (this[key]-­‐-­‐)  {                        ...                }        } };
14. 14.

    var  markers  =  new  WeakMap(); var  tile  =  new  Tile(...);

    var  results  =  [...]; tiles.set(tile,  results);
15. 15.

    var  obj  =  Proxy.create({        get:  function(...)  {

     ...  },        set:  function(...)  {  ...  },        delete:  function(...)  {  ...  },        ... },  proto);
16. 16.

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

17. 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. 18.

    pan.pourWater(function()  {        range.bringToBoil(function()  {      

             range.lowerHeat(function()  {                        pan.addRice(function()  {                                setTimeout(function()  {                                        range.turnOff();                                        serve();                                },  15  *  60  *  1000);                        });                });        }); });
19. 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. 20.

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

21. 21.

    function*  g()  {        yield  1;    

       yield  2; } var  obj  =  g(); obj.next();  //  1 obj.next();  //  2
22. 22.

    var  task  =  new  Task(function*()  {        var

     text  =  yield  XHR("file.txt");        yield  timeout(1000);        status.innerHTML  =  text; }); task.start();
23. 23.

    Great languages deserve great libraries and that means modules

24. 24.

    None
25. 25.

    browser <script></script>

26. 26.

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

     {  ...  }        return  {                Dictionary:  Dictionary        }; })();
27. 27.

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

28. 28.

    module  Collections  {        export  function  Dictionary()  {

     ...  } }
29. 29.

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

     }  from  "underscore.js";
30. 30.

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

     }  from  "underscore.js"; loaded once, before execution
31. 31.

    Expressiveness artwork credit: sam flores

32. 32.

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

     wtfjs? arguments isn’t an Array #$@?! var hoisting
33. 33.

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

     j); }
34. 34.

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

35. 35.

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

36. 36.

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

         let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; }
37. 37.

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

         let  x  =  a[i];        x.onclick  =  function()  {  x.toggle()  }; } block scoped
38. 38.

    var  {  r,  g,  b  }  =  thing.color; var  [x,

     y]  =  circle.center; [a,  b]  =  [b,  a];
39. 39.

    var  obj  =  {        foo:  "foo",  

         bar()  {  return  this.foo  },        [getName()]:  17 };
40. 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. 41.

    import  iterate  from  "@iter"; obj[iterate]  =  function()  {    

       return  {                next:  function()  {  ...  }        } } for  (x  of  obj)  {  ...  }
42. 42.

    [  x  *  y  for  (x  of  obj1)  for  (y

     of  obj2)  ]
43. 43.

    "<p>\nohai,  "  + firstName  +  "  "  +  lastName  +

    "\n</p>"
44. 44.

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

45. 45.

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

46. 46.

    How soon is now?

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

    None