Javascript the New Parts

Javascript the New Parts federico.galassi@cleancode.it slideshare.net/fgalassi

• Short history of javascript • State of the onion • The new parts

Javascript public in 1996

No time to fix

Standard 1999 Ecmascript 3rd edition “Worst name ever”

TC39 Committee

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.1 small fixes ES 4 heavy stuff split

ES 3.1 Ecmascript 5th edition the winner

the loser ES 4 Harmony

ES5 just fixes javascript

Better object oriented programming

Javascript is prototypal surname: “simpsons” simpsons name: “bart” bart prototype bart.surname > “simpsons”

Wannabe classical function 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

Simple and Powerful

Back to the father homer = Object.create( Object.getPrototypeOf(bart) ) homer.name = “homer” homer.age = 38

Getters and setters homer = { beers: 3, get drunk() { return this.beers > 5 } } homer.drunk > false homer.beers = 7 homer.drunk > true

Uniform access

bart.age > 10 Properties were values

Object.getOwnPropertyDescriptor( bart, “age” ) > { value: 10, enumerable: true, writable: true, configurable: true } Properties now configurable

Object.defineProperty(bart, “age”, { value: 10, enumerable: true, writable: true, configurable: true }) Properties can 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

writable Can i assign to it ? Object.defineProperty(bart, “age”, { value: 10, writable: false }) bart.age = 5 > 5 bart.age > 10

configurable Can i delete it ? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) delete bart.age > false bart.age > 10

configurable Can i configure it ? Object.defineProperty(bart, “age”, { value: 10, configurable: false }) Object.defineProperty(bart, “age”, { configurable: true }) > TypeError: Cannot redefine property

enumerable + writable security

Even more security // Can’t add properties Object.preventExtensions(obj) // !isExtensible + all configurable = false Object.seal(obj) // isSealed + all writable = false Object.freeze(obj) Object.isExtensible(obj) Object.isSealed(obj) Object.isFrozen(obj)

The road to safe mashups

Better extensibility

enumerable Does for/in show it up ? Object.defineProperty(bart, “phobia”, { value: “coffins”, enumerable: false }) // Like for/in and collect keys Object.keys(bart) > [“name”, “surname”, “age”]

No more pollution

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

natives finally extensible ! Object.defineProperty(Array.prototype, “last”, { value: function() { return this[this.length -‐ 1] }, enumerable: false }) [4,3,5,1].last() > 1

more native with 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 world is yours

Better performance // Native json JSON.parse(string) JSON.stringify(object)

Better functional 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

// reserved keyword as properties bart.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 more annoyances

JOY

State of the Onion

Onion because you can start crying

http://kangax.github.com/es5-compat-table/ 7 8 9

no IE6 I 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

http://kangax.github.com/es5-compat-table/ 10.1 10.6 10.7

My pick is chrome chrome 7

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

Javascript the New Parts

Federico Galassi

Javascript the New Parts