jQuery
Past, Present, and Future
John Resig (ejohn.org)

Inspiration
✦ Simon Willison’s getElementsBySelector
✦ Dean Edwards’ cssQuery
✦ Dean Edwards’ addEvent
✦ Prototype
✦ Behavior
✦ moo.fx

The Beginning
✦ Started August of ’05
✦ http://ejohn.org/blog/selectors-in-javascript/
✦ $(’#foo ol li’)
.set(’title’,’List Items!’)
.bind(’click’,function(){alert(’Hello!’);})
.select(’.tmp’)
.style(’color’,’white’)
.select(’.foo’)
.style(’background’,’red’);
✦ jSelect!

First Implementation
✦ http://ejohn.org/apps/jselect/selector.js
✦
$(document).bind(”ready”, init);
var rows = $(”#table tr:gt(0)”);
$(”#table th”).bind(”click”,function(){
if ( removeClass( this, “asc” ) ) {
addClass( this, “desc” );
rows.reverse();
} else {
removeClass( this, “desc” );
addClass( this, “asc” );
rows.sort( ofType(this).n );
}
})

First Implementation
✦
function sort(f) {
cur = cur.sort(function(a,b){
if ( typeof f == ‘object’ )
var ret = f(a,b);
else
var ret = genericSort(a,b,f);
if ( a < b )
b.parentNode.insertBefore( a, b );
else if ( a > b )
a.parentNode.insertBefore( b, a );
return ret;
});
return this;
}
function reverse() {
cur[0].parentNode.appendChild( cur[0] );
for ( var i = 1; i < cur.length; i++ )
cur[i-1].parentNode.insertBefore( cur[i], cur[i-1] );
cur = cur.reverse();
return this;
}

Expression Parsing
✦ var t = “[title]”;
var re = new RegExp( “^\\\\[([a-z0-9-]+)(~?\\\\^?=?)’?([^’]*)’?\\\\]”, “i” );
var m = re.exec(t);
t = t.replace( re, “” );
alert( t + “---” + m[1] + “---” + m[2] );

Release!
✦ Released at BarCamp NYC (Jan 2006)
✦ “New Wave JavaScript”
✦ Hit Digg and del.icio.us/popular
✦ CSS + XPath
✦ DOM Modification
✦ Events
✦ moo.fx-rewrite Animations

Download Builder

First Plugin
✦ 11 days later...
✦ JSON plugin
✦ “Unlike Prototype, jQuery doesn’t mess
around with built-in JavaScript objects. It’s
new—too new to have a version number!—
but I’ve been writing some code with it
and enjoying it.”
✦ http://mg.to/2006/01/25/json-for-jquery

Initial Choices
✦ The “$” war
✦ .style
✦ .onclick
✦ $(“id”) -> DOMElement
DOMElement.onclick = jQuery method
✦ Creative Commons -> MIT
✦ No Ajax! -> Ajax!

“jQuery 2”
✦ May ‘06
✦ <script type=”text/jquery”>
pre:
css ‘background’ ‘#212121’
css ‘color’ ‘#0F0’
css ‘padding’ ‘10px’
css ‘font-size’ ‘14px’
body:
prepend ‘<h1>jquery²</h1>’
input:first: click compile
input:last: click run
</script>

Early Events
✦ SVN (May ‘06) / Trac
✦ Drupal
✦ Thickbox (April ‘06)
✦ Version 1.0 (August ‘06)

Teenage jQuery
✦ jQuery Magazine
✦ “Why jQuery is better”

Later Events
✦ Plugins Repository
✦ Evangelism Team

Progress
✦ 13 Releases (not including previews)
✦ 4200 Mailing List Subscribers
✦ 48% Developer Coverage (Ajaxian.com)

Who uses jQuery?
• Digg • Miami Herald
• Google • Food Network
• NBC • REI
• MSNBC • The Onion
• Amazon • FeedBurner
• Intel • PokerRoom
• BBC • Warner Bros.
• AOL • Def Jam
• Oracle • Classmates
• Cisco • Fandango
• Newsweek • Pandora
• Techonorati • isoHunt
• Washington Post • Ask A Ninja
• Sourceforge • Ars Technica
• American Eagle • Linux.com
• Salesforce • Joost
• Newsgator • Barack Obama
• Boston Globe • Nintendo
• My YearBook • and more!
• New York Post

jQuery: Now
✦ jQuery 1.2.1
✦ jQuery UI

jQuery UI
✦ First major new project since jQuery
✦ Important new direction for the project
✦ Huge boost to interest

Future
✦ jQuery Test Suite
✦ jQuery UI
✦ Internationalization
✦ Forums

Test Suite
✦ Distributed
✦ Run in any browser
✦ Submit results back to central server
✦ UI Testing
✦ Automation
✦ Manual user tests

jQuery UI
✦ Refine, improve
✦ Release new widgets
✦ More corporate support

Internationalization
✦ Individual language sites
✦ Dedicated documentation

Forums
✦ Mailing List just isn’t scaling
✦ Very frequent request
✦ Probably better suited to audience

Questions?