Upcoming SlideShare
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
- • Short history of javascript • State of the onion • The new parts
- 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
- • Short history of javascript • State of the onion • The new parts
- 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?
www.npco.net
Thanks for a great, clear presentation.