Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

History of jQuery

16,695 views

Published on

An introductory overview of the history of the jQuery library (up until present) - and then going beyond and looking at its future.

Published in: Technology, News & Politics
  • Be the first to comment

History of jQuery

  1. 1. jQuery Past, Present, and Future John Resig (ejohn.org)
  2. 2. Inspiration ✦ Simon Willison’s getElementsBySelector ✦ Dean Edwards’ cssQuery ✦ Dean Edwards’ addEvent ✦ Prototype ✦ Behavior ✦ moo.fx
  3. 3. 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!
  4. 4. 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 ); } })
  5. 5. 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; }
  6. 6. 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] );
  7. 7. 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
  8. 8. Download Builder
  9. 9. 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
  10. 10. Initial Choices ✦ The “$” war ✦ .style ✦ .onclick ✦ $(“id”) -> DOMElement DOMElement.onclick = jQuery method ✦ Creative Commons -> MIT ✦ No Ajax! -> Ajax!
  11. 11. “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:first: click compile input:last: click run </script>
  12. 12. Early Events ✦ SVN (May ‘06) / Trac ✦ Drupal ✦ Thickbox (April ‘06) ✦ Version 1.0 (August ‘06)
  13. 13. Teenage jQuery ✦ jQuery Magazine ✦ “Why jQuery is better”
  14. 14. Later Events ✦ Plugins Repository ✦ Evangelism Team
  15. 15. Progress ✦ 13 Releases (not including previews) ✦ 4200 Mailing List Subscribers ✦ 48% Developer Coverage (Ajaxian.com)
  16. 16. 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
  17. 17. jQuery: Now ✦ jQuery 1.2.1 ✦ jQuery UI
  18. 18. jQuery UI ✦ First major new project since jQuery ✦ Important new direction for the project ✦ Huge boost to interest
  19. 19. Future ✦ jQuery Test Suite ✦ jQuery UI ✦ Internationalization ✦ Forums
  20. 20. Test Suite ✦ Distributed ✦ Run in any browser ✦ Submit results back to central server ✦ UI Testing ✦ Automation ✦ Manual user tests
  21. 21. jQuery UI ✦ Refine, improve ✦ Release new widgets ✦ More corporate support
  22. 22. Internationalization ✦ Individual language sites ✦ Dedicated documentation
  23. 23. Forums ✦ Mailing List just isn’t scaling ✦ Very frequent request ✦ Probably better suited to audience
  24. 24. Questions?

×