the future of JavaScript

Threfuture of JavaScript

                                                                                                                                                                                                                  http://www.youtube.com/watch?v=u4IdoBU1uKE

                                                                                                                                                                                                                                                                          Dhrman@littlecalculist

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

Great languages deservegreat libraries

YUI

CommonJS

Friction:摩擦力

Clay:泥土

Simple module

Var collecions=(function(){

     FunctionDict(){....}

     Return{

         Dict:Dict

         };

     };

 })();

 

Module Collections{

Export function(){......}

       }

 

Import{$} from “jquery.js”;

Import{map,each}from “underscore.js”;

 

Let is the new var

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

     Varx=a[i];

    x.onclich=function(){x.toggle()};

 }

Generator functions

Functon* counter(){

   Yield1;

Yield 2;

Yield 3;

}

 Var g=conter();

 Alert(g.next());  //1

 Alert(g.next());  //2

Alert(g.next());  //3

Mucky:脏的

It can be hard to read,it can be hard towork with.it can be hard to change.

 

XHR(“foo.txt”,function(foo){

   XHR(“bar.txt”,function(bar){

      XHR(“baz.txt”,function(baz){

         setTimeout(function(){

            status.innerHTML=

                  foo+bar+baz;

               },1000);

            };

          });

      });

    

How can generator to do this

Spaw(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;

    });

Promise

Proxies

A proxy basically lets you take someexisting boject and create a wrapper object that can monitor anything thathappens to that object.you can intercept get operations,set operations,deleteoperations,just about anything you can ever do with an object.

Var p=new Proxy(obj,{

   Get:function(....){...}

   Set:function(....){...}

    Delete::function(....){...}

  ....

 });

Bits ,bytes and blobs

 

Var Point2D=new StructType({

     X:uint32,

     Y:unit32

 });

  Varcolor=new StructType({

     R:uint8,g:uint:8,b:uint8

 });

HTML file API,WebGL.

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

])

Destructuring

Var {r,g,b}=thing.color;

Var[x,y]=circle.center;

[a,b]=[b,a];

 

You do the same thing with arrays

Function div({width,height,border}){

}defaults

Rest-args and defaults

Function f(i,j,..........rest){

Return rest.slice(i,j);

}

Array.push(thing1,thing2,........marThings);

Var shpe=new shape(....points);

Function img(src,width=320,height=240){

}

 Functionimg({src,

          Width=310,

          Height})

Name objects

Information hiding

Function Container(){

   Varsecret=3;

   This.service=function(){

       If(secret...){

           ....

 }

  };

}

Var key=Name.create(“scret”);

Function Contaioner(){this[key]=3}

Contaion.prototype={

Service:function(){

      If(this[key]....){

           .........

       }

 }

 };

Custom object iteration

   For(x in [3,4,5]);          //0,1,2

For(x of [3,4,5]);         //3,4,5

 

For(x of keys(0));                 //keys in 0

For(x ofvalues(0));

For([k,v] ofitem(0))

 

Import iterate from “...”

Obj[iterate]=funcion(){

   Return{

      Next:function(){.....}

   }

 }

For (x of obj){....}

Comprehensions

You can use comprehension or map,

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

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

 

String templetes

Enbedded in HTML

<p>

Dfad,${firstName}${lastName}

</p>

Splice:联合

Aspect:方面

Potential:潜力

Object-keyedtables

This is hard,

Var scores=newMap();

Var player1={...};

Scores.set(player1,0);

Scores.get(player1)      //0

Subtle:微妙的

Var markers=newWeakMap();

Var tile=newTile(...);

Var results=[...];

Title.set(tile,results);

Grab bag

Be a better language for :

a.      complex apps

b.      libraries

c.      code generators

motiveated by use cases.

Solve withsimple ,general,composable features.

Composable:组成的

Pieces have tofit together in a cohesive whole

Cohesive:紧密结合的

Wike.ecmascript.org