This document discusses strategies for improving JavaScript development in 2013 and beyond. It recommends: 1) Knowing your language thoroughly by reading documentation 2) Learning to use developer tools like Firebug and DevTools effectively 3) Building applications with future-proofing in mind through techniques like feature detection instead of browser detection.

1. JavaScript
like it’s
2013miguel.ventura@outsystems.com
http://bit.ly/JavaScript2013
www.outsystems.com

2. Miguel Ventura
OutSystems R&D
@miguelventura
miguel.ventura@outsystems.com

3. JavaScript
2013jQuery
Backbone.js
Ember.js
AngularJS
Sammy.js
CanJS
Knockout
ExtJSasm.jsWinRT Emscripten
WebSockets WebGL
WebWorkers WebRTC CanvasWeb Audio/Video API
WebSpeech
WebCrypto

5. 2013jQuery
asm.jsWinRT Emscripten
WebSockets WebGL
WebWorkers WebRTC CanvasWeb Audio/Video API
WebSpeech
WebCrypto
JavaScript
Backbone.js
Ember.js
AngularJS
Sammy.js
CanJS
Knockout
ExtJS

6. 2013
Time to get it right!

7. 2013: Now!

9. 1995: JavaScript (Netscape)
2013: Now!

10. JavaScript
• Datepickers
• Drop-down menus
• Collapsible content
• Client-side form validation
• Cheesy animations

12. 1995: JavaScript (Netscape)
2013: Now!

13. 1995: JavaScript (Netscape)
2013: Now!
18 Years

14. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
2013: Now!

15. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!

16. “The nice thing about standards
is that you have so many to
choose from.”

17. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2013: Now!

18. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility (lack thereof)
2013: Now!

19. element.attachEvent( ... )
element.addEventListener( ... )

20. Checkpoint
Mandatory Technology
Nobody Understands
Inconsistent Implementations

21. JavaScript development cycle
• Copy
• Paste
• Kick it until it
works

23. JavaScript development cycle

24. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!

25. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility???
2013: Now!

26. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!

27. JavaScript development cycle
• Download jQuery
plugin
• Copy
• Paste
• Kick it until it works

28. JavaScript development cycle

29. The problem with cycles

30. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: jQuery
2013: Now!

31. Breaking the Cycle

33. Breaking the Cycle
1. Know your language

35. #1 – Know your language

36. False Friends
English Portuguese
pretend fingir
to intend pretender

37. 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

39. False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3

40. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()
d.getDay()
// 2013
// 4
// 3

41. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDay()
// 2013
// 5
// 3

42. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDate()
// 2013
// 5
// 8

44. False Friends
// the == operator
"a" == "a" // true
"a" == "b" // false

45. False Friends
// the == operator
false == null // false
false == 0 // true
0 == "" // true
...

46. False Friends
// the === operator
"a" === "a" // true
false === 0 // false
0 === "" // false
// there’s also the !== operator

47. #1 Know your language
If you lack absolute certainty
READ THE DOCS!
https://developer.mozilla.org/en/docs/JavaScript

49. Breaking the Cycle
1. Know your language
2. Know your tools

50. #2 Know your tools
Image credit: http://www.flickr.com/photos/justinbaeder/5317820857/

52. #2 Know your tools
• Don’t trust errors
• Console-test everything
• Change as you go!
• See documentation for Firebug and DevTools

53. #2 Know your tools

54. Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future

55. Image credit: National Library of France (BnF)

56. Image source: http://www.flickr.com/photos/mikecogh/5969936605/

57. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}

58. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}

62. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}

63. #3 Build for the future
if ( e.addEventListener ) {
e.addEventListener( ... );
} else {
e.attachEvent( ... );
}

65. #3 Build for the future
if ( ? ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}

66. #3 Build for the future
if ( Modernizr.boxshadow ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}

67. #3 Build for the future
Feature Detection instead of
Browser Detection
http://modernizr.com/

68. Breaking the Cycle
1. Know your language
2. Know your tools
3. Build for the future

69. http://www.flickr.com/photos/wwarby/4782847556/

71. Thank You!
http://bit.ly/JavaScript2013
www.outsystems.com