History of jQuery

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 Modiﬁcation ✦ 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<sup>2</sup></h1>’ input:ﬁrst: 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 ✦ Reﬁne, 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?

http://cachina.wordpress.com	58
http://blog.cachina.com.br	26
http://www.slideshare.net	17
http://127.0.0.1:8000	2
http://translate.googleusercontent.com	1

History of jQuery

by jeresig on Oct 31, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

Embed Views

Statistics

History of jQuery — Presentation Transcript

Get analytics right now with SlideShare PRO

An effective way to find out who is viewing your content

Remove ads from all your pages with SlideShare PRO

Your viewers will engage with your content, not ads