jQuery 1.3 and
jQuery UI
John Resig
http://ejohn.org/ - http://twitter.com/jeresig/

jQuery
✦ jQuery Plugins
✦ jQuery UI
✦ Themeroller
✦ jQuery 1.3:
✦ Selector Engine
✦ Manipulation
✦ Sniffing
✦ jQuery Testing
✦ jQuery Performance

Plugins
✦ Huge plugin ecosystem
✦ Managed by Plugin tracker
http://plugins.jquery.com/
✦ Hundreds in the tracker - even more on
the web

jQuery Plugins
✦ Extend the jQuery system
✦ Add on extra methods:
jQuery(“div”).hideRemove();
✦ Trivial to implement:
jQuery.fn.hideRemove = function(speed){
return this.hide(speed, function(){
jQuery(this).remove();
});
};

jQuery UI
✦ A complete set of themed, cross-browser,
user interface components (plugins!).
✦ Drag, Drop, Sort, Select, Resize
✦ Accordion, Datepicker, Dialog, Slider, Tabs
✦ More info:
http://ui.jquery.com/
✦ 1.6 is almost ready

Accessibility
✦ Keyboard Accessible
✦ Screenreader Accessible
✦ Grant from Mozilla Foundation to
implement ARIA

Support
✦ Full-time developer:
✦ Paul Bakaus
✦ Hired by LifeRay

Themeroller
✦ Customize the styling of any jQuery UI
component
✦ Full CSS, images for all components
✦ Easy to customize and use
✦ http://themeroller.com/

Todo List
http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php

jQuery 1.3
✦ Selectors
✦ DOM Modification
✦ Browser Sniffing

Selectors

Code name “Sizzle”
✦ http://github.com/jeresig/sizzle/tree/master
✦ New Selector Engine for jQuery
✦ 1.5 - 4x faster than other libraries
✦ 4KB Compressed
✦ No dependencies, can be used by other
libraries (MochiKit, Prototype, Dojo)

Manipulation
✦ Four common methods:
append, prepend, before, after
✦ $(“<li>and this too!</li>”)

Injecting
✦ Loop through elems, cloneNode(true)
each, insert into DOM
✦ 5 paragraphs
✦ 100 divs
✦ 2 method calls (insert, clone)
✦ 1000 method
✦ *Very* slow
✦ Simple plugin provides 10-15x speed-up:
http://dev.jquery.com/~john/ticket/append/

Document Fragments
✦ Move the nodes into a Document
Fragment
✦ Husk DOM container
✦ Whole container can be cloned
✦ and whole container can be injected
✦ Saves a ton of repetition

Sniffing
✦ All major JS libraries use browser sniffing
✦ Look at the user agent and make guesses
✦ navigator.userAgent is bad! :-(
✦ We can get rid of this!
✦ Makes our code more resilient to change

Detection
✦ Object Detection
✦ if ( document.getElementsByTagName )
✦ Feature Simulation
✦ var div = document.createElement(“div”);
div.innerHTML = “<!--test-->”;
var a = div.getElementsByTagName(“*”);
if ( a.length > 0 ) {
// Why did we match a comment?
}

Testing

JavaScript Test Suite
✦ qUnit (jQuery Test Suite)
http://docs.jquery.com/QUnit
✦ By Joern Zaefferer

qUnit Usage
✦ test(\"a basic test example\", function() {
ok( true, \"this test is fine\" );
var value = \"hello\";
equals( \"hello\", value, \"We expect value to be hello\" );
});
module(\"Module A\");
test(\"first test within module\", function() {
ok( true, \"all pass\" );
});
test(\"second test within module\", function() {
ok( true, \"all pass\" );
});
module(\"Module B\");
test(\"some other test\", function() {
expect(1);
ok( true, \"well\" );
});

qUnit Output

Performance Analysis

Profiling
✦ Deep Profiling Plugin
✦ Watch all method calls and events
✦ http://ejohn.org/blog/deep-profiling-
jquery-apps/
✦ http://dev.jquery.com/~john/plugins/profile/
github.com.html
✦ javascript:jQuery.displayProfile();

Thank You!
✦ John Resig
✦ http://ejohn.org/
✦ http://twitter.com/jeresig/