• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Mysteries Of JavaScript-Fu (@media SF Edition)
 

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

on

  • 17,284 views

The version of JS-fu as presented at @media SF. Contains a section on testing and debugging that isn't in the RailsConf version.

The version of JS-fu as presented at @media SF. Contains a section on testing and debugging that isn't in the RailsConf version.

Statistics

Views

Total Views
17,284
Views on SlideShare
17,272
Embed Views
12

Actions

Likes
10
Downloads
275
Comments
2

6 Embeds 12

http://www.techgig.com 4
http://www.linkedin.com 3
http://www.slideshare.net 2
http://www.slideshow.com 1
http://www.pridesk.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • though I am not strictly a techie, I like this presentation's storytelling style; it provides a grip over user attention....
    Are you sure you want to
    Your message goes here
    Processing…
  • Cool presentation. Changed some of my perspective.
    Thanks
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Mysteries Of JavaScript-Fu (@media SF Edition) The Mysteries Of JavaScript-Fu (@media SF Edition) Presentation Transcript

    • THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)
    • About Me JavaScript hacker for ❖ 6 years Ruby/Rails for 2 years ❖ Author of Low Pro, ❖ DOM Builder, Sumo and other stuff Prototype Core Team ❖ http://danwebb.net ❖
    • A peasant’s language
    • Web 2.0 has forced ‘real’ programmers to master it
    • JavaScript-Fu is not easy to master
    • The web is awash with bad examples and worse resources
    • Developers forced into refuge behind libraries and frameworks
    • 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! ❖
    • TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖
    • THE TAO OF THE EVENT HANDLER
    • The essence of browser scripting is defining behaviour
    • Big differences in both browser implementation and opinion
    • The main battle has always been in one area...
    • INLINE VS SCRIPTED
    • INLINE EVENT HANDLERS
    • INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
    • INLINE EVENT HANDLERS But what happens when there is more than one....
    • Bad JavaScript-fu
    • SCRIPT-BASED EVENT HANDLERS
    • Attached after element has loaded
    • Very DRY
    • Separate JavaScript out in a similar way to CSS
    • Large numbers of event handlers choke browsers
    • 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
    • EVENT BUBBLING <body> handler <div> <p> <a> click
    • EVENT DELEGATION
    • BETTER INLINE HANDLERS
    • BETTER INLINE HANDLERS
    • 5 METHODS OF DOM FIST
    • There are 5 methods for updating HTML
    • 3 official methods (W3C)
    • $('kungfu').appendChild(node);
    • $('kungfu').insertBefore(node, child);
    • $('kungfu').replaceChild(node, child);
    • 1 non-standard method (you guessed it, from IE)
    • DOM VS innerHTML
    • DOM METHODS
    • Insert elements with precision
    • But you need to create the nodes first...
    • ARGH!
    • LOWPRO’S DOM BUILDER
    • INNERHTML
    • Can shift large amount of HTML quickly...
    • ...but you don't get much control
    • Incredibly simple to use with Ajax
    • WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
    • and the final method...
    • THE BASTARD SON
    • LIGHTNING SCRIPT STYLE
    • ~134KB
    • 5 HTTP requests
    • Takes time to download and evaluate script
    • The less JavaScript the better
    • Browsers normally only try to load 2 resources concurrently
    • Combine .js files
    • Use GZIP compression not JS based minification
    • Make sure everything is cachable
    • FASTER LOOPS
    • FASTER LOOPS
    • BE CAREFUL WITH SELECTORS
    • THE 36 CHAMBERS OF SHAOLIN
    • You're going to need a few tools...
    • Buy a Mac
    • Parallels Workstation PARALLELS WORKSTATION
    • Get Firebug
    • What about the other browsers?
    • And then there's testing...
    • SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖
    • LEARNING MORE
    • 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/
    • QUESTIONS?