javascript the new parts v2

Javascriptthe

New Partsv2

federico.galassi@cleancode.itslideshare.net/fgalassi

• Short history of javascript

• State of the onion• The new parts

Javascriptpublic in

1996

No time to fix

Standard 1999Ecmascript3rd edition

“Worst name ever”

TC39Committee

Years later...“It turns out that standard bodies are

not good places to innovate. That’s what laboratories and startups are

for. Standards must be drafted by consensus.”

http://yuiblog.com/blog/2008/08/14/premature-standardization/

They couldn’t agree

ES 3.1smallfixes

ES 4heavystuff

split

ES 3.1Ecmascript5th edition

the winner

the loser

ES 4Harmony

ES5just fixes

javascript

• Short history of javascript

• State of the onion• The new parts

Betterobject oriented programming

Javascriptis prototypal

surname: “simpsons”

simpsons

name: “bart”

bartprototype

bart.surname>  “simpsons”

Wannabe classicalfunction  Simpsons(name)  {

this.name  =  name}

Simpsons.prototype.surname  =  “simpsons”

bart  =  new  Simpsons(“bart”)

constructor

class

object

Ugly

Create objects simpsons  =  {  surname:  “simpsons”  }

bart  =  Object.create(simpsons)bart.name  =  “bart”bart.age  =  10

hugo  =  Object.create(bart)hugo.name  =  “hugo”hugo.nature  =  “evil”

object

object

object

Simpleand

Powerful

Back to the fatherhomer  =  Object.create(

Object.getPrototypeOf(bart))homer.name  =  “homer”homer.age  =  38

Getters and settershomer  =  {

beers:  3,get  drunk()  {

return  this.beers  >  5}

}homer.drunk>  falsehomer.beers  =  7homer.drunk>  true

Uniform access

bart.age>  10

Propertieswere values

Object.getOwnPropertyDescriptor(bart,  “age”

)>  {

value:  10,enumerable:  true,writable:  true,configurable:  true

}

Propertiesnow configurable

Object.defineProperty(bart,  “age”,  {value:  10,enumerable:  true,writable:  true,configurable:  true

})

Propertiescan be defined

Object.defineProperties(bart,  {name:  {

value:  “bart”,enumerable:  true,writable:  true,configurable:  true

},age:  {

value:  10,enumerable:  true,writable:  true,configurable:  true

}})

More than one

bart  =  Object.create(simpsons,  {name:  {

value:  “bart”,enumerable:  true,writable:  true,configurable:  true

},age:  {

value:  10,enumerable:  true,writable:  true,configurable:  true

}})

At creation time

Better security

writableCan i assign to it ?

Object.defineProperty(bart,  “age”,  {value:  10,writable:  false

})bart.age  =  5>  5bart.age>  10

configurableCan i delete it ?

Object.defineProperty(bart,  “age”,  {value:  10,configurable:  false

})delete  bart.age>  falsebart.age>  10

configurableCan i configure it ?

Object.defineProperty(bart,  “age”,  {value:  10,configurable:  false

})Object.defineProperty(bart,  “age”,  {

configurable:  true})>  TypeError:  Cannot  redefine  property

enumerable+

writablesecurity

Even moresecurity

//  Can’t  add  propertiesObject.preventExtensions(obj)//  !isExtensible  +  all  configurable  =  falseObject.seal(obj)//  isSealed  +  all  writable  =  falseObject.freeze(obj)

Object.isExtensible(obj)Object.isSealed(obj)Object.isFrozen(obj)

The road to safe mashups

Better extensibility

enumerableDoes for/in show it up ?Object.defineProperty(bart,  “phobia”,  {

value:  “coffins”,enumerable:  false

})

//  Like  for/in  and  collect  keysObject.keys(bart)>  [“name”,  “surname”,  “age”]

No more pollution

Hide behavior

Object.defineProperty(bart,  “play”,  {value:  function()  {  ..play..  },enumerable:  false

})

natives finallyextensible !

Object.defineProperty(Array.prototype,  “last”,  {

value:  function()  {return  this[this.length  -­‐  1]

},enumerable:  false

})

[4,3,5,1].last()>  1

more nativewith getter

Object.defineProperty(Array.prototype,  “last”,  {

get:  function()  {return  this[this.length  -­‐  1]

},enumerable:  false

})

[4,3,5,1].last>  1

works with DOM

Object.defineProperty(HTMLElement.prototype,  “classes”,  {

get:  function()  {return  this.getAttribute(“class”)                      .split(/\s+/)

},enumerable:  false

})

$(“<div  class=‘one  two’  />”).get(0).classes>  [“one”,  “two”]

The worldis yours

Betterperformance

//  Native  json

JSON.parse(string)JSON.stringify(object)

Betterfunctional

programming[1,  2,  3].map(double)>  [2,  4,  6][2,  4,  6].every(isEven)>  true[1,  2,  3].filter(isEven)>  [2]

//  forEach,  some,  reduce,  reduceRight//  indexOf,  lastIndexOf

Function.bind()var  bart  =  {

name:  “bart”}var  hello  =  function(greet)  {

return  greet  +  “i  am  “  +  this.name}

//  bind  to  this  and  partial  application(hello.bind(bart,  “hey”))()>  “hey,  i  am  bart”

More operations on natives

Array.isArray([1,2,3])>  true

“        hello  world          ”.trim()>  “hello  world”

Date.now()>  1289395540416

(new  Date).toISOString()>  2010-­‐02-­‐20T05:52:53.649Z

//  reserved  keyword  as  propertiesbart.class  =  “cartoon”//  abstract,  boolean,  byte,  char,  const  ...

//  OK  trailing  comma[1,  2,  3,  ]  

//  OK  trailing  comma{

name:  “bart”,}

//  8  instead  of  0  !!!parseInt(“08”)

No moreannoyances

Strict mode

http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/

Invoking //  Globally“use  strict”;...  strict  code  ...

//  in  function  scopefunction  test()  {    “use  strict”;    ...  strict  code  ...}

http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/

Mistakes throw errors“use  strict”;

typo  =  5  //  no  var,  ERROR

NaN  =  10  //  invalid  assign

delete  Object.prototype  //  invalid  delete

var  o  =  {  p:  1,  p:  2  }  //  double  property  !?

function  dumb(p,  p)      //  double  parameter  !???

http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/

Securing javascript“use  strict”;

function  miracle()  {  return  this  }miracle()

//  undefined  !!!!!

JOY

• Short history of javascript

• State of the onion• The new parts

State of theOnion

Onion becauseyou can start crying

http://kangax.github.com/es5-compat-table/

7 8 9

no IE6I don’t

shoot the red cross

http://kangax.github.com/es5-compat-table/

3 3.5 4

http://kangax.github.com/es5-compat-table/

3.2 4 5 webkit

http://kangax.github.com/es5-compat-table/

5 6 7 - 11

http://kangax.github.com/es5-compat-table/

10.1 10.5, 10.6, 10.7, 11, 11.10

My pick is

chrome

firefox 4

Modern Browsers

OK

Old Browsers

ARGH

The real problem

“IE6 is fading very slowly. Five years ago I predicted that IE6 would fade

away in five years.”

even worse

Go figure

we need a Miracle

federico.galassi@cleancode.it

http://joind.in/3374twitter.com/federicogalassislideshare.net/fgalassi