jquery - boston ruby group (july '07)

33
jQuery + Ruby + Rails Boston Ruby Group - July 2007 John Resig (ejohn.org) Download this: http://dev.jquery.com/~john/files/apple-demo.zip

Upload: jeresig

Post on 27-Jan-2015

105 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: jQuery - Boston Ruby Group (July '07)

jQuery+ Ruby + Rails

Boston Ruby Group - July 2007

John Resig (ejohn.org)Download this:

http://dev.jquery.com/~john/files/apple-demo.zip

Page 2: jQuery - Boston Ruby Group (July '07)

What is jQuery?

• An open source JavaScript library that simplifies the interaction between HTML and JavaScript.

Page 3: jQuery - Boston Ruby Group (July '07)

• Fully documented

• Great community

• Tons of plugins

• Small size (20kb)

• Everything works in IE 6+, Firefox,Safari 2+, and Opera 9+

Why jQuery?

Page 4: jQuery - Boston Ruby Group (July '07)

Complete Focus:

• Find some elements

• Do something with them

Page 5: jQuery - Boston Ruby Group (July '07)

Find Some Elements...

• Full CSS 1-3 Support

• Basic XPath

• Better CSS support than most browsers

Page 6: jQuery - Boston Ruby Group (July '07)

$(“div”)

<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

Page 7: jQuery - Boston Ruby Group (July '07)

$(“#body”)

<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

Page 8: jQuery - Boston Ruby Group (July '07)

$(“div > div”)

<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

Page 9: jQuery - Boston Ruby Group (July '07)

$(“div[div]”)

<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

Page 10: jQuery - Boston Ruby Group (July '07)

• Events (click, hover, toggle)

• DOM Manipulation (append, prepend, remove)

• Effects (hide, show, slideDown, fadeOut)

• AJAX (load, get, post)

Features

Page 11: jQuery - Boston Ruby Group (July '07)

Events

• $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”);});

Page 12: jQuery - Boston Ruby Group (July '07)

DOM Manipulation

• $(“a[@target]”) .append(“ (Opens in New Window)”);

• $(“#body”).css({ border: “1px solid green”, height: “40px”});

Page 13: jQuery - Boston Ruby Group (July '07)

Effects

• $(“#menu”).slideDown(“slow”);

• $(“div”).hide(500,function(){ $(this).show(500);});

Page 14: jQuery - Boston Ruby Group (July '07)

AJAX

• $(“#body”).load(“sample.html”);

• $.getScript(“test.js”);

Page 15: jQuery - Boston Ruby Group (July '07)

• $(“div”).hide();

• $(“div”).hide().color(”blue”);

• $(“div”).hide().color(”blue”).slideDown();

Chaining

Page 16: jQuery - Boston Ruby Group (July '07)

Live Demo

Page 17: jQuery - Boston Ruby Group (July '07)

Accordion Menu

Page 18: jQuery - Boston Ruby Group (July '07)

Plugins

• Drag and Drop

• Sortables

• Tabbed Navigation

• Sortable Tables

• And hundreds more...

Page 19: jQuery - Boston Ruby Group (July '07)

• Very active mailing list

• 108+ Posts/Day

• 2500+ Members

• Technorati: 22+ blog posts per day

Community

Page 20: jQuery - Boston Ruby Group (July '07)

Who uses jQuery?

• IBM

• MSNBC

• Technorati

• Drupal

• Wordpress

• Digg

• many others...

Page 21: jQuery - Boston Ruby Group (July '07)

Books

• 4 Books in Progress:

• Learning jQuery (Packt)

• jQuery Reference (Packt)

• jQuery Quickly (Manning)

• Designing with jQuery (Manning)

Page 22: jQuery - Boston Ruby Group (July '07)

Future

• “jQuery UI”

• Themeing

• Internationalization

Page 23: jQuery - Boston Ruby Group (July '07)

Using jQuery with Rails

• Most jQuery use is non different than normal jQuery use

• $(“div”).remove(); // works on any site

• Considerations come in with dealing with Ajax requests

Page 24: jQuery - Boston Ruby Group (July '07)

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

Page 25: jQuery - Boston Ruby Group (July '07)

Ajax with jQuery

• Typically, you’ll reply with an HTML chunk

• jQuery handles this gracefully:$(“#stuff”).load(“controller/action”);

Page 26: jQuery - Boston Ruby Group (July '07)

Reply with JSON

• Sometimes you’ll want to reply with a data structure for further manipulation

• ActiveRecord objects have to_json serialization built in:"{attributes:{foo: \"bar\", baz: \"bat\"}}"

• Or you can get specific: @ar_object.attributes.to_json #=> "{foo: \"bar\", baz: \"bat\"}"

Page 27: jQuery - Boston Ruby Group (July '07)

Where does the JS go?

• jQuery dictates good separation of content, style, and behavior

• Put all your code in application.js

• jQuery and Prototype can play nicely together:jQuery.noConflict();jQuery(function($){ /* your code */ });

• More info in the docs

Page 28: jQuery - Boston Ruby Group (July '07)

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

Page 29: jQuery - Boston Ruby Group (July '07)

RJS v. jQuery-style

• With RJS:<a href=”#” id=’myid’ onclick=”return someFunction(‘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>

Page 30: jQuery - Boston Ruby Group (July '07)

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:$("a.remote").click(function() { $(this.rel).load(this.href) })

Page 31: jQuery - Boston Ruby Group (July '07)

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 => "remote", :rel => update)end

• You could then call it as:remote_link "Update Baz", {:controller => "foo", :action => "bar"}, "#baz"

Page 32: jQuery - Boston Ruby Group (July '07)

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/

Page 33: jQuery - Boston Ruby Group (July '07)

jquery.comdocs.jquery.com - jquery.com/plugins

More:

visualjquery.comlearningjquery.com