jQuery and Ruby Web Frameworks

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

Rails
• Simpliﬁes:
• 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

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=quot;sortablequot;>
• Use Ruby to generate markup
• Use CSS to apply style to markup
• Use jQuery to apply behavior to markup
• Proﬁt!

Helpers in Rails

• Generate Markup

• Not JavaScript def sortable_table(&block)
html = content_tag(:table, :class => quot;sortablequot;) 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 => quot;sortablequot;)
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

$(quot;table.sortablequot;).tablesorter();

Markup Code
• We have consistent <table class='sortable' metaData='{cssHeader: quot;sort-headerquot;,
cssAsc: quot;sort-header-ascquot;, cssDesc: quot;sort-header-descquot;}'>
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
class Hash
markup produced by our def metadata
framework data = self.map {|k,v| quot;#{k.js_case}:#{v.metadata}quot; }
quot;{#{data.join(quot;,quot;)}}quot;
end

• end
We can add behavior
class String

• def metadata
We can support options quot;'#{self}'quot;
end

• Via some glue code def js_case
r = camelcase
r[0] = r[0].chr.downcase
r
end
end

Markup Code
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 quot;#{self.to_s}quot;
end
end

Rails Helper
framework

• We can add behavior def sortable_table(options = {}, &block)
html = content_tag(:table, :class => quot;sortablequot;,

• :metadata => options.meta_data) do
We can support options capture(&block)
end

•
end
Via some glue code

• And a Rails helper

Merb Helper
framework

def sortable_table(options = {}, &block)
html = tag(:table, capture(&block),

• We can support options :class => quot;sortablequot;, :meta_data => options.metadata)
end

• Via some glue code

• And a Rails helper

• Or a Merb Helper

Rails Helper
framework

$(quot;table.sortablequot;).each(function() {

• We can support options $(this).tablesorter($(this).metadata());
});

• Via a Rails helper


• And with a quick jQuery
change...

Markup
• Use everything at your disposal

<a href=quot;ajax_urlquot; rel=quot;#targetquot; class=quot;remotequot;>
Load it In
</a>

jQuery

• Write jQuery Code

$(quot;a.remotequot;).click(function() {
$(this.rel).load(this.href);
});

Rails Helper

• 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


• 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


• Write a Rails helper
<%= remote_link(quot;Hey lookey herequot;, :controller =>
quot;fooquot;, :action => quot;fooquot;) %>

<%= remote_link(quot;Hey lookey herequot;, {:controller =>
quot;fooquot;, :action => quot;fooquot;}, quot;#updatequot;) %>

• Proﬁt!

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=quot;http://mysite.com/foo/barquot; />
• Makes all URLs (including JS) operate relative to it
• Needs to be before any other URLs are speciﬁed (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=quot;http://mysite.com/foo/barquot; />
• Makes all URLs (including JS) operate relative to it
• Needs to be before any other URLs are speciﬁed (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 => quot;quot;) %> <%= self_closing_tag(:base, :href => url(:id => quot;quot;))%>
#=> <base href=quot;/controller/action/quot; />

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

Summary
• jQuery is easy

Summary
• jQuery is easy
• Writing Ruby helpers is easy

Summary
• jQuery is easy
• Making Ruby frameworks work with jQuery is easy

Summary
• jQuery 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 ;)

jQuery and Ruby Web Frameworks

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a jQuery and Ruby Web Frameworks

Semelhante a jQuery and Ruby Web Frameworks (20)

Mais de Yehuda Katz

Mais de Yehuda Katz (14)

Último

Último (20)

jQuery and Ruby Web Frameworks