jQuery and Ruby Web Frameworks
-
Upload
yehuda-katz -
Category
Technology
-
view
16.016 -
download
0
description
Transcript of jQuery and Ruby Web Frameworks
![Page 1: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/1.jpg)
jQuery + RubyRapid Development on Steroids
![Page 2: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/2.jpg)
Ruby
• Fun
• Elegant
• Rapid
![Page 3: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/3.jpg)
jQuery
• Fun
• Elegant
• Rapid
![Page 4: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/4.jpg)
Me
• On jQuery Team
• On Merb Team
• Use jQuery and Rails Daily
• Love Rapid Development
![Page 5: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/5.jpg)
Me
• On jQuery Team
• On Merb Team
• Use jQuery and Rails Daily
• Love Rapid Development
![Page 6: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/6.jpg)
Rails
• Simplifies:
• HTML Generation
• Database access
• API creation for your web app
• Routing
![Page 7: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/7.jpg)
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
![Page 8: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/8.jpg)
Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and smaller than Rails
![Page 9: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/9.jpg)
Merb
• New Ruby Web Framework
• ORM Agnostic
• JS Framework Agnostic
• Similar controller/routing to Rails
• Faster and smaller than Rails
![Page 10: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/10.jpg)
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
![Page 11: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/11.jpg)
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!
![Page 12: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/12.jpg)
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!
![Page 13: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/13.jpg)
Helpers in Rails
• Generate Markup
• Not JavaScript
• Remember:
• concat
• capture
def sortable_table(&block) html = content_tag(:table, :class => "sortable") do capture(&block) end concat(html, block.binding)end
![Page 14: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/14.jpg)
Helpers in Merb
• Generate Markup
• Not JavaScript
• Remember:
• concat
• capture
def sortable_table(&block) html = tag(:table, capture(&block), :class => "sortable") concat(html, block.binding)end
Very similar to Rails
![Page 15: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/15.jpg)
Mixing it Up• We have consistent markup
produced by our framework<table class='sortable'> <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>
![Page 16: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/16.jpg)
$("table.sortable").tablesorter();
jQuery Code• We have consistent
markup produced by our framework
• We can add behavior
![Page 17: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/17.jpg)
<table class='sortable' metaData='{cssHeader: "sort-header", cssAsc: "sort-header-asc", cssDesc: "sort-header-desc"}'> <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>
Markup Code• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
![Page 18: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/18.jpg)
class Hash def metadata data = self.map {|k,v| "#{k.js_case}:#{v.metadata}" } "{#{data.join(",")}}" endend
class String def metadata "'#{self}'" end def js_case r = camelcase r[0] = r[0].chr.downcase r endend
Markup Code• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
• Via some glue code
![Page 19: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/19.jpg)
class Symbol def js_case self.to_s.js_case endend
class Object def metadata "#{self.to_s}" endend
Markup Code• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
• Via some glue code
![Page 20: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/20.jpg)
def sortable_table(options = {}, &block) html = content_tag(:table, :class => "sortable", :metadata => options.meta_data) do capture(&block) endend
Rails Helper• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
• Via some glue code
• And a Rails helper
![Page 21: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/21.jpg)
def sortable_table(options = {}, &block) html = tag(:table, capture(&block), :class => "sortable", :meta_data => options.metadata) concat(html, block.binding)end
Merb Helper• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
• Via some glue code
• And a Rails helper
• Or a Merb Helper
![Page 22: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/22.jpg)
$("table.sortable").each(function() { $(this).tablesorter($(this).metadata()); });
Rails Helper• We have consistent
markup produced by our framework
• We can add behavior
• We can support options
• Via a Rails helper
• Or a Merb Helper
• And with a quick jQuery change...
![Page 23: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/23.jpg)
Simple Ajax Loader
![Page 24: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/24.jpg)
<a href="ajax_url" rel="#target" class="remote"> Load it In</a>
Markup• Use everything at your disposal
![Page 25: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/25.jpg)
$("a.remote").click(function() { $(this.rel).load(this.href);});
jQuery• Use everything at your disposal
• Write jQuery Code
![Page 26: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/26.jpg)
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
Rails Helper• Use everything at your disposal
• Write jQuery code
• Write a Rails helper
![Page 27: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/27.jpg)
def remote_link(contents, url_param, update = nil) url = url_param.is_a?(Hash) ? url(url_param) : url options = {:href => url} options.merge!(:rel => update) if update tag(:a, contents, options)end
Merb Helper• Use everything at your disposal
• Write jQuery code
• Write a Rails helper
• Or a Merb Helper
![Page 28: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/28.jpg)
<%= remote_link("Hey lookey here", :controller => "foo", :action => "foo") %>
<%= remote_link("Hey lookey here", {:controller => "foo", :action => "foo"}, "#update") %>
Use Helper• Use everything at your disposal
• Write jQuery code
• Write a Rails helper
• Or a Merb Helper
• Profit!
![Page 29: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/29.jpg)
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
![Page 30: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/30.jpg)
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
![Page 31: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/31.jpg)
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
<%= tag(:base, :href => url_for(:id => "") %> <%= self_closing_tag(:base, :href => url(:id => ""))%>#=> <base href="/controller/action/" />
Rails Merb
![Page 32: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/32.jpg)
Summary• Rails/Merb don't have built-in helpers for jQuery
![Page 33: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/33.jpg)
Summary• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
![Page 34: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/34.jpg)
Summary• Rails/Merb don't have built-in helpers for jQuery
• jQuery is easy
• Writing Ruby helpers is easy
![Page 35: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/35.jpg)
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
![Page 36: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/36.jpg)
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
![Page 37: jQuery and Ruby Web Frameworks](https://reader037.fdocuments.net/reader037/viewer/2022103016/5559301dd8b42a543d8b48cc/html5/thumbnails/37.jpg)
Demo and Some Code
• http://10.0.2.6:4000/jquery_camp
• Give me a sec to demo it before creating things ;)