JavaScript Like It’s 2013

1,400 views

Published on

Tips for creating current JavaScript

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,400
On SlideShare
0
From Embeds
0
Number of Embeds
220
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript Like It’s 2013

  1. 1. JavaScriptlike it’s2013miguel.ventura@outsystems.comhttp://bit.ly/JavaScript2013www.outsystems.com
  2. 2. Miguel VenturaOutSystems R&D@miguelventuramiguel.ventura@outsystems.com
  3. 3. JavaScript2013jQueryBackbone.jsEmber.jsAngularJSSammy.jsCanJSKnockoutExtJSasm.jsWinRT EmscriptenWebSockets WebGLWebWorkers WebRTC CanvasWeb Audio/Video APIWebSpeechWebCrypto
  4. 4. 2013jQueryasm.jsWinRT EmscriptenWebSockets WebGLWebWorkers WebRTC CanvasWeb Audio/Video APIWebSpeechWebCryptoJavaScriptBackbone.jsEmber.jsAngularJSSammy.jsCanJSKnockoutExtJS
  5. 5. 2013Time to get it right!
  6. 6. 2013: Now!
  7. 7. 1995: JavaScript (Netscape)2013: Now!
  8. 8. JavaScript• Datepickers• Drop-down menus• Collapsible content• Client-side form validation• Cheesy animations
  9. 9. 1995: JavaScript (Netscape)2013: Now!
  10. 10. 1995: JavaScript (Netscape)2013: Now!18 Years
  11. 11. 1995: JavaScript (Netscape)1996: JScript (Microsoft)2013: Now!
  12. 12. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2013: Now!
  13. 13. “The nice thing about standardsis that you have so many tochoose from.”
  14. 14. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2013: Now!
  15. 15. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2006: Browser compatibility (lack thereof)2013: Now!
  16. 16. element.attachEvent( ... )element.addEventListener( ... )
  17. 17. CheckpointMandatory TechnologyNobody UnderstandsInconsistent Implementations
  18. 18. JavaScript development cycle• Copy• Paste• Kick it until itworks
  19. 19. JavaScript development cycle
  20. 20. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2006: Browser compatibility???2013: Now!
  21. 21. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2006: Browser compatibility???2013: Now!
  22. 22. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2006: jQuery2013: Now!
  23. 23. JavaScript development cycle• Download jQueryplugin• Copy• Paste• Kick it until it works
  24. 24. JavaScript development cycle
  25. 25. The problem with cycles
  26. 26. 1995: JavaScript (Netscape)1996: JScript (Microsoft)1997: ECMA-262 Ed11999: ECMA-262 Ed3 (ES3 - Baseline)2006: jQuery2013: Now!
  27. 27. Breaking the Cycle
  28. 28. Breaking the Cycle1. Know your language
  29. 29. #1 – Know your language
  30. 30. False FriendsEnglish Portuguesepretend fingirto intend pretender
  31. 31. False Friendsvar d = new Date("2013-05-08")d.getYear()d.getMonth()d.getDay()// 113// 4// 31900+Y[0-11]day of week
  32. 32. False Friendsvar d = new Date("2013-05-08")d.getYear()d.getMonth()d.getDay()// 113// 4// 3
  33. 33. False Friendsvar d = new Date("2013-05-08")d.getFullYear()d.getMonth()d.getDay()// 2013// 4// 3
  34. 34. False Friendsvar d = new Date("2013-05-08")d.getFullYear()d.getMonth()+1d.getDay()// 2013// 5// 3
  35. 35. False Friendsvar d = new Date("2013-05-08")d.getFullYear()d.getMonth()+1d.getDate()// 2013// 5// 8
  36. 36. False Friends// the == operator"a" == "a" // true"a" == "b" // false
  37. 37. False Friends// the == operatorfalse == null // falsefalse == 0 // true0 == "" // true...
  38. 38. False Friends// the === operator"a" === "a" // truefalse === 0 // false0 === "" // false// there’s also the !== operator
  39. 39. #1 Know your languageIf you lack absolute certaintyREAD THE DOCS!https://developer.mozilla.org/en/docs/JavaScript
  40. 40. Breaking the Cycle1. Know your language2. Know your tools
  41. 41. #2 Know your toolsImage credit: http://www.flickr.com/photos/justinbaeder/5317820857/
  42. 42. #2 Know your tools• Don’t trust errors• Console-test everything• Change as you go!• See documentation for Firebug and DevTools
  43. 43. #2 Know your tools
  44. 44. Breaking the Cycle1. Know your language2. Know your tools3. Build for the future
  45. 45. Image credit: National Library of France (BnF)
  46. 46. Image source: http://www.flickr.com/photos/mikecogh/5969936605/
  47. 47. #3 Build for the futureif ( BrowserIsIE() ) {e.attachEvent( ... );} else {e.addEventListener( ... );}
  48. 48. #3 Build for the futureif ( BrowserIsIE() ) {e.attachEvent( ... );} else {e.addEventListener( ... );}
  49. 49. #3 Build for the futureif ( BrowserIsIE() ) {e.attachEvent( ... );} else {e.addEventListener( ... );}
  50. 50. #3 Build for the futureif ( e.addEventListener ) {e.addEventListener( ... );} else {e.attachEvent( ... );}
  51. 51. #3 Build for the futureif ( ? ) {e.style.boxShadow ="0 0 4px red";} else {e.style.border = "solid 1px red";}
  52. 52. #3 Build for the futureif ( Modernizr.boxshadow ) {e.style.boxShadow ="0 0 4px red";} else {e.style.border = "solid 1px red";}
  53. 53. #3 Build for the futureFeature Detection instead ofBrowser Detectionhttp://modernizr.com/
  54. 54. Breaking the Cycle1. Know your language2. Know your tools3. Build for the future
  55. 55. http://www.flickr.com/photos/wwarby/4782847556/
  56. 56. Thank You!http://bit.ly/JavaScript2013www.outsystems.com

×