JavaScript Like It’s 2013
4 likes1,602 views
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.
![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](https://image.slidesharecdn.com/javascriptlikeits2013-130509135429-phpapp02/85/JavaScript-Like-It-s-2013-37-320.jpg)
JavaScript Like It’s 2013
- 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!
- 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!
- 20. Checkpoint Mandatory Technology Nobody Understands Inconsistent Implementations
- 21. JavaScript development cycle • Copy • Paste • Kick it until it works
- 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
- 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!
- 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)
- 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