jQuery and Ruby Web Frameworks

  • 15,543 views
Uploaded on

A presentation on using jQuery with Ruby web frameworks.

A presentation on using jQuery with Ruby web frameworks.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
15,543
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
293
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery + Ruby Rapid Development on Steroids
  • 2. Ruby • Fun • Elegant • Rapid
  • 3. jQuery • Fun • Elegant • Rapid
  • 4. Me • On jQuery Team • On Merb Team • Use jQuery and Rails Daily • Love Rapid Development
  • 5. Me • On jQuery Team • On Merb Team • Use jQuery and Rails Daily • Love Rapid Development
  • 6. Rails • Simplifies: • HTML Generation • Database access • API creation for your web app • Routing
  • 7. 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
  • 8. Merb • New Ruby Web Framework • ORM Agnostic • JS Framework Agnostic • Similar controller/routing to Rails • Faster and smaller than Rails
  • 9. Merb • New Ruby Web Framework • ORM Agnostic • JS Framework Agnostic • Similar controller/routing to Rails • Faster and smaller than Rails
  • 10. 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
  • 11. 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 • Profit!
  • 12. 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 • Profit!
  • 13. 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
  • 14. Helpers in Merb • Generate Markup Very similar to Rails • Not JavaScript def sortable_table(&block) • Remember: html = tag(:table, capture(&block), :class => quot;sortablequot;) concat(html, block.binding) end • concat • capture
  • 15. 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>
  • 16. jQuery Code • We have consistent markup produced by our framework • We can add behavior $(quot;table.sortablequot;).tablesorter();
  • 17. 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>
  • 18. Markup Code • We have consistent 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
  • 19. 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 quot;#{self.to_s}quot; end end
  • 20. Rails Helper • We have consistent markup produced by our 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
  • 21. 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 => quot;sortablequot;, :meta_data => options.metadata) concat(html, block.binding) end • Via some glue code • And a Rails helper • Or a Merb Helper
  • 22. Rails Helper • We have consistent markup produced by our framework • We can add behavior $(quot;table.sortablequot;).each(function() { • We can support options $(this).tablesorter($(this).metadata()); }); • Via a Rails helper • Or a Merb Helper • And with a quick jQuery change...
  • 23. Simple Ajax Loader
  • 24. Markup • Use everything at your disposal <a href=quot;ajax_urlquot; rel=quot;#targetquot; class=quot;remotequot;> Load it In </a>
  • 25. jQuery • Use everything at your disposal • Write jQuery Code $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href); });
  • 26. 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
  • 27. 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
  • 28. Use Helper • Use everything at your disposal • Write jQuery code • Write a Rails helper <%= remote_link(quot;Hey lookey herequot;, :controller => quot;fooquot;, :action => quot;fooquot;) %> • Or a Merb Helper <%= remote_link(quot;Hey lookey herequot;, {:controller => quot;fooquot;, :action => quot;fooquot;}, quot;#updatequot;) %> • Profit!
  • 29. 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
  • 30. 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 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
  • 31. 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 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 => quot;quot;) %> <%= self_closing_tag(:base, :href => url(:id => quot;quot;))%> #=> <base href=quot;/controller/action/quot; />
  • 32. Summary • Rails/Merb don't have built-in helpers for jQuery
  • 33. Summary • Rails/Merb don't have built-in helpers for jQuery • jQuery is easy
  • 34. Summary • Rails/Merb don't have built-in helpers for jQuery • jQuery is easy • Writing Ruby helpers is easy
  • 35. 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
  • 36. 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
  • 37. Demo and Some Code • http://10.0.2.6:4000/jquery_camp • Give me a sec to demo it before creating things ;)