History of jQuery

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

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

Slide 4: 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!

Slide 5: 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 ); } })

Slide 6: 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; }

Slide 7: 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] );

Slide 8: 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

Slide 10: Download Builder

Slide 11: 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

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

Slide 13: “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>

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

Slide 15: Teenage jQuery ✦ jQuery Magazine ✦ “Why jQuery is better”

Slide 16: Later Events ✦ Plugins Repository ✦ Evangelism Team

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

Slide 18: 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

Slide 19: jQuery: Now ✦ jQuery 1.2.1 ✦ jQuery UI

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

Slide 21: Future ✦ jQuery Test Suite ✦ jQuery UI ✦ Internationalization ✦ Forums

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

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

Slide 24: Internationalization ✦ Individual language sites ✦ Dedicated documentation

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

Slide 26: Questions?