jQueryPast, 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• Google• NBC• MSNBC• Amazon• Intel• BBC• AOL• Oracle• Cisco• Newsweek• Techonorati• Washington Post• Sourceforge• American Eagle• Salesforce• Newsgator• Boston Globe• My YearBook• New York Post

• Miami Herald• Food Network• REI• The Onion• FeedBurner• PokerRoom• Warner Bros.• Def Jam• Classmates• Fandango• Pandora• isoHunt• Ask A Ninja• Ars Technica• Linux.com• Joost• Barack Obama• Nintendo• and more!

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?