Javascript the New Parts v2
-
Upload
federico-galassi -
Category
Technology
-
view
2.050 -
download
1
description
Transcript of Javascript the New Parts v2
![Page 2: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/2.jpg)
• Short history of javascript
• State of the onion• The new parts
![Page 3: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/3.jpg)
Javascriptpublic in
1996
![Page 4: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/4.jpg)
No time to fix
![Page 5: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/5.jpg)
Standard 1999Ecmascript3rd edition
“Worst name ever”
![Page 6: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/6.jpg)
TC39Committee
![Page 7: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/7.jpg)
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/
![Page 8: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/8.jpg)
They couldn’t agree
![Page 9: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/9.jpg)
ES 3.1smallfixes
ES 4heavystuff
split
![Page 10: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/10.jpg)
ES 3.1Ecmascript5th edition
the winner
![Page 11: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/11.jpg)
the loser
ES 4Harmony
![Page 12: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/12.jpg)
ES5just fixes
javascript
![Page 13: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/13.jpg)
• Short history of javascript
• State of the onion• The new parts
![Page 14: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/14.jpg)
Betterobject oriented programming
![Page 15: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/15.jpg)
Javascriptis prototypal
surname: “simpsons”
simpsons
name: “bart”
bartprototype
bart.surname> “simpsons”
![Page 16: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/16.jpg)
Wannabe classicalfunction Simpsons(name) {
this.name = name}
Simpsons.prototype.surname = “simpsons”
bart = new Simpsons(“bart”)
constructor
class
object
![Page 17: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/17.jpg)
Ugly
![Page 18: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/18.jpg)
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
![Page 19: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/19.jpg)
Simpleand
Powerful
![Page 20: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/20.jpg)
Back to the fatherhomer = Object.create(
Object.getPrototypeOf(bart))homer.name = “homer”homer.age = 38
![Page 21: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/21.jpg)
Getters and settershomer = {
beers: 3,get drunk() {
return this.beers > 5}
}homer.drunk> falsehomer.beers = 7homer.drunk> true
![Page 22: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/22.jpg)
Uniform access
![Page 23: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/23.jpg)
bart.age> 10
Propertieswere values
![Page 24: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/24.jpg)
Object.getOwnPropertyDescriptor(bart, “age”
)> {
value: 10,enumerable: true,writable: true,configurable: true
}
Propertiesnow configurable
![Page 25: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/25.jpg)
Object.defineProperty(bart, “age”, {value: 10,enumerable: true,writable: true,configurable: true
})
Propertiescan be defined
![Page 26: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/26.jpg)
Object.defineProperties(bart, {name: {
value: “bart”,enumerable: true,writable: true,configurable: true
},age: {
value: 10,enumerable: true,writable: true,configurable: true
}})
More than one
![Page 27: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/27.jpg)
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
![Page 28: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/28.jpg)
Better security
![Page 29: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/29.jpg)
writableCan i assign to it ?
Object.defineProperty(bart, “age”, {value: 10,writable: false
})bart.age = 5> 5bart.age> 10
![Page 30: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/30.jpg)
configurableCan i delete it ?
Object.defineProperty(bart, “age”, {value: 10,configurable: false
})delete bart.age> falsebart.age> 10
![Page 31: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/31.jpg)
configurableCan i configure it ?
Object.defineProperty(bart, “age”, {value: 10,configurable: false
})Object.defineProperty(bart, “age”, {
configurable: true})> TypeError: Cannot redefine property
![Page 32: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/32.jpg)
enumerable+
writablesecurity
![Page 33: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/33.jpg)
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)
![Page 34: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/34.jpg)
The road to safe mashups
![Page 35: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/35.jpg)
Better extensibility
![Page 36: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/36.jpg)
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”]
![Page 37: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/37.jpg)
No more pollution
![Page 38: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/38.jpg)
Hide behavior
Object.defineProperty(bart, “play”, {value: function() { ..play.. },enumerable: false
})
![Page 39: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/39.jpg)
natives finallyextensible !
Object.defineProperty(Array.prototype, “last”, {
value: function() {return this[this.length -‐ 1]
},enumerable: false
})
[4,3,5,1].last()> 1
![Page 40: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/40.jpg)
more nativewith getter
Object.defineProperty(Array.prototype, “last”, {
get: function() {return this[this.length -‐ 1]
},enumerable: false
})
[4,3,5,1].last> 1
![Page 41: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/41.jpg)
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”]
![Page 42: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/42.jpg)
The worldis yours
![Page 43: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/43.jpg)
Betterperformance
// Native json
JSON.parse(string)JSON.stringify(object)
![Page 44: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/44.jpg)
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
![Page 45: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/45.jpg)
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”
![Page 46: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/46.jpg)
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
![Page 47: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/47.jpg)
// 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
![Page 48: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/48.jpg)
Strict mode
![Page 49: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/49.jpg)
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 ...}
![Page 50: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/50.jpg)
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 !???
![Page 51: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/51.jpg)
http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/
Securing javascript“use strict”;
function miracle() { return this }miracle()
// undefined !!!!!
![Page 52: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/52.jpg)
JOY
![Page 53: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/53.jpg)
• Short history of javascript
• State of the onion• The new parts
![Page 54: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/54.jpg)
State of theOnion
![Page 55: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/55.jpg)
Onion becauseyou can start crying
![Page 56: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/56.jpg)
http://kangax.github.com/es5-compat-table/
7 8 9
![Page 57: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/57.jpg)
no IE6I don’t
shoot the red cross
![Page 58: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/58.jpg)
http://kangax.github.com/es5-compat-table/
3 3.5 4
![Page 59: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/59.jpg)
http://kangax.github.com/es5-compat-table/
3.2 4 5 webkit
![Page 60: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/60.jpg)
http://kangax.github.com/es5-compat-table/
5 6 7 - 11
![Page 61: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/61.jpg)
http://kangax.github.com/es5-compat-table/
10.1 10.5, 10.6, 10.7, 11, 11.10
![Page 62: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/62.jpg)
My pick is
chrome
firefox 4
![Page 63: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/63.jpg)
Modern Browsers
OK
![Page 64: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/64.jpg)
Old Browsers
ARGH
![Page 65: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/65.jpg)
The real problem
“IE6 is fading very slowly. Five years ago I predicted that IE6 would fade
away in five years.”
![Page 66: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/66.jpg)
even worse
![Page 67: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/67.jpg)
Go figure
![Page 68: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/68.jpg)
we need a Miracle
![Page 69: Javascript the New Parts v2](https://reader031.fdocuments.net/reader031/viewer/2022020115/54b79ecc4a795998738b460d/html5/thumbnails/69.jpg)
http://joind.in/3374twitter.com/federicogalassislideshare.net/fgalassi