JavaScript Like It’s 2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript Like It’s 2013

  • 1,037 views
Uploaded on

Tips for creating current JavaScript

Tips for creating current JavaScript

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,037
On Slideshare
827
From Embeds
210
Number of Embeds
3

Actions

Shares
Downloads
15
Comments
0
Likes
3

Embeds 210

http://www.outsystems.com 187
http://extranettst.outsystems.net 21
http://federated.outsystems.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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