Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie The Mysteries Of JavaScript-Fu (RailsConf Ediition)
Ähnlich wie The Mysteries Of JavaScript-Fu (RailsConf Ediition) (20)
Mehr von danwrong
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
The Mysteries Of JavaScript-Fu (RailsConf Ediition)
- 2. THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)
- 3. “Ah, JavaScript, the language we all love to hate” Geoffrey Grosenbach, Peepcode
- 5. Web 2.0 has forced ‘real’ programmers to master it
- 6. JavaScript-Fu is not easy to master
- 7. The web is awash with bad examples and worse resources
- 8. Developers forced into refuge behind libraries and frameworks
- 10. THE ANCIENT MANUALS OF JAVASCRIPT-FU The Tao Of The Event Handler! ❖ 5 Methods Of DOM Fist! ❖ Lighting Script Style! ❖ Iron Ajax Technique! ❖
- 11. TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Progressive enhancement ❖
- 12. THE TAO OF THE EVENT HANDLER
- 13. The essence of browser scripting is defining behavior
- 14. Big differences in both browser implementation and opinion
- 15. The main battle has always been in one area...
- 18. INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
- 19. INLINE EVENT HANDLERS But what happens when there is more than one....
- 22. SCRIPT-BASED EVENT HANDLERS
- 23. Attached after element has loaded
- 25. Very DRY
- 27. Separate JavaScript out in a similar way to CSS
- 28. Large numbers of event handlers choke browsers
- 29. 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
- 30. EVENT BUBBLING <body> handler <div> <p> <a> click
- 31. EVENT DELEGATION
- 34. 5 METHODS OF DOM FIST
- 35. There are 5 methods for updating HTML
- 36. 3 official methods (W3C)
- 40. 1 non-standard method (you guessed it, from IE)
- 43. DOM VS innerHTML
- 44. DOM METHODS
- 45. Insert elements with precision
- 46. But you need to create the nodes first...
- 48. ARGH!
- 50. INNERHTML
- 51. Can shift large amount of HTML quickly...
- 52. ...but you don't get much control
- 53. Incredibly simple to use with Ajax
- 54. WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
- 55. and the final method...
- 56. THE BASTARD SON
- 60. ~134KB
- 61. 5 HTTP requests
- 62. Takes time to download and evaluate script
- 63. The less JavaScript the better
- 64. Browser normally only try to load 2 resources concurrently
- 66. Use GZIP compression not JS based minification
- 67. Make sure everything is cachable
- 68. FASTER LOOPS
- 69. FASTER LOOPS
- 70. BE CAREFUL WITH SELECTORS
- 72. RULE #1: BROWSERS SUCK
- 73. Main browsers are getting better quickly
- 74. But what about the others?
- 76. The traditional answer from Rails:
- 78. But why turn users away if you don’t have to?
- 79. 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
- 80. It's easy to apply this to Ajax
- 81. IRON AJAX action.rhtml respond_to :html POST Controller render :partial _partial.rhtml
- 82. IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js _partial.rhtml
- 83. IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js action.rjs
- 84. THE HTML
- 85. THE HTML
- 86. THE JAVASCRIPT
- 87. THE CONTROLLER
- 88. THE CONTROLLER
- 89. Easy
- 90. I know what you’re thinking
- 91. But it won’t work if...
- 93. LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖
- 94. LEARNING MORE
- 95. QUESTIONS?