Your SlideShare is downloading. ×
0
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Mysteries Of JavaScript-Fu (@media Europe Edition)

13,206

Published on

The Mysteries Of JavaScript-Fu presentation as presented at @media Europe in London

The Mysteries Of JavaScript-Fu presentation as presented at @media Europe in London

Published in: Technology
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,206
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
589
Comments
3
Likes
23
Embeds 0
No embeds

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. THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)
  • 2. A peasant’s language
  • 3. Web 2.0 has forced ‘real’ programmers to master it
  • 4. JavaScript-Fu is not easy to master
  • 5. The web is awash with bad examples and worse resources
  • 6. Developers forced into refuge behind libraries and frameworks
  • 7. THE ANCIENT MANUALS OF JAVASCRIPT-FU The Tao Of The Event Handler! ❖ 5 Methods Of DOM Fist! ❖ Lightning Script Style! ❖ The 36 Chambers Of Shaolin! ❖
  • 8. TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖
  • 9. THE TAO OF THE EVENT HANDLER
  • 10. The essence of browser scripting is defining behaviour
  • 11. Big differences in both browser implementation and opinion
  • 12. The main battle has always been in one area...
  • 13. INLINE VS SCRIPTED
  • 14. INLINE EVENT HANDLERS
  • 15. INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
  • 16. INLINE EVENT HANDLERS But what happens when there is more than one....
  • 17. Bad JavaScript-fu
  • 18. SCRIPT-BASED EVENT HANDLERS
  • 19. Attached after element has loaded
  • 20. Very DRY
  • 21. Separate JavaScript out in a similar way to CSS
  • 22. Large numbers of event handlers choke browsers
  • 23. WHICH WAY? Use script-based event handling by ❖ default If the page is large and this method ❖ results in unresponsiveness try event delegation If all else fails go for inline event ❖ handling
  • 24. EVENT BUBBLING <body> handler <div> <p> <a> click
  • 25. EVENT DELEGATION
  • 26. BETTER INLINE HANDLERS
  • 27. BETTER INLINE HANDLERS
  • 28. 5 METHODS OF DOM FIST
  • 29. There are 5 methods for updating HTML
  • 30. 3 official methods (W3C)
  • 31. $('kungfu').appendChild(node);
  • 32. $('kungfu').insertBefore(node, child);
  • 33. $('kungfu').replaceChild(node, child);
  • 34. 1 non-standard method (you guessed it, from IE)
  • 35. DOM VS innerHTML
  • 36. DOM METHODS
  • 37. Insert elements with precision
  • 38. But you need to create the nodes first...
  • 39. ARGH!
  • 40. LOWPRO’S DOM BUILDER
  • 41. INNERHTML
  • 42. Can shift large amount of HTML quickly...
  • 43. ...but you don't get much control
  • 44. Incredibly simple to use with Ajax
  • 45. WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
  • 46. and the final method...
  • 47. THE BASTARD SON
  • 48. LIGHTNING SCRIPT STYLE
  • 49. ~134KB
  • 50. 5 HTTP requests
  • 51. Takes time to download and evaluate script
  • 52. The less JavaScript the better
  • 53. Browsers normally only try to load 2 resources concurrently
  • 54. Combine .js files
  • 55. Use GZIP compression over JS based minification
  • 56. Make sure everything is cachable
  • 57. FASTER LOOPS
  • 58. FASTER LOOPS
  • 59. BE CAREFUL WITH SELECTORS
  • 60. Use a just-in-time approach
  • 61. THE 36 CHAMBERS OF SHAOLIN
  • 62. You're going to need a few tools...
  • 63. Buy a Mac
  • 64. Parallels Workstation PARALLELS WORKSTATION
  • 65. Get Firebug
  • 66. What about the other browsers?
  • 67. And then there's testing...
  • 68. SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖
  • 69. LEARNING MORE
  • 70. LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖ Parallels: http://parallels.com ❖ Firebug: http://getfirebug.com ❖ Selenium: http://www.openqa.org/ ❖ selenium/
  • 71. QUESTIONS?

×