javascript the new parts v2

Javascriptthe

New Partsv2

[email protected]/fgalassi

mailto:[email protected]




• 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/

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


They couldn’t agree

ES 3.1smallfixes

ES 4heavystuff

split

ES 3.1Ecmascript5th edition

the winner

the loser

ES 4Harmony

ES5just fixes

javascript

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

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: {


}})

More than one

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

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

},age: {


}})

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




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 !???




Securing javascript“use strict”;

function miracle() { return this }miracle()

// undefined !!!!!



State of theOnion

Onion becauseyou can start crying


7 8 9





no IE6I don’t

shoot the red cross


3 3.5 4






3.2 4 5 webkit






5 6 7 - 11






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

[email protected]

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



http://joind.in/3374

http://joind.in/3374



javascript the new parts v2

Technology

true hello world

strict function miracle

strict mode

strict code

writable security

function scope function

function dumbp

getownpropertydescriptor