Javascript the New Parts
65
-
Upload
federico-galassi -
Category
Technology
-
view
16.161 -
download
1
description
Talk i gave at WebTech Conference on November 10th 2010. Abstract: At last, ecmascript 5th edition is landing in all modern browsers. What are the new parts of the language and how can they help us to write better code? Also http://federico.galassi.net/ http://www.webtechcon.it Follow me on Twitter! https://twitter.com/federicogalassi
Transcript of Javascript the New Parts
• 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
nativesArray.isArray([1,2,3])> true
“ hello world ”.trim()> “hello world”
Date.now()> 1289395540416
// 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
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
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
