jQConCondensed edition

Review

• Selector performance– ID– Tag name– Name, Class

• Use CSS classes to control state• Specificity helps– Ex: $(‘div.ui-content’); instead of $(‘.ui-content’)

Performance

Visibility:– Install Firebug & Yslow– Know what is slowing down

your page loads

Interactivity:– Profile your $.ready– Minimize initialization on

page load

Responsiveness:– throttle/debounce events

Business:– Performance is important for the

product– Performance can be expensive– Optimize intelligently - weigh the

LOE and the utility gained– Performance is most important

to sites that get millions of hits

Tips: – Low hanging fruit first– Google Analytics to record data

about your loads– 8-bit PNG's with alpha

Contextual jQuery

• Handle initial state with CSS• Write reusable code• Delegate event handling• Anticipate user actions– Scrolling– Focus/blur– Typing

• .one()

Unit Testing

• qUnit• qUnit• qUnit• And qUnit

Grunt

• Build tool for JS• Included tasks– Creates scaffolding– Lint (JSHint)– Unit testing (qUnit)– Concat/Minify (UglifyJS)

PhantomJS

• Headless WebKit– Like the horseman? Why is this cool?

• Grunt + PhantomJS + qUnit = ?

DEMONSTRATION

Recap of Steps

• brew install node• brew install phantomjs• npm install -g grunt• grunt -help (Optional)• grunt init (Optional)• grunt init:jquery• grunt qunit

Tools

• YSlow, PageSpeed• JavaScript Errors Notifier Chrome Extension• iWebInspector• JSHint (for vim)

Resources

• Wiki pages– jQuery Conf 2012– Best Practices: jQuery– Web Dev Quirks

• Read more– Introducing Grunt– jQuery Plugins w/ Grunt & qUnit– https://github.com/cowboy/grunt– qUnit Intro