jQuery - A Walk On The Client Side


Published on

Slides from my jQuery presentation at Refresh Miami on 3/25/2010. Special thanks to Karl Swedberg for sharing his slide content with me.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery - A Walk On The Client Side

  1. 1. A Walk on the Client Sidewith jQueryPart 1<br />
  2. 2. Rey Bango<br />jQuery Project Team Member<br />Community PM for Scripting & Web Client Technologies – Microsoft<br />Ajaxian.com Writer<br />Email: rey@reybango.com<br />Blog: http://blog.reybango.com<br />Twitter: @reybango<br />
  3. 3. Old School JavaScript<br />Browser Targeting<br />“Best Viewed in ….”<br />Inline JavaScript<br /><a href="#whatisit" onMouseOut="MM_swapImgRestore()"   onMouseOver="MM_swapImage('Whatis','',   'whatis-active.png',1)">   <img name="Whatis" src="buttons/whatis-unactive.png"></a> <br />
  4. 4.
  5. 5. Web Standards<br /><ul><li>Unobtrusive JavaScript</li></ul>Content, Presentation & Behavior are seperated<br />Content<br />Presentation<br />Behavior<br />Tests features, not browsers<br />
  6. 6.
  7. 7. Benefits<br />Quick, terse syntax<br />Simplifies interaction between HTML & JavaScript<br />Excellent documentation & thriving community<br />Open Source<br />Unobtrusive from the ground up<br />Wildly Popular<br />
  8. 8. Users<br /><ul><li>IBM, Intel, Dell
  9. 9. NBC, CBS, Newseek, Major League Baseball
  10. 10. Slashdot, Sourceforge
  11. 11. Github, Newsgator, Feedburner
  12. 12. Bank of America, Intuit</li></li></ul><li>jQuery Is Wildly Popular<br />Ref: trends.builtwith.com<br />
  13. 13. 1 in 5 Sites that Use JavaScript <br />use jQuery<br />
  14. 14. jQuery Is Wildly Popular<br />Ref: Indeed.com<br />
  15. 15. Why?<br />Community<br />23 Team Members<br />Continuously growing community of developers<br />Support Resources<br />Tutorials: http://docs.jquery.com/Tutorials<br />Forums: http://forums.jquery.com<br />IRC: freenode #jquery<br />Microsoft Phone Support<br />Local Groups: http://meetups.jquery.com/<br />
  16. 16. Why?<br />Documentation<br />Official Documentation api.jquery.com (jQuery 1.4 Reference Guide)<br />Books<br />Learning jQuery 1.3<br />jQuery Cookbook<br />jQuery in Action (2nd edition)<br />jQuery: Novice to Ninja<br />jQuery Enlightenment<br />
  17. 17. Why?<br />Many, many online tutorials<br />Learningjquery.com<br />Jqueryfordesigners.com<br />Nettuts.com<br />Many more…<br />Conferences<br />Online<br />San Francisco – April, 2010<br />Boston<br />London<br />500 Attendees with waiting list of 300+<br />
  18. 18. Why?<br />Communication<br />Twitter<br />@jquery<br />@jqueryui<br />@jquerysites<br />@jquerypodcast<br />jQueryTeam List (http://twitter.com/jquery/team)<br />jQuery Podcast (iTunes & jQuery Blog)<br />YayQueryVideocast (http://yayquery.com/)<br />
  19. 19. Why?<br />Availability<br />Source: http://github.com/jquery<br />Microsoft: http://www.asp.net/ajax/cdn/<br />Google: http://code.google.com/apis/ajaxlibs<br />Download from jQuery.com<br />
  20. 20. Why?<br />jQuery is Open Source<br />Dual-licensed: MIT and GPL<br />Copyright (c) 2009 John Resig, http://jquery.com/<br />Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:<br />The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.<br />THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND …<br />
  21. 21. Syntax<br />jQuery Has Quick, Terse Syntax<br />var x = $(window).width(); var y = $(window).height();<br />jQuery Simplifies Interaction<br />Find Something<br />Do Something<br />
  22. 22. $( 'div' )<br />
  23. 23. Selectors<br />CSS Selectors<br />#id {} .class {}<br />ancestor descendant {}<br />With jQuery<br />$('#id')<br />$('.class')<br />$('ancestor descendant')<br />Full CSS Selector 1-3 Support<br />Better CSS Selector support than most browsers<br />
  24. 24.
  25. 25. Features<br />Interaction plugins<br />Draggable, droppable, resizable, sortable, selectable<br />UI controls<br />Accordion, autocomplete, button, date picker, slider, more…<br />Visual effects<br />Basic effects, transitions, animation, easing…<br />Focus on web standards<br />Accessible<br />Skinnable<br />Tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome<br />Same license as jQuery<br />Completely open source<br />
  26. 26. Users<br /><ul><li>Oracle, RIM, Capcom
  27. 27. BusinessWeek, iVillage
  28. 28. Slashdot, Sourceforge
  29. 29. Tivo, Univision
  30. 30. bit.ly, Northwest Airlines</li></li></ul><li>Availability<br />CDN support, just like jQuery<br />Source: http://github.com/jquery/jquery-ui<br />Google: http://code.google.com/apis/ajaxlibs<br />Roll Your Own jQuery UI<br />Download Builder<br />Choose the modules<br />Choose the theme<br />Bam! Download it<br />
  31. 31. Demo<br />