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



Add a comment on Slide 1
If you have a SlideShare account, login to comment; else you can comment as a guest- Favorites & Groups
Showing 1-50 of 17 (more)