SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
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 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
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
• Profit!
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!
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;)
                        concat(html, block.binding)
                      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
•   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
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
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
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
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...
Simple Ajax Loader
Markup
•   Use everything at your disposal




                               <a href=quot;ajax_urlquot; rel=quot;#targetquot; class=quot;remotequot;>
                                 Load it In
                               </a>
jQuery
•   Use everything at your disposal

•   Write jQuery Code


                               $(quot;a.remotequot;).click(function() {
                                 $(this.rel).load(this.href);
                               });
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
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
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!
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 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
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; />
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 frameworks work with jQuery is easy
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
Demo and Some Code

• http://10.0.2.6:4000/jquery_camp
• Give me a sec to demo it before creating things ;)

Contenu connexe

Tendances

JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesBorisMoore
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsAviran Cohen
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)Clément Wehrung
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 
Ajax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdooAjax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdooFabian Jakobs
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3Federico Galassi
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workAlbino Tonnina
 
Data presentation with dust js technologies backing linkedin
Data presentation with dust js   technologies backing linkedinData presentation with dust js   technologies backing linkedin
Data presentation with dust js technologies backing linkedinRuhaim Izmeth
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014James Bonham
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
 

Tendances (20)

JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
Ajax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdooAjax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdoo
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3Please Don't Touch the Slow Parts V3
Please Don't Touch the Slow Parts V3
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
Data presentation with dust js technologies backing linkedin
Data presentation with dust js   technologies backing linkedinData presentation with dust js   technologies backing linkedin
Data presentation with dust js technologies backing linkedin
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
Javascript by geetanjali
Javascript by geetanjaliJavascript by geetanjali
Javascript by geetanjali
 

Similaire à jQuery and Ruby Web Frameworks

TDC 2012 - Patterns e Anti-Patterns em Ruby
TDC 2012 - Patterns e Anti-Patterns em RubyTDC 2012 - Patterns e Anti-Patterns em Ruby
TDC 2012 - Patterns e Anti-Patterns em RubyFabio Akita
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryQConLondon2008
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous MerbMatt Todd
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
Hacking with ruby2ruby
Hacking with ruby2rubyHacking with ruby2ruby
Hacking with ruby2rubyMarc Chung
 
jQuery Presentation to Rails Developers
jQuery Presentation to Rails DevelopersjQuery Presentation to Rails Developers
jQuery Presentation to Rails DevelopersYehuda Katz
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland
 
Get Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsGet Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsDavey Shafik
 
An Introduction To jQuery
An Introduction To jQueryAn Introduction To jQuery
An Introduction To jQueryAndy Gibson
 
Ruby Isn't Just About Rails
Ruby Isn't Just About RailsRuby Isn't Just About Rails
Ruby Isn't Just About RailsAdam Wiggins
 
Scala + WattzOn, sitting in a tree....
Scala + WattzOn, sitting in a tree....Scala + WattzOn, sitting in a tree....
Scala + WattzOn, sitting in a tree....Raffi Krikorian
 
All I Need to Know I Learned by Writing My Own Web Framework
All I Need to Know I Learned by Writing My Own Web FrameworkAll I Need to Know I Learned by Writing My Own Web Framework
All I Need to Know I Learned by Writing My Own Web FrameworkBen Scofield
 
Quick Intro To JRuby
Quick Intro To JRubyQuick Intro To JRuby
Quick Intro To JRubyFrederic Jean
 
Rails2 Pr
Rails2 PrRails2 Pr
Rails2 Prxibbar
 
Rails 3.1 Asset Pipeline
Rails 3.1 Asset PipelineRails 3.1 Asset Pipeline
Rails 3.1 Asset PipelineJames Daniels
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Introzhang tao
 

Similaire à jQuery and Ruby Web Frameworks (20)

TDC 2012 - Patterns e Anti-Patterns em Ruby
TDC 2012 - Patterns e Anti-Patterns em RubyTDC 2012 - Patterns e Anti-Patterns em Ruby
TDC 2012 - Patterns e Anti-Patterns em Ruby
 
DataMapper
DataMapperDataMapper
DataMapper
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
Hacking with ruby2ruby
Hacking with ruby2rubyHacking with ruby2ruby
Hacking with ruby2ruby
 
jQuery Presentation to Rails Developers
jQuery Presentation to Rails DevelopersjQuery Presentation to Rails Developers
jQuery Presentation to Rails Developers
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
 
Get Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsGet Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP Streams
 
An Introduction To jQuery
An Introduction To jQueryAn Introduction To jQuery
An Introduction To jQuery
 
Ruby Isn't Just About Rails
Ruby Isn't Just About RailsRuby Isn't Just About Rails
Ruby Isn't Just About Rails
 
Scala + WattzOn, sitting in a tree....
Scala + WattzOn, sitting in a tree....Scala + WattzOn, sitting in a tree....
Scala + WattzOn, sitting in a tree....
 
All I Need to Know I Learned by Writing My Own Web Framework
All I Need to Know I Learned by Writing My Own Web FrameworkAll I Need to Know I Learned by Writing My Own Web Framework
All I Need to Know I Learned by Writing My Own Web Framework
 
Quick Intro To JRuby
Quick Intro To JRubyQuick Intro To JRuby
Quick Intro To JRuby
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Rails2 Pr
Rails2 PrRails2 Pr
Rails2 Pr
 
Os Harris
Os HarrisOs Harris
Os Harris
 
Rails 3.1 Asset Pipeline
Rails 3.1 Asset PipelineRails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
 

Plus de Yehuda Katz

Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performanceYehuda Katz
 
Writing Fast Client-Side Code: Lessons Learned from SproutCore
Writing Fast Client-Side Code: Lessons Learned from SproutCoreWriting Fast Client-Side Code: Lessons Learned from SproutCore
Writing Fast Client-Side Code: Lessons Learned from SproutCoreYehuda Katz
 
SproutCore: Amber
SproutCore: AmberSproutCore: Amber
SproutCore: AmberYehuda Katz
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the FinishYehuda Katz
 
Organizing jQuery Projects Without OO
Organizing jQuery Projects Without OOOrganizing jQuery Projects Without OO
Organizing jQuery Projects Without OOYehuda Katz
 
Why You Shouldn't Write OO
Why You Shouldn't Write OO Why You Shouldn't Write OO
Why You Shouldn't Write OO Yehuda Katz
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overviewYehuda Katz
 
Making your oss project more like rails
Making your oss project more like railsMaking your oss project more like rails
Making your oss project more like railsYehuda Katz
 
Vaporware To Awesome
Vaporware To AwesomeVaporware To Awesome
Vaporware To AwesomeYehuda Katz
 
Merb Day Keynote
Merb Day KeynoteMerb Day Keynote
Merb Day KeynoteYehuda Katz
 
Merb Camp Keynote
Merb Camp KeynoteMerb Camp Keynote
Merb Camp KeynoteYehuda Katz
 

Plus de Yehuda Katz (14)

Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performance
 
Writing Fast Client-Side Code: Lessons Learned from SproutCore
Writing Fast Client-Side Code: Lessons Learned from SproutCoreWriting Fast Client-Side Code: Lessons Learned from SproutCore
Writing Fast Client-Side Code: Lessons Learned from SproutCore
 
SproutCore: Amber
SproutCore: AmberSproutCore: Amber
SproutCore: Amber
 
Rails 3: Dashing to the Finish
Rails 3: Dashing to the FinishRails 3: Dashing to the Finish
Rails 3: Dashing to the Finish
 
Organizing jQuery Projects Without OO
Organizing jQuery Projects Without OOOrganizing jQuery Projects Without OO
Organizing jQuery Projects Without OO
 
Why You Shouldn't Write OO
Why You Shouldn't Write OO Why You Shouldn't Write OO
Why You Shouldn't Write OO
 
Rails 3 overview
Rails 3 overviewRails 3 overview
Rails 3 overview
 
Making your oss project more like rails
Making your oss project more like railsMaking your oss project more like rails
Making your oss project more like rails
 
Vaporware To Awesome
Vaporware To AwesomeVaporware To Awesome
Vaporware To Awesome
 
Merb Day Keynote
Merb Day KeynoteMerb Day Keynote
Merb Day Keynote
 
Testing Merb
Testing MerbTesting Merb
Testing Merb
 
Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Merb Camp Keynote
Merb Camp KeynoteMerb Camp Keynote
Merb Camp Keynote
 
Merb
MerbMerb
Merb
 

Dernier

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 

Dernier (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 

jQuery and Ruby Web Frameworks

  • 1. jQuery + Ruby Rapid Development on Steroids
  • 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...
  • 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 ;)