advertisement

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

50 %
50 %
advertisement
Information about The Mysteries Of JavaScript-Fu (@media SF Edition)

Published on May 26, 2007

Author: danwrong

Source: slideshare.net

Description

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

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?

Add a comment

Related pages

Anything But Typical: Learning to Love JavaScript ...

The Mysteries Of JavaScript-Fu (@media Europe Edition) ... The Mysteries Of JavaScript-Fu presentation as presented at @ ... jQuery Conference SF Bay ...
Read more

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

The Mysteries Of JavaScript-Fu (@media Europe Edition) ... The Mysteries Of JavaScript-Fu presentation as presented at @media Europe in London. Twittern.
Read more

danwrong - HubSlide

The Mysteries Of JavaScript-Fu (@media SF Edition) ... (@media Europe Edition) The Mysteries Of JavaScript-Fu presentation as presented at ...
Read more

danwebb.net - @media Ajax

Taming The Beast Slides for my presentation at @media Ajax 2008. ... The Mysteries Of JavaScript-Fu (@media SF Edition) My slides for the @media SF version.
Read more

The Mammoth Book of Best New SF Vol.23 - Documents

The Mammoth Book of Best New SF Vol.23 Mar 29, 2015 Documents constable-robinson. ... The Mysteries Of JavaScript-Fu (@media SF Edition) Sf Cnz Book V5
Read more

Mysteries | LinkedIn

View 29444 Mysteries posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home ... Media Production. Current
Read more

Sf | LinkedIn

View 20768 Sf posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn? Join Today
Read more

danwebb.net - @media 2007 Europe Over, @media Ajax Announced

@media 2007 to coming with an AJAX library is great… nice article. Werbeagentur at 04.07.07 / 21PM. 0n3klnhzkoav6dd yucxe4myrlhwq 5mrir1ha44.
Read more