Your SlideShare is downloading. ×
The Mysteries Of JavaScript-Fu (RailsConf Ediition)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Mysteries Of JavaScript-Fu (RailsConf Ediition)

12,226
views

Published on

Dan Webb's 'The Mysteries Of JavaScript-Fu' as presented at RailsConf 2007.

Dan Webb's 'The Mysteries Of JavaScript-Fu' as presented at RailsConf 2007.

Published in: Business, Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,226
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
426
Comments
0
Likes
4
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. “Ah, JavaScript, the language we all love to hate” Geoffrey Grosenbach, Peepcode
  • 3. A peasant’s language
  • 4. Web 2.0 has forced ‘real’ programmers to master it
  • 5. JavaScript-Fu is not easy to master
  • 6. The web is awash with bad examples and worse resources
  • 7. Developers forced into refuge behind libraries and frameworks
  • 8. THE ANCIENT MANUALS OF JAVASCRIPT-FU The Tao Of The Event Handler! ❖ 5 Methods Of DOM Fist! ❖ Lighting Script Style! ❖ Iron Ajax Technique! ❖
  • 9. TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Progressive enhancement ❖
  • 10. THE TAO OF THE EVENT HANDLER
  • 11. The essence of browser scripting is defining behavior
  • 12. Big differences in both browser implementation and opinion
  • 13. The main battle has always been in one area...
  • 14. INLINE VS SCRIPTED
  • 15. INLINE EVENT HANDLERS
  • 16. INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
  • 17. INLINE EVENT HANDLERS But what happens when there is more than one....
  • 18. Bad JavaScript-fu
  • 19. SCRIPT-BASED EVENT HANDLERS
  • 20. Attached after element has loaded
  • 21. Very DRY
  • 22. Separate JavaScript out in a similar way to CSS
  • 23. Large numbers of event handlers choke browsers
  • 24. 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
  • 25. EVENT BUBBLING <body> handler <div> <p> <a> click
  • 26. EVENT DELEGATION
  • 27. BETTER INLINE HANDLERS
  • 28. BETTER INLINE HANDLERS
  • 29. 5 METHODS OF DOM FIST
  • 30. There are 5 methods for updating HTML
  • 31. 3 official methods (W3C)
  • 32. $('kungfu').appendChild(node);
  • 33. $('kungfu').insertBefore(node, child);
  • 34. $('kungfu').replaceChild(node, child);
  • 35. 1 non-standard method (you guessed it, from IE)
  • 36. DOM VS innerHTML
  • 37. DOM METHODS
  • 38. Insert elements with precision
  • 39. But you need to create the nodes first...
  • 40. ARGH!
  • 41. LOWPRO’S DOM BUILDER
  • 42. INNERHTML
  • 43. Can shift large amount of HTML quickly...
  • 44. ...but you don't get much control
  • 45. Incredibly simple to use with Ajax
  • 46. WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
  • 47. and the final method...
  • 48. THE BASTARD SON
  • 49. LIGHTENING SCRIPT STYLE
  • 50. ~134KB
  • 51. 5 HTTP requests
  • 52. Takes time to download and evaluate script
  • 53. The less JavaScript the better
  • 54. Browser normally only try to load 2 resources concurrently
  • 55. Combine .js files
  • 56. Use GZIP compression not JS based minification
  • 57. Make sure everything is cachable
  • 58. FASTER LOOPS
  • 59. FASTER LOOPS
  • 60. BE CAREFUL WITH SELECTORS
  • 61. IRON AJAX TECHNIQUE
  • 62. RULE #1: BROWSERS SUCK
  • 63. Main browsers are getting better quickly
  • 64. But what about the others?
  • 65. Corporate security and firewalls often block JavaScript
  • 66. The traditional answer from Rails:
  • 67. But why turn users away if you don’t have to?
  • 68. PROGRESSIVE ENHANCEMENT 1. Start with a working plain HTML app 2. Test if necessary browser features are there (XMLHttpRequest, canvas etc) 3. If present then apply extra JS powered features to the UI
  • 69. It's easy to apply this to Ajax
  • 70. IRON AJAX action.rhtml respond_to :html POST Controller render :partial _partial.rhtml
  • 71. IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js _partial.rhtml
  • 72. IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js action.rjs
  • 73. THE HTML
  • 74. THE HTML
  • 75. THE JAVASCRIPT
  • 76. THE CONTROLLER
  • 77. THE CONTROLLER
  • 78. Easy
  • 79. I know what you’re thinking
  • 80. But it won’t work if...
  • 81. Try progressive enhancement first
  • 82. LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖
  • 83. LEARNING MORE
  • 84. QUESTIONS?