javascript like it’s 2013
DESCRIPTION
Tips for creating current JavaScriptTRANSCRIPT
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
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
2013
Time to get it right!
2013: Now!
1995: JavaScript (Netscape)
2013: Now!
JavaScript
• Datepickers
• Drop-down menus
• Collapsible content
• Client-side form validation
• Cheesy animations
1995: JavaScript (Netscape)
2013: Now!
1995: JavaScript (Netscape)
2013: Now!
18 Years
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
2013: Now!
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!
“The nice thing about standards is that you have so many to choose from.”
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility (lack thereof)
2013: Now!
element.attachEvent( ... )
element.addEventListener( ... )
Checkpoint
Mandatory Technology
Nobody Understands
Inconsistent Implementations
JavaScript development cycle
• Copy
• Paste
• Kick it until it works
JavaScript development cycle
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!
JavaScript development cycle
• Download jQuery plugin
• Copy
• Paste
• Kick it until it works
JavaScript development cycle
The problem with cycles
1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!
Breaking the Cycle
Breaking the Cycle
1. Know your language
#1 – Know your language
False Friends
English Portuguese
pretend fingir
to intend pretender
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
False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()
d.getDay()
// 2013
// 4
// 3
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDay()
// 2013
// 5
// 3
False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDate()
// 2013
// 5
// 8
False Friends
// the == operator
"a" == "a" // true
"a" == "b" // false
False Friends
// the == operator
false == null // false
false == 0 // true
0 == "" // true
...
False Friends
// the === operator
"a" === "a" // true
false === 0 // false
0 === "" // false
// there’s also the !== operator
#1 Know your language
If you lack absolute certainty
READ THE DOCS!
https://developer.mozilla.org/en/docs/JavaScript
Breaking the Cycle
1. Know your language
2. Know your tools
#2 Know your tools
Image credit: http://www.flickr.com/photos/justinbaeder/5317820857/
#2 Know your tools
• Don’t trust errors
• Console-test everything
• Change as you go!
• See documentation for Firebug and DevTools
#2 Know your tools
Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future
Image credit: National Library of France (BnF)
Image source: http://www.flickr.com/photos/mikecogh/5969936605/
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
#3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
#3 Build for the future
if ( e.addEventListener ) {
e.addEventListener( ... );
} else {
e.attachEvent( ... );
}
#3 Build for the future
if ( ? ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
#3 Build for the future
if ( Modernizr.boxshadow ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
#3 Build for the future
Feature Detection instead of Browser Detection
http://modernizr.com/
Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future
http://www.flickr.com/photos/wwarby/4782847556/
Thank You!
http://bit.ly/JavaScript2013
www.outsystems.com