JavaScript Like It’s 2013
-
Upload
outsystems -
Category
Technology
-
view
909 -
download
2
description
Transcript of JavaScript Like It’s 2013
![Page 3: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/3.jpg)
JavaScript
2013 jQuery
Backbone.js
Ember.js
AngularJS
Sammy.js
CanJS
Knockout
ExtJS asm.js WinRT Emscripten
WebSockets WebGL
WebWorkers WebRTC Canvas Web Audio/Video API
WebSpeech WebCrypto
![Page 4: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/4.jpg)
![Page 5: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/5.jpg)
2013 jQuery
asm.js WinRT Emscripten
WebSockets WebGL
WebWorkers WebRTC Canvas Web Audio/Video API
WebSpeech WebCrypto
JavaScript
Backbone.js
Ember.js
AngularJS
Sammy.js
CanJS
Knockout
ExtJS
![Page 6: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/6.jpg)
2013
Time to get it right!
![Page 7: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/7.jpg)
2013: Now!
![Page 8: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/8.jpg)
![Page 9: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/9.jpg)
1995: JavaScript (Netscape)
2013: Now!
![Page 10: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/10.jpg)
JavaScript
• Datepickers
• Drop-down menus
• Collapsible content
• Client-side form validation
• Cheesy animations
![Page 11: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/11.jpg)
![Page 12: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/12.jpg)
1995: JavaScript (Netscape)
2013: Now!
![Page 13: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/13.jpg)
1995: JavaScript (Netscape)
2013: Now!
18 Years
![Page 14: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/14.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
2013: Now!
![Page 15: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/15.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!
![Page 16: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/16.jpg)
“The nice thing about standards is that you have so many to choose from.”
![Page 17: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/17.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!
![Page 18: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/18.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility (lack thereof)
2013: Now!
![Page 19: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/19.jpg)
element.attachEvent( ... )
element.addEventListener( ... )
![Page 20: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/20.jpg)
Checkpoint
Mandatory Technology
Nobody Understands
Inconsistent Implementations
![Page 21: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/21.jpg)
JavaScript development cycle
• Copy
• Paste
• Kick it until it works
![Page 22: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/22.jpg)
![Page 23: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/23.jpg)
JavaScript development cycle
![Page 24: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/24.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!
![Page 25: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/25.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!
![Page 26: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/26.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!
![Page 27: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/27.jpg)
JavaScript development cycle
• Download jQuery plugin
• Copy
• Paste
• Kick it until it works
![Page 28: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/28.jpg)
JavaScript development cycle
![Page 29: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/29.jpg)
The problem with cycles
![Page 30: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/30.jpg)
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!
![Page 31: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/31.jpg)
Breaking the Cycle
![Page 32: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/32.jpg)
![Page 33: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/33.jpg)
Breaking the Cycle
1. Know your language
![Page 34: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/34.jpg)
![Page 35: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/35.jpg)
#1 – Know your language
![Page 36: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/36.jpg)
False Friends
English Portuguese
pretend fingir
to intend pretender
![Page 37: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/37.jpg)
False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3
1900+Y
[0-11]
day of week
![Page 38: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/38.jpg)
![Page 39: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/39.jpg)
False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3
![Page 40: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/40.jpg)
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()
d.getDay()
// 2013
// 4
// 3
![Page 41: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/41.jpg)
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDay()
// 2013
// 5
// 3
![Page 42: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/42.jpg)
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDate()
// 2013
// 5
// 8
![Page 43: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/43.jpg)
![Page 44: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/44.jpg)
False Friends
// the == operator
"a" == "a" // true
"a" == "b" // false
![Page 45: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/45.jpg)
False Friends
// the == operator
false == null // false
false == 0 // true
0 == "" // true
...
![Page 46: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/46.jpg)
False Friends
// the === operator
"a" === "a" // true
false === 0 // false
0 === "" // false
// there’s also the !== operator
![Page 47: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/47.jpg)
#1 Know your language
If you lack absolute certainty
READ THE DOCS!
https://developer.mozilla.org/en/docs/JavaScript
![Page 48: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/48.jpg)
![Page 49: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/49.jpg)
Breaking the Cycle
1. Know your language
2. Know your tools
![Page 50: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/50.jpg)
#2 Know your tools
Image credit: http://www.flickr.com/photos/justinbaeder/5317820857/
![Page 51: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/51.jpg)
![Page 52: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/52.jpg)
#2 Know your tools
• Don’t trust errors
• Console-test everything
• Change as you go!
• See documentation for Firebug and DevTools
![Page 53: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/53.jpg)
#2 Know your tools
![Page 54: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/54.jpg)
Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future
![Page 55: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/55.jpg)
Image credit: National Library of France (BnF)
![Page 56: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/56.jpg)
Image source: http://www.flickr.com/photos/mikecogh/5969936605/
![Page 57: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/57.jpg)
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
![Page 58: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/58.jpg)
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
![Page 59: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/59.jpg)
![Page 60: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/60.jpg)
![Page 61: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/61.jpg)
![Page 62: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/62.jpg)
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
![Page 63: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/63.jpg)
#3 Build for the future
if ( e.addEventListener ) {
e.addEventListener( ... );
} else {
e.attachEvent( ... );
}
![Page 64: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/64.jpg)
![Page 65: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/65.jpg)
#3 Build for the future
if ( ? ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
![Page 66: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/66.jpg)
#3 Build for the future
if ( Modernizr.boxshadow ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
![Page 67: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/67.jpg)
#3 Build for the future
Feature Detection instead of Browser Detection
http://modernizr.com/
![Page 68: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/68.jpg)
Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future
![Page 69: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/69.jpg)
http://www.flickr.com/photos/wwarby/4782847556/
![Page 70: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/70.jpg)
![Page 71: JavaScript Like It’s 2013](https://reader033.fdocuments.net/reader033/viewer/2022052823/5551da55b4c905c2388b540e/html5/thumbnails/71.jpg)
Thank You!
http://bit.ly/JavaScript2013
www.outsystems.com