Upload
federico-galassi
View
2.050
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Updated version of talk "Javascript the New Parts". I gave this at JsDay on May 12th 2011. I updated with latest stats and improved es5 coverage, most notably strict mode. 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.jsday.it/ Follow me on Twitter! https://twitter.com/federicogalassi
Citation preview
• 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
http://joind.in/3374twitter.com/federicogalassislideshare.net/fgalassi