jQuery and Ruby Web Frameworks
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery and Ruby Web Frameworks

  • 20,394 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
20,394
On Slideshare
20,326
From Embeds
68
Number of Embeds
4

Actions

Shares
Downloads
293
Comments
0
Likes
9

Embeds 68

http://www.slideshare.net 54
http://www.linkedin.com 11
https://www.linkedin.com 2
http://paper.li 1

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 ;)