Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Hi, I’m dherman @littlecalculist

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

POWER

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Keep off my property private names

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Great languages deserve great libraries and that means modules

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

browser

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Expressiveness artwork credit: sam flores

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

"

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

"

Slide 44

Slide 44 text

`

ohai,  ${firstName}  ${lastName}

`

Slide 45

Slide 45 text

safeHTML`

ohai,  ${firstName}  ${lastName}

`

Slide 46

Slide 46 text

How soon is now?

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content