0
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 Ja...
Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and sm...
Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and sm...
MVC Web Frameworks
• Models encapsulate database information
• Controllers route and process requests
• Views provide the ...
Our Approach to JS in MVC
• Typically, JS represents site-wide behavior (like CSS)
• Common markup format represents behav...
Our Approach to JS in MVC
• Typically, JS represents site-wide behavior (like CSS)
• Common markup format represents behav...
Helpers in Rails

•   Generate Markup

•   Not JavaScript    def sortable_table(&block)
                        html = con...
Helpers in Merb

•   Generate Markup
                      Very similar to Rails
•   Not JavaScript
                      ...
Mixing it Up
•   We have consistent markup   <table class='sortable'>
    produced by our framework     <thead>
          ...
jQuery Code
•   We have consistent
    markup produced by our
    framework

•   We can add behavior

                    ...
Markup Code
•   We have consistent       <table class='sortable' metaData='{cssHeader: quot;sort-headerquot;,
            ...
Markup Code
•   We have consistent
                             class Hash
    markup produced by our     def metadata
   ...
Markup Code
•   We have consistent
    markup produced by our
    framework
                             class Symbol
    ...
Rails Helper
•   We have consistent
    markup produced by our
    framework

•   We can add behavior      def sortable_ta...
Merb Helper
•   We have consistent
    markup produced by our
    framework

•   We can add behavior
                     ...
Rails Helper
•   We have consistent
    markup produced by our
    framework

•   We can add behavior
                    ...
Simple Ajax Loader
Markup
•   Use everything at your disposal




                               <a href=quot;ajax_urlquot; rel=quot;#targetq...
jQuery
•   Use everything at your disposal

•   Write jQuery Code


                               $(quot;a.remotequot;).c...
Rails Helper
•   Use everything at your disposal

•   Write jQuery code

•   Write a Rails helper       def remote_link(co...
Merb Helper
•   Use everything at your disposal

•   Write jQuery code

•   Write a Rails helper       def remote_link(con...
Use Helper
•   Use everything at your disposal

•   Write jQuery code

•   Write a Rails helper
                          ...
Some Caveats
• Relative URLs won't work like you expect
 • Check out the <base> tag

• Application.js can get pretty big
 ...
The <base> Tag
• <base href=quot;http://mysite.com/foo/barquot; />
• Makes all URLs (including JS) operate relative to it
...
The <base> Tag
        • <base href=quot;http://mysite.com/foo/barquot; />
        • Makes all URLs (including JS) operate...
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 ...
Summary
• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
• Writing Ruby helpers is easy
• Making Ruby ...
Demo and Some Code

• http://10.0.2.6:4000/jquery_camp
• Give me a sec to demo it before creating things ;)
Upcoming SlideShare
Loading in...5
×

jQuery and Ruby Web Frameworks

16,350

Published on

A presentation on using jQuery with Ruby web frameworks.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,350
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
295
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery and Ruby Web Frameworks"

  1. 1. jQuery + Ruby Rapid Development on Steroids
  2. 2. Ruby • Fun • Elegant • Rapid
  3. 3. jQuery • Fun • Elegant • Rapid
  4. 4. Me • On jQuery Team • On Merb Team • Use jQuery and Rails Daily • Love Rapid Development
  5. 5. Me • On jQuery Team • On Merb Team • Use jQuery and Rails Daily • Love Rapid Development
  6. 6. Rails • Simplifies: • HTML Generation • Database access • API creation for your web app • Routing
  7. 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. 8. Merb • New Ruby Web Framework • ORM Agnostic • JS Framework Agnostic • Similar controller/routing to Rails • Faster and smaller than Rails
  9. 9. Merb • New Ruby Web Framework • ORM Agnostic • JS Framework Agnostic • Similar controller/routing to Rails • Faster and smaller than Rails
  10. 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. 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. 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. 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. 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. 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. 16. jQuery Code • We have consistent markup produced by our framework • We can add behavior $(quot;table.sortablequot;).tablesorter();
  17. 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. 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. 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. 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. 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. 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. 23. Simple Ajax Loader
  24. 24. Markup • Use everything at your disposal <a href=quot;ajax_urlquot; rel=quot;#targetquot; class=quot;remotequot;> Load it In </a>
  25. 25. jQuery • Use everything at your disposal • Write jQuery Code $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href); });
  26. 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. 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. 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. 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. 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. 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. 32. Summary • Rails/Merb don't have built-in helpers for jQuery
  33. 33. Summary • Rails/Merb don't have built-in helpers for jQuery • jQuery is easy
  34. 34. Summary • Rails/Merb don't have built-in helpers for jQuery • jQuery is easy • Writing Ruby helpers is easy
  35. 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. 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. 37. Demo and Some Code • http://10.0.2.6:4000/jquery_camp • Give me a sec to demo it before creating things ;)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×