jQuery + Ruby
Rapid Development on Steroids

Ruby
• Fun
• Elegant
• Rapid

jQuery
• Fun
• Elegant
• Rapid

Me
• On jQuery Team
• On Merb Team
• Use jQuery and Rails Daily
• Love Rapid Development

Me
• On jQuery Team
• On Merb Team
• Use jQuery and Rails Daily
• Love Rapid Development

Rails
• Simplifies:
• HTML Generation
• Database access
• API creation for your web app
• Routing

Rails
• Tries but fails at:
• Nontrivial Ajax
• Nontrivial in-browser JS (i.e. form validation)
• Shielding you from JavaScript
• Key: You can’t avoid JS through Rails

Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and smaller than Rails

Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and smaller than Rails

MVC Web Frameworks
• Models encapsulate database information
• Controllers route and process requests
• Views provide the raw HTML that goes to the browser
• Rails uses helpers to simplify views
• Rails helpers spit out JS
• We want to be unobtrusive

Our Approach to JS in MVC
• Typically, JS represents site-wide behavior (like CSS)
• Common markup format represents behavior
• <table class=\"sortable\">
• Use Ruby to generate markup
• Use CSS to apply style to markup
• Use jQuery to apply behavior to markup
• Profit!

Our Approach to JS in MVC
• Typically, JS represents site-wide behavior (like CSS)
• Common markup format represents behavior
• <table class=\"sortable\">
• Use Ruby to generate markup
• Use CSS to apply style to markup
• Use jQuery to apply behavior to markup
• Profit!

Helpers in Rails
• Generate Markup
• Not JavaScript def sortable_table(&block)
html = content_tag(:table, :class => \"sortable\") do
• capture(&block)
Remember: end
concat(html, block.binding)
• concat
end
• capture

Helpers in Merb
• Generate Markup
Very similar to Rails
• Not JavaScript
def sortable_table(&block)
• Remember: html = tag(:table, capture(&block), :class => \"sortable\")
concat(html, block.binding)
end
• concat
• capture

Mixing it Up
• We have consistent markup <table class='sortable'>
produced by our framework <thead>
<tr><th>Name</th><th>Price</th></tr>
</thead>
<tbody>
<tr>
<td>Bones: The Complete Second Season</td>
<td>$40.99</td>
</tr>
<tr>
<td>Heroes: Season 1</td>
<td>$39.99</td>
</tr>
<tr>
<td>Charmed: The Final Season</td>
<td>$32.99</td>
</tr>
</tbody>
</table>

jQuery Code
• We have consistent
markup produced by our
framework
• We can add behavior
$(\"table.sortable\").tablesorter();

Markup Code
• We have consistent <table class='sortable' metaData='{cssHeader: \"sort-header\",
cssAsc: \"sort-header-asc\", cssDesc: \"sort-header-desc\"}'>
markup produced by our <thead>
framework <tr><th>Name</th><th>Price</th></tr>
</thead>
<tbody>
• <tr>
We can add behavior <td>Bones: The Complete Second Season</td>
<td>$40.99</td>
• </tr>
We can support options <tr>
<td>Heroes: Season 1</td>
<td>$39.99</td>
</tr>
<tr>
<td>Charmed: The Final Season</td>
<td>$32.99</td>
</tr>
</tbody>
</table>

Markup Code
• We have consistent
class Hash
markup produced by our def metadata
framework data = self.map {|k,v| \"#{k.js_case}:#{v.metadata}\" }
\"{#{data.join(\",\")}}\"
end
• end
We can add behavior
class String
• def metadata
We can support options \"'#{self}'\"
end
• Via some glue code def js_case
r = camelcase
r[0] = r[0].chr.downcase
r
end
end

Markup Code
• We have consistent
markup produced by our
framework
class Symbol
def js_case
• We can add behavior self.to_s.js_case
end
end
• We can support options
class Object
def metadata
• Via some glue code \"#{self.to_s}\"
end
end

Rails Helper
• We have consistent
markup produced by our
framework
• We can add behavior def sortable_table(options = {}, &block)
html = content_tag(:table, :class => \"sortable\",
• :metadata => options.meta_data) do
We can support options capture(&block)
end
•
end
Via some glue code
• And a Rails helper

Merb Helper
• We have consistent
markup produced by our
framework
• We can add behavior
def sortable_table(options = {}, &block)
html = tag(:table, capture(&block),
• We can support options :class => \"sortable\", :meta_data => options.metadata)
concat(html, block.binding)
end
• Via some glue code
• And a Rails helper
• Or a Merb Helper

Rails Helper
• We have consistent
markup produced by our
framework
• We can add behavior
$(\"table.sortable\").each(function() {
• We can support options $(this).tablesorter($(this).metadata());
});
• Via a Rails helper
• Or a Merb Helper
• And with a quick jQuery
change...

Simple Ajax Loader

Markup
• Use everything at your disposal
<a href=\"ajax_url\" rel=\"#target\" class=\"remote\">
Load it In
</a>

jQuery
• Use everything at your disposal
• Write jQuery Code
$(\"a.remote\").click(function() {
$(this.rel).load(this.href);
});

Rails Helper
• Use everything at your disposal
• Write jQuery code
• Write a Rails helper def remote_link(contents, url, update = nil)
url = url_for(url) if url.is_a?(Hash)
options = {:href => url}
options.merge!(:rel => update) if update
content_tag(:a, contents, options)
end

Merb Helper
• Use everything at your disposal
• Write jQuery code
• Write a Rails helper def remote_link(contents, url_param, update = nil)
url = url_param.is_a?(Hash) ? url(url_param) : url
• options = {:href => url}
Or a Merb Helper options.merge!(:rel => update) if update
tag(:a, contents, options)
end

Use Helper
• Use everything at your disposal
• Write jQuery code
• Write a Rails helper
<%= remote_link(\"Hey lookey here\", :controller =>
\"foo\", :action => \"foo\") %>
• Or a Merb Helper
<%= remote_link(\"Hey lookey here\", {:controller =>
\"foo\", :action => \"foo\"}, \"#update\") %>
• Profit!

Some Caveats
• Relative URLs won't work like you expect
• Check out the <base> tag
• Application.js can get pretty big
• Check out Cascading JavaScript
• http://www.redhillonrails.org/
#cascading_javascripts

The <base> Tag
• <base href=\"http://mysite.com/foo/bar\" />
• Makes all URLs (including JS) operate relative to it
• Needs to be before any other URLs are specified (top of head)
• With routing:
• /foo/bar/1 and /foo/bar should have the same relative URL
• Browsers interpret the /1 as a new directory

The <base> Tag
• <base href=\"http://mysite.com/foo/bar\" />
• Makes all URLs (including JS) operate relative to it
• Needs to be before any other URLs are specified (top of head)
• With routing:
• /foo/bar/1 and /foo/bar should have the same relative URL
• Browsers interpret the /1 as a new directory
Rails Merb
<%= tag(:base, :href => url_for(:id => \"\") %> <%= self_closing_tag(:base, :href => url(:id => \"\"))%>
#=> <base href=\"/controller/action/\" />

Summary
• Rails/Merb don't have built-in helpers for jQuery

Summary
• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy

Summary
• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
• Writing Ruby helpers is easy

Summary
• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
• Writing Ruby helpers is easy
• Making Ruby frameworks work with jQuery is easy

Summary
• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
• Writing Ruby helpers is easy
• Making Ruby frameworks work with jQuery is easy
• We need to share our helpers and jQuery
code

Demo and Some Code
• http://10.0.2.6:4000/jquery_camp
• Give me a sec to demo it before creating things ;)