jQuery 1.3 and jQuery UI

jQuery 1.3 andjQuery UI

John Resighttp://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 Listhttp://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/