A talk given at Mexico Web 2.0, November 2008.

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

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

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

4. 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();
});
};

5. 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

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

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

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

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

10. jQuery 1.3
✦ Selectors
✦ DOM Modification
✦ Browser Sniffing

11. Selectors

12. 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)

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

14. 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/

15. 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

16. 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

17. 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?
}

18. Testing

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

20. qUnit Usage
✦ test(quot;a basic test examplequot;, function() {
ok( true, quot;this test is finequot; );
var value = quot;helloquot;;
equals( quot;helloquot;, value, quot;We expect value to be helloquot; );
});
module(quot;Module Aquot;);
test(quot;first test within modulequot;, function() {
ok( true, quot;all passquot; );
});
test(quot;second test within modulequot;, function() {
ok( true, quot;all passquot; );
});
module(quot;Module Bquot;);
test(quot;some other testquot;, function() {
expect(1);
ok( true, quot;wellquot; );
});

21. qUnit Output

22. Performance Analysis

23. 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();

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