SlideShare a Scribd company logo

jQuery Presentation to Rails Developers

•
•
Yehuda Katz
Yehuda Katz

This document summarizes jQuery, an open-source JavaScript library that simplifies HTML and JavaScript interactions. It discusses jQuery's features like DOM manipulation, events, effects, and AJAX capabilities. It also covers how to use jQuery with Ruby on Rails, including responding to Ajax requests and placing JavaScript code. The document advocates separating JavaScript behavior from HTML/CSS for maintainability.

1 of 38
Downloaded 869 times
jQuery + Ruby + Rails AppFolio - September 2007 Yehuda Katz (yehudakatz.com)
What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
Why jQuery? • Fully documented • Great community • Tons of plugins • Small size (14kb) • Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
Complete Focus: • Find some elements • Do something with them
Find Some Elements... • CSS 1-3 Support • Basic XPath via a Plugin • Better CSS support than most browsers
$(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
$(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
$(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
$(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
Features • Events (click, hover, toggle, namespaces) • DOM Manipulation (append, prepend, remove) • Effects%/em, colors) slideDown, fadeOut, stop, relative, (hide, show, queues, • AJAX (load, get, post, XD, JSONP)
Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
Live Events • $(“form input:last”).livequery(“click, function(){ $(“#menu”).slideDown(“slow”); }); • With LiveQuery Official Plugin
DOM Manipulation • $(“a[target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
Effects • $(“#menu”).slideDown(“slow”); • $(“div”).hide(500,function(){ $(this).show(500); });
Relative Animations • $(“#foo”).animate({ left: “+50px” top: “-50px” }, “slow”)
AJAX • $(“#body”).load(“sample.html”); • $(“#body”).load(“sample.html #foo”); • $.getScript(“test.js”); • $.getScript(“http://jquery.com/jquery.js”);
Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
Live Demo
Accordion Menu
Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more... • http://jquery.com/plugins
Community • Very active mailing list • 140+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
Who uses jQuery? • • IBM BBC • • MSNBC SourceForge • • Amazon Intuit • • AOL Salesforce • • Technorati FeedBurner • • Drupal WB Records • • Wordpress Linux.com • • Digg many others...
Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
Future • “jQuery UI” - Next Sunday! • Themeing • Internationalization
Using jQuery with Rails • Most jQuery use is not different than normal jQuery use • $(“div”).remove(); // works on any site • Considerations come mainly in with dealing with Ajax requests
Ajax and Rails • Just another request to a controller/action • You might want to respond like so: respond_to do |format| format.js { # do stuff } end • jQuery sends the right headers so you can respond easily
Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“/controller/action”);
Reply with JSON • Sometimes you’ll want to reply with a data structure for further manipulation • ActiveRecord objects have to_json serialization built in: quot;{attributes:{foo: quot;barquot;, baz: quot;batquot;}}quot; • Or you can get specific: quot;{foo: quot;barquot;, baz: quot;batquot;}quot; @ar_object.attributes.to_json #=>
Where does the JS go? • jQuery dictates good separation of content, style, and behavior • Put all your code in application.js (just like style.css) • jQuery and Prototype can play nicely together: jQuery.noConflict(); jQuery(function($){ /* your code */ });
Where’s RJS? • RJS says that sending back code (from the server) is the best way to do things • This is overkill, simplify and extract what you’re trying to achieve
RJS v. jQuery-style • With RJS: id=’myid’ onclick=”return someFunction <a href=”#” (‘myid’);”>text</a> <a href=”#” id=’myid2’ onclick=”return someFunction (‘myid2’);”>text</a> • With jQuery: <a href=”...” id=”myid”>text</a> <a href=”...” id=”myid2”>text</a> <script>$(“a”).click(someFunction);</script>
jQuery & RJS • jQuery Doesn’t Agree with the philosophy that produced RJS • Send data, not code
Helpers • Say you have a link that makes an Ajax call and updates some div with the response: <a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a> • You might write a simple line of jQuery code to handle it: $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href) })
Helpers (cont.) • You could then write a Rails helper to reuse it: def remote_link text, url_hash, update = nil link_to(text, url_hash, :class => quot;remotequot;, :rel => update) end • You could thenBazquot;, {:controller => quot;fooquot;, call it as: remote_link quot;Update :action => quot;barquot;}, quot;#bazquot;
You still have your helpers :)
jQuery on Rails • Mainly Proof-of-Concept • Uses Hpricot to select jQuery snippets • Includes (POC) helpers for • Tab field • Sortable table • More coming
More info: • jQuery with Rails: • http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/ • http://yehudakatz.com/2007/05/18/railsconf-talk-recap/ • jQuery Rails Plugin: • http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/ • http://yehudakatz.com/2007/05/25/10/ • http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/
jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com

More Related Content

jQuery Presentation to Rails Developers

  • 1. jQuery + Ruby + Rails AppFolio - September 2007 Yehuda Katz (yehudakatz.com)
  • 2. What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • 3. Why jQuery? • Fully documented • Great community • Tons of plugins • Small size (14kb) • Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 4. Complete Focus: • Find some elements • Do something with them
  • 5. Find Some Elements... • CSS 1-3 Support • Basic XPath via a Plugin • Better CSS support than most browsers
  • 6. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 7. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 8. $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 9. $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 10. Features • Events (click, hover, toggle, namespaces) • DOM Manipulation (append, prepend, remove) • Effects%/em, colors) slideDown, fadeOut, stop, relative, (hide, show, queues, • AJAX (load, get, post, XD, JSONP)
  • 11. Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  • 12. Live Events • $(“form input:last”).livequery(“click, function(){ $(“#menu”).slideDown(“slow”); }); • With LiveQuery Official Plugin
  • 13. DOM Manipulation • $(“a[target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • 15. Relative Animations • $(“#foo”).animate({ left: “+50px” top: “-50px” }, “slow”)
  • 16. AJAX • $(“#body”).load(“sample.html”); • $(“#body”).load(“sample.html #foo”); • $.getScript(“test.js”); • $.getScript(“http://jquery.com/jquery.js”);
  • 17. Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
  • 20. Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more... • http://jquery.com/plugins
  • 21. Community • Very active mailing list • 140+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
  • 22. Who uses jQuery? • • IBM BBC • • MSNBC SourceForge • • Amazon Intuit • • AOL Salesforce • • Technorati FeedBurner • • Drupal WB Records • • Wordpress Linux.com • • Digg many others...
  • 23. Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  • 24. Future • “jQuery UI” - Next Sunday! • Themeing • Internationalization
  • 25. Using jQuery with Rails • Most jQuery use is not different than normal jQuery use • $(“div”).remove(); // works on any site • Considerations come mainly in with dealing with Ajax requests
  • 26. Ajax and Rails • Just another request to a controller/action • You might want to respond like so: respond_to do |format| format.js { # do stuff } end • jQuery sends the right headers so you can respond easily
  • 27. Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“/controller/action”);
  • 28. Reply with JSON • Sometimes you’ll want to reply with a data structure for further manipulation • ActiveRecord objects have to_json serialization built in: quot;{attributes:{foo: quot;barquot;, baz: quot;batquot;}}quot; • Or you can get specific: quot;{foo: quot;barquot;, baz: quot;batquot;}quot; @ar_object.attributes.to_json #=>
  • 29. Where does the JS go? • jQuery dictates good separation of content, style, and behavior • Put all your code in application.js (just like style.css) • jQuery and Prototype can play nicely together: jQuery.noConflict(); jQuery(function($){ /* your code */ });
  • 30. Where’s RJS? • RJS says that sending back code (from the server) is the best way to do things • This is overkill, simplify and extract what you’re trying to achieve
  • 31. RJS v. jQuery-style • With RJS: id=’myid’ onclick=”return someFunction <a href=”#” (‘myid’);”>text</a> <a href=”#” id=’myid2’ onclick=”return someFunction (‘myid2’);”>text</a> • With jQuery: <a href=”...” id=”myid”>text</a> <a href=”...” id=”myid2”>text</a> <script>$(“a”).click(someFunction);</script>
  • 32. jQuery & RJS • jQuery Doesn’t Agree with the philosophy that produced RJS • Send data, not code
  • 33. Helpers • Say you have a link that makes an Ajax call and updates some div with the response: <a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a> • You might write a simple line of jQuery code to handle it: $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href) })
  • 34. Helpers (cont.) • You could then write a Rails helper to reuse it: def remote_link text, url_hash, update = nil link_to(text, url_hash, :class => quot;remotequot;, :rel => update) end • You could thenBazquot;, {:controller => quot;fooquot;, call it as: remote_link quot;Update :action => quot;barquot;}, quot;#bazquot;
  • 35. You still have your helpers :)
  • 36. jQuery on Rails • Mainly Proof-of-Concept • Uses Hpricot to select jQuery snippets • Includes (POC) helpers for • Tab field • Sortable table • More coming
  • 37. More info: • jQuery with Rails: • http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/ • http://yehudakatz.com/2007/05/18/railsconf-talk-recap/ • jQuery Rails Plugin: • http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/ • http://yehudakatz.com/2007/05/25/10/ • http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/
  • 38. jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com