SlideShare a Scribd company logo
1 of 26
Download to read offline
BUILDING WEB INTERFACES
       ON RAILS
       ihower@handlino.com
      Ruby Tuesday 2009/5/19
ABOUT ME
•           a.k.a ihower

    • http://ihower.idv.tw/blog/

    • http://twitter.com/ihower

•        Rails developer

    • http://handlino.com

    • http://registrano.com
AGENDA
• 1. some   useful helper technique

• 2. handicraft_helper   plugin

• 3. handicraft_ujs   plugin

• 4. some   UI design patterns implementation
EXAMPLE CODE
                 all demo code is here:

http://github.com/ihower/handicraft-interfaces
               1. download
               2. rake dev:build
               3. script/server
1. USEFUL HELPER
   TECHNIQUES
CONTENT_FOR
                                        # /layouts/application.html.erb
# foobar.html.erb
<p>fooooooooooooooooooo</p>     A       <html>
                                            <head>
<% content_for :page_javascript do %>
    <script type=quot;text/javascriptquot;>           B <%= yield :page_javascript %>
        ...     B
    </script>                             </head>
<% end %>                               <body>

<p>barrrrrrrrrrrrrrrrrr</p> A            A <%= yield %>

                                           <div id=”sidebar”>
                                               <%= yield :sidebar %>
                                           <div>
                                        </body>
                                        </html>
PASSING BLOCK PARAMETER
           Original version, we need a helper
<% link_to_remote some_helper(contact), :url => contact_path(contact), :method => :get %>




                                   My Want
             <% link_to_remote :url => contact_path(contact), :method => :get do %>
                 <span class=quot;picturequot;>
                     <%= image_tag contact.buddy_icon %>
                 </span>
                 <span class=quot;real-namequot;> <%= contact.full_name %></span>
                 <% if contact.friendly? %>
                   <span class=quot;is-friendquot;>is your friend.</span>
                 <% else %>
                    <span class=quot;no-friendquot;>is not your friend.</span>
                 <% end -%>
                 <span class=quot;nicknamequot;><%= contact.nickname %></span>
             <% end -%>
PASSING BLOCK PARAMETER
        Use block_given?, concat and capture(&block)
  # provide block suppoet
  def link_to_remote(*args, &block)
     if block_given?
        options      = args.first || {}
        html_options = args.second

        concat( link_to_function(capture(&block), remote_function(options), html_options ||
options.delete(:html)) )
      else
        name         = args.first
        options      = args.second || {}
        html_options = args.third

        link_to_function(name, remote_function(options), html_options ||
options.delete(:html))
    end
  end
CONTENT_TAG
                 Ruby Style, less line of code
<% if some_condition %>
 <h1>foobar</h1>                <%= content_tag(quot;h1quot;, quot;foobarquot;) if some_condition %>
<% end %>




             HTML attributes as helper options
      def some_helper( title, options = {} )
          content_tag(quot;pquot;,
              content_tag(quot;spanquot;, title, options), :class => 'p_classquot;)
      end


      <p class=quot;p_classquot;><span class=quot;foobarquot;>test</span></p>
KNOW RAILS HELPERS

• READ   Rails helpers source code

• /actionpack-x.y.z/lib/action_view/helpers/*
2. HANDICRAFT HELPER
       PLUGIN
   handlino’s favorite rails helpers
PROBLEM AND SOLUTION
• Weneed complex/logistic HTML in helper, but write a lot
 HTML string + operators are painful.

• Myearly solution: use markaby plugin, but it’s slow and yet
 another dependency.

• currentsolution idea from Composite&Builder pattern
 (Refactoring to Patterns book), it’s simple, component and fast.
COMPOSITE PATTERN
class TagNode
   include ActionView::Helpers::TagHelper

   def initialize(name, options = {})
                                                   USAGE:
     @name = name.to_s
                                                   table   = TagNode.new('table', table_tag_options)
     @attributes = options
                                                   table   << thead = TagNode.new(:thead)
     @children = []
                                                   thead   << tr = TagNode.new(:tr, :class => 'odd')
   end
                                                   thead   << tr = TagNode.new(:tr, :class => 'even')

   def to_s
                                                   table << tbody = TagNode.new('tbody')
     value = @children.each { |c| c.to_s }.join
                                                   tbody << tr = TagNode.new('tr', :class => cycle(quot;quot;,quot;oddquot;) )
     content_tag(@name, value.to_s, @attributes)
   end
                                                   return table.to_s

   def <<(tag_node)
     @children << tag_node
   end
 end
LIVE DEMO

• render_menu

• render_table   (column-oriented table)

• breadcrumb
3. HANDICRAFT UJS
     PLUGIN
a jQuery replacement for Ajax on Rails
IDEA 1: JRAILS
 http://ennerchi.com/projects/jrails
IDEA 2: UNOBTRUSIVE
 http://blog.lawrencepit.com/2008/09/04/unobtrusive-jquery-rails/


                                                                       Separation
                                                                    of functionality
                                                                     from content
MY WANT
• jQuery    (write less, do more)

• RJS   (in controller, because it keep controller ruby style)

• RESTful   (Rails way)

• unobtrusive    and accessible (hate inline js everywhere)
INLINE JS EVERYWHERE
<%= link_to_remote 'ajax', :url => person_path(person), :method => :get %>

<a href=quot;#quot; onclick=quot;new Ajax.Request('/people/1', {asynchronous:true,
evalScripts:true, method:'get', parameters:'authenticity_token=' +
encodeURIComponent('uwdvZFNiqzfd/iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return
false;quot;>ajax</a>




<% remote_form_for @person, person_path(@person), :html => { :method => :put } do |f| %>

<form action=quot;/people/1quot; id=quot;edit_person_1quot; method=quot;postquot; onsubmit=quot;new Ajax.Request('/
people/1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)});
return false;quot;>
HANDICRAFT WAY
<%= link_to 'ajax', person_path(person), :class => quot;h-getquot; %>

<a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a>




<% form_for @person, person_path(@person), :html => { :method => :put, :class => 'h-put' }
do |f| %>

<form action=quot;/people/1quot; class=quot;h-putquot; id=quot;edit_person_1quot; method=quot;postquot;>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/
people/1', {asynchronous:true,
evalScripts:true, method:'get',
parameters:'authenticity_token=' +            <a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a>
encodeURIComponent('uwdvZFNiqzfd/
iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return
false;quot;>ajax</a>




<form action=quot;/people/1quot; id=quot;edit_person_1quot;
method=quot;postquot; onsubmit=quot;new Ajax.Request('/
people/1', {asynchronous:true,
                                              <form action=quot;/people/1quot; class=quot;h-putquot;
evalScripts:true,
parameters:Form.serialize(this)}); return     id=quot;edit_person_1quot; method=quot;postquot;>
false;quot;>
HOW
• JQuery   1.3 live binding

• jQuery   metadata plugin

• jQuery   form plugin

• jQuery   version RJS (extract from jRails plugin)
LIVE DEMO

• h-get, h-post, h-put, h-delete

•{   update: ‘content’ }

•{   callback: ‘handle_json’ }

•{   confirm: ‘Are you sure? }
4. UI DESIGN PATTERNS
   IMPLEMENTATION
IDEA
http://designingwebinterfaces.com/explore
LIVE DEMO
• Single-Field   Inline Edit

• Multi-Field   Inline Edit

• Group   Edit

• Sortable   List

More Related Content

What's hot

td_mxc_rubyrails_shin
td_mxc_rubyrails_shintd_mxc_rubyrails_shin
td_mxc_rubyrails_shintutorialsruby
 
Practical Protocol-Oriented-Programming
Practical Protocol-Oriented-ProgrammingPractical Protocol-Oriented-Programming
Practical Protocol-Oriented-ProgrammingNatasha Murashev
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIVisual Engineering
 
Using the Tooling API to Generate Apex SOAP Web Service Clients
Using the Tooling API to Generate Apex SOAP Web Service ClientsUsing the Tooling API to Generate Apex SOAP Web Service Clients
Using the Tooling API to Generate Apex SOAP Web Service ClientsDaniel Ballinger
 
Apex Code Analysis Using the Tooling API and Canvas
Apex Code Analysis Using the Tooling API and CanvasApex Code Analysis Using the Tooling API and Canvas
Apex Code Analysis Using the Tooling API and CanvasSalesforce Developers
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIVisual Engineering
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web ApplicationYakov Fain
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceParashuram N
 
Workshop 25: React Native - Components
Workshop 25: React Native - ComponentsWorkshop 25: React Native - Components
Workshop 25: React Native - ComponentsVisual Engineering
 
Breaking the limits_of_page_objects
Breaking the limits_of_page_objectsBreaking the limits_of_page_objects
Breaking the limits_of_page_objectsRobert Bossek
 
Developing New Widgets for your Views in Owl
Developing New Widgets for your Views in OwlDeveloping New Widgets for your Views in Owl
Developing New Widgets for your Views in OwlOdoo
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionVisual Engineering
 
How to perform debounce in react
How to perform debounce in reactHow to perform debounce in react
How to perform debounce in reactBOSC Tech Labs
 
Presentation technico-commercial-ruby-on-rails
Presentation technico-commercial-ruby-on-railsPresentation technico-commercial-ruby-on-rails
Presentation technico-commercial-ruby-on-railsNovelys
 

What's hot (20)

td_mxc_rubyrails_shin
td_mxc_rubyrails_shintd_mxc_rubyrails_shin
td_mxc_rubyrails_shin
 
Practical Protocol-Oriented-Programming
Practical Protocol-Oriented-ProgrammingPractical Protocol-Oriented-Programming
Practical Protocol-Oriented-Programming
 
RicoLiveGrid
RicoLiveGridRicoLiveGrid
RicoLiveGrid
 
Rails3 changesets
Rails3 changesetsRails3 changesets
Rails3 changesets
 
Workshop 17: EmberJS parte II
Workshop 17: EmberJS parte IIWorkshop 17: EmberJS parte II
Workshop 17: EmberJS parte II
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
Using the Tooling API to Generate Apex SOAP Web Service Clients
Using the Tooling API to Generate Apex SOAP Web Service ClientsUsing the Tooling API to Generate Apex SOAP Web Service Clients
Using the Tooling API to Generate Apex SOAP Web Service Clients
 
Day seven
Day sevenDay seven
Day seven
 
MVS: An angular MVC
MVS: An angular MVCMVS: An angular MVC
MVS: An angular MVC
 
Apex Code Analysis Using the Tooling API and Canvas
Apex Code Analysis Using the Tooling API and CanvasApex Code Analysis Using the Tooling API and Canvas
Apex Code Analysis Using the Tooling API and Canvas
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
Workshop 25: React Native - Components
Workshop 25: React Native - ComponentsWorkshop 25: React Native - Components
Workshop 25: React Native - Components
 
Breaking the limits_of_page_objects
Breaking the limits_of_page_objectsBreaking the limits_of_page_objects
Breaking the limits_of_page_objects
 
Developing New Widgets for your Views in Owl
Developing New Widgets for your Views in OwlDeveloping New Widgets for your Views in Owl
Developing New Widgets for your Views in Owl
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Laravel tips-2019-04
Laravel tips-2019-04Laravel tips-2019-04
Laravel tips-2019-04
 
How to perform debounce in react
How to perform debounce in reactHow to perform debounce in react
How to perform debounce in react
 
Presentation technico-commercial-ruby-on-rails
Presentation technico-commercial-ruby-on-railsPresentation technico-commercial-ruby-on-rails
Presentation technico-commercial-ruby-on-rails
 

Viewers also liked

Boost your productivity!: Productivity tips for rails developers - Lightning ...
Boost your productivity!: Productivity tips for rails developers - Lightning ...Boost your productivity!: Productivity tips for rails developers - Lightning ...
Boost your productivity!: Productivity tips for rails developers - Lightning ...Alberto Perdomo
 
How to Fix Your LinkedIn Headline
How to Fix Your LinkedIn HeadlineHow to Fix Your LinkedIn Headline
How to Fix Your LinkedIn HeadlineBruce Kasanoff
 
那些 Functional Programming 教我的事
那些 Functional Programming 教我的事那些 Functional Programming 教我的事
那些 Functional Programming 教我的事Wen-Tien Chang
 
Checklist: How to Succeed on LinkedIn
Checklist: How to Succeed on LinkedInChecklist: How to Succeed on LinkedIn
Checklist: How to Succeed on LinkedInBruce Kasanoff
 
10 Ruby and Rails Pro Tips
10 Ruby and Rails Pro Tips10 Ruby and Rails Pro Tips
10 Ruby and Rails Pro TipsMichel Pigassou
 

Viewers also liked (7)

RESTful Rails2
RESTful Rails2RESTful Rails2
RESTful Rails2
 
Ruby 1.9
Ruby 1.9Ruby 1.9
Ruby 1.9
 
Boost your productivity!: Productivity tips for rails developers - Lightning ...
Boost your productivity!: Productivity tips for rails developers - Lightning ...Boost your productivity!: Productivity tips for rails developers - Lightning ...
Boost your productivity!: Productivity tips for rails developers - Lightning ...
 
How to Fix Your LinkedIn Headline
How to Fix Your LinkedIn HeadlineHow to Fix Your LinkedIn Headline
How to Fix Your LinkedIn Headline
 
那些 Functional Programming 教我的事
那些 Functional Programming 教我的事那些 Functional Programming 教我的事
那些 Functional Programming 教我的事
 
Checklist: How to Succeed on LinkedIn
Checklist: How to Succeed on LinkedInChecklist: How to Succeed on LinkedIn
Checklist: How to Succeed on LinkedIn
 
10 Ruby and Rails Pro Tips
10 Ruby and Rails Pro Tips10 Ruby and Rails Pro Tips
10 Ruby and Rails Pro Tips
 

Similar to Building Web Interface On Rails

What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?brynary
 
Rails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity PresentationRails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity Presentationrailsconf
 
Haml & Sass presentation
Haml & Sass presentationHaml & Sass presentation
Haml & Sass presentationbryanbibat
 
Page Caching Resurrected
Page Caching ResurrectedPage Caching Resurrected
Page Caching ResurrectedBen Scofield
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax componentsIgnacio Coloma
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rob
 
WordPress Standardized Loop API
WordPress Standardized Loop APIWordPress Standardized Loop API
WordPress Standardized Loop APIChris Jean
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2tonvanbart
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsJohn Brunswick
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialYi-Ting Cheng
 
merb.intro
merb.intromerb.intro
merb.intropjb3
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼Sukjoon Kim
 
User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!Greg Bell
 

Similar to Building Web Interface On Rails (20)

Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Front End on Rails
Front End on RailsFront End on Rails
Front End on Rails
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
Rails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity PresentationRails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity Presentation
 
Haml & Sass presentation
Haml & Sass presentationHaml & Sass presentation
Haml & Sass presentation
 
Page Caching Resurrected
Page Caching ResurrectedPage Caching Resurrected
Page Caching Resurrected
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008
 
WordPress Standardized Loop API
WordPress Standardized Loop APIWordPress Standardized Loop API
WordPress Standardized Loop API
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on Rails
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Jicc teaching rails
Jicc teaching railsJicc teaching rails
Jicc teaching rails
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
 
merb.intro
merb.intromerb.intro
merb.intro
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
JSP Custom Tags
JSP Custom TagsJSP Custom Tags
JSP Custom Tags
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼
 
User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!
 

More from Wen-Tien Chang

⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨Wen-Tien Chang
 
Ruby Rails 老司機帶飛
Ruby Rails 老司機帶飛Ruby Rails 老司機帶飛
Ruby Rails 老司機帶飛Wen-Tien Chang
 
A brief introduction to Machine Learning
A brief introduction to Machine LearningA brief introduction to Machine Learning
A brief introduction to Machine LearningWen-Tien Chang
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2Wen-Tien Chang
 
RSpec on Rails Tutorial
RSpec on Rails TutorialRSpec on Rails Tutorial
RSpec on Rails TutorialWen-Tien Chang
 
ALPHAhackathon: How to collaborate
ALPHAhackathon: How to collaborateALPHAhackathon: How to collaborate
ALPHAhackathon: How to collaborateWen-Tien Chang
 
Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀Wen-Tien Chang
 
Exception Handling: Designing Robust Software in Ruby (with presentation note)
Exception Handling: Designing Robust Software in Ruby (with presentation note)Exception Handling: Designing Robust Software in Ruby (with presentation note)
Exception Handling: Designing Robust Software in Ruby (with presentation note)Wen-Tien Chang
 
Exception Handling: Designing Robust Software in Ruby
Exception Handling: Designing Robust Software in RubyException Handling: Designing Robust Software in Ruby
Exception Handling: Designing Robust Software in RubyWen-Tien Chang
 
從 Classes 到 Objects: 那些 OOP 教我的事
從 Classes 到 Objects: 那些 OOP 教我的事從 Classes 到 Objects: 那些 OOP 教我的事
從 Classes 到 Objects: 那些 OOP 教我的事Wen-Tien Chang
 
Yet another introduction to Git - from the bottom up
Yet another introduction to Git - from the bottom upYet another introduction to Git - from the bottom up
Yet another introduction to Git - from the bottom upWen-Tien Chang
 
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩Wen-Tien Chang
 
Ruby 程式語言綜覽簡介
Ruby 程式語言綜覽簡介Ruby 程式語言綜覽簡介
Ruby 程式語言綜覽簡介Wen-Tien Chang
 
A brief introduction to SPDY - 邁向 HTTP/2.0
A brief introduction to SPDY - 邁向 HTTP/2.0A brief introduction to SPDY - 邁向 HTTP/2.0
A brief introduction to SPDY - 邁向 HTTP/2.0Wen-Tien Chang
 
RubyConf Taiwan 2012 Opening & Closing
RubyConf Taiwan 2012 Opening & ClosingRubyConf Taiwan 2012 Opening & Closing
RubyConf Taiwan 2012 Opening & ClosingWen-Tien Chang
 
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean StartupWen-Tien Chang
 
RubyConf Taiwan 2011 Opening & Closing
RubyConf Taiwan 2011 Opening & ClosingRubyConf Taiwan 2011 Opening & Closing
RubyConf Taiwan 2011 Opening & ClosingWen-Tien Chang
 
BDD style Unit Testing
BDD style Unit TestingBDD style Unit Testing
BDD style Unit TestingWen-Tien Chang
 

More from Wen-Tien Chang (20)

⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨
 
Ruby Rails 老司機帶飛
Ruby Rails 老司機帶飛Ruby Rails 老司機帶飛
Ruby Rails 老司機帶飛
 
A brief introduction to Machine Learning
A brief introduction to Machine LearningA brief introduction to Machine Learning
A brief introduction to Machine Learning
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
 
RSpec on Rails Tutorial
RSpec on Rails TutorialRSpec on Rails Tutorial
RSpec on Rails Tutorial
 
RSpec & TDD Tutorial
RSpec & TDD TutorialRSpec & TDD Tutorial
RSpec & TDD Tutorial
 
ALPHAhackathon: How to collaborate
ALPHAhackathon: How to collaborateALPHAhackathon: How to collaborate
ALPHAhackathon: How to collaborate
 
Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀Git 版本控制系統 -- 從微觀到宏觀
Git 版本控制系統 -- 從微觀到宏觀
 
Exception Handling: Designing Robust Software in Ruby (with presentation note)
Exception Handling: Designing Robust Software in Ruby (with presentation note)Exception Handling: Designing Robust Software in Ruby (with presentation note)
Exception Handling: Designing Robust Software in Ruby (with presentation note)
 
Exception Handling: Designing Robust Software in Ruby
Exception Handling: Designing Robust Software in RubyException Handling: Designing Robust Software in Ruby
Exception Handling: Designing Robust Software in Ruby
 
從 Classes 到 Objects: 那些 OOP 教我的事
從 Classes 到 Objects: 那些 OOP 教我的事從 Classes 到 Objects: 那些 OOP 教我的事
從 Classes 到 Objects: 那些 OOP 教我的事
 
Yet another introduction to Git - from the bottom up
Yet another introduction to Git - from the bottom upYet another introduction to Git - from the bottom up
Yet another introduction to Git - from the bottom up
 
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
 
Ruby 程式語言綜覽簡介
Ruby 程式語言綜覽簡介Ruby 程式語言綜覽簡介
Ruby 程式語言綜覽簡介
 
A brief introduction to SPDY - 邁向 HTTP/2.0
A brief introduction to SPDY - 邁向 HTTP/2.0A brief introduction to SPDY - 邁向 HTTP/2.0
A brief introduction to SPDY - 邁向 HTTP/2.0
 
RubyConf Taiwan 2012 Opening & Closing
RubyConf Taiwan 2012 Opening & ClosingRubyConf Taiwan 2012 Opening & Closing
RubyConf Taiwan 2012 Opening & Closing
 
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup
從 Scrum 到 Kanban: 為什麼 Scrum 不適合 Lean Startup
 
Git Tutorial 教學
Git Tutorial 教學Git Tutorial 教學
Git Tutorial 教學
 
RubyConf Taiwan 2011 Opening & Closing
RubyConf Taiwan 2011 Opening & ClosingRubyConf Taiwan 2011 Opening & Closing
RubyConf Taiwan 2011 Opening & Closing
 
BDD style Unit Testing
BDD style Unit TestingBDD style Unit Testing
BDD style Unit Testing
 

Recently uploaded

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 

Recently uploaded (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Building Web Interface On Rails

  • 1. BUILDING WEB INTERFACES ON RAILS ihower@handlino.com Ruby Tuesday 2009/5/19
  • 2. ABOUT ME • a.k.a ihower • http://ihower.idv.tw/blog/ • http://twitter.com/ihower • Rails developer • http://handlino.com • http://registrano.com
  • 3. AGENDA • 1. some useful helper technique • 2. handicraft_helper plugin • 3. handicraft_ujs plugin • 4. some UI design patterns implementation
  • 4. EXAMPLE CODE all demo code is here: http://github.com/ihower/handicraft-interfaces 1. download 2. rake dev:build 3. script/server
  • 5. 1. USEFUL HELPER TECHNIQUES
  • 6. CONTENT_FOR # /layouts/application.html.erb # foobar.html.erb <p>fooooooooooooooooooo</p> A <html> <head> <% content_for :page_javascript do %> <script type=quot;text/javascriptquot;> B <%= yield :page_javascript %> ... B </script> </head> <% end %> <body> <p>barrrrrrrrrrrrrrrrrr</p> A A <%= yield %> <div id=”sidebar”> <%= yield :sidebar %> <div> </body> </html>
  • 7. PASSING BLOCK PARAMETER Original version, we need a helper <% link_to_remote some_helper(contact), :url => contact_path(contact), :method => :get %> My Want <% link_to_remote :url => contact_path(contact), :method => :get do %> <span class=quot;picturequot;> <%= image_tag contact.buddy_icon %> </span> <span class=quot;real-namequot;> <%= contact.full_name %></span> <% if contact.friendly? %> <span class=quot;is-friendquot;>is your friend.</span> <% else %> <span class=quot;no-friendquot;>is not your friend.</span> <% end -%> <span class=quot;nicknamequot;><%= contact.nickname %></span> <% end -%>
  • 8. PASSING BLOCK PARAMETER Use block_given?, concat and capture(&block) # provide block suppoet def link_to_remote(*args, &block) if block_given? options = args.first || {} html_options = args.second concat( link_to_function(capture(&block), remote_function(options), html_options || options.delete(:html)) ) else name = args.first options = args.second || {} html_options = args.third link_to_function(name, remote_function(options), html_options || options.delete(:html)) end end
  • 9. CONTENT_TAG Ruby Style, less line of code <% if some_condition %> <h1>foobar</h1> <%= content_tag(quot;h1quot;, quot;foobarquot;) if some_condition %> <% end %> HTML attributes as helper options def some_helper( title, options = {} ) content_tag(quot;pquot;, content_tag(quot;spanquot;, title, options), :class => 'p_classquot;) end <p class=quot;p_classquot;><span class=quot;foobarquot;>test</span></p>
  • 10. KNOW RAILS HELPERS • READ Rails helpers source code • /actionpack-x.y.z/lib/action_view/helpers/*
  • 11. 2. HANDICRAFT HELPER PLUGIN handlino’s favorite rails helpers
  • 12. PROBLEM AND SOLUTION • Weneed complex/logistic HTML in helper, but write a lot HTML string + operators are painful. • Myearly solution: use markaby plugin, but it’s slow and yet another dependency. • currentsolution idea from Composite&Builder pattern (Refactoring to Patterns book), it’s simple, component and fast.
  • 13. COMPOSITE PATTERN class TagNode include ActionView::Helpers::TagHelper def initialize(name, options = {}) USAGE: @name = name.to_s table = TagNode.new('table', table_tag_options) @attributes = options table << thead = TagNode.new(:thead) @children = [] thead << tr = TagNode.new(:tr, :class => 'odd') end thead << tr = TagNode.new(:tr, :class => 'even') def to_s table << tbody = TagNode.new('tbody') value = @children.each { |c| c.to_s }.join tbody << tr = TagNode.new('tr', :class => cycle(quot;quot;,quot;oddquot;) ) content_tag(@name, value.to_s, @attributes) end return table.to_s def <<(tag_node) @children << tag_node end end
  • 14. LIVE DEMO • render_menu • render_table (column-oriented table) • breadcrumb
  • 15. 3. HANDICRAFT UJS PLUGIN a jQuery replacement for Ajax on Rails
  • 16. IDEA 1: JRAILS http://ennerchi.com/projects/jrails
  • 17. IDEA 2: UNOBTRUSIVE http://blog.lawrencepit.com/2008/09/04/unobtrusive-jquery-rails/ Separation of functionality from content
  • 18. MY WANT • jQuery (write less, do more) • RJS (in controller, because it keep controller ruby style) • RESTful (Rails way) • unobtrusive and accessible (hate inline js everywhere)
  • 19. INLINE JS EVERYWHERE <%= link_to_remote 'ajax', :url => person_path(person), :method => :get %> <a href=quot;#quot; onclick=quot;new Ajax.Request('/people/1', {asynchronous:true, evalScripts:true, method:'get', parameters:'authenticity_token=' + encodeURIComponent('uwdvZFNiqzfd/iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return false;quot;>ajax</a> <% remote_form_for @person, person_path(@person), :html => { :method => :put } do |f| %> <form action=quot;/people/1quot; id=quot;edit_person_1quot; method=quot;postquot; onsubmit=quot;new Ajax.Request('/ people/1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;quot;>
  • 20. HANDICRAFT WAY <%= link_to 'ajax', person_path(person), :class => quot;h-getquot; %> <a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a> <% form_for @person, person_path(@person), :html => { :method => :put, :class => 'h-put' } do |f| %> <form action=quot;/people/1quot; class=quot;h-putquot; id=quot;edit_person_1quot; method=quot;postquot;>
  • 21. <a href=quot;#quot; onclick=quot;new Ajax.Request('/ people/1', {asynchronous:true, evalScripts:true, method:'get', parameters:'authenticity_token=' + <a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a> encodeURIComponent('uwdvZFNiqzfd/ iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return false;quot;>ajax</a> <form action=quot;/people/1quot; id=quot;edit_person_1quot; method=quot;postquot; onsubmit=quot;new Ajax.Request('/ people/1', {asynchronous:true, <form action=quot;/people/1quot; class=quot;h-putquot; evalScripts:true, parameters:Form.serialize(this)}); return id=quot;edit_person_1quot; method=quot;postquot;> false;quot;>
  • 22. HOW • JQuery 1.3 live binding • jQuery metadata plugin • jQuery form plugin • jQuery version RJS (extract from jRails plugin)
  • 23. LIVE DEMO • h-get, h-post, h-put, h-delete •{ update: ‘content’ } •{ callback: ‘handle_json’ } •{ confirm: ‘Are you sure? }
  • 24. 4. UI DESIGN PATTERNS IMPLEMENTATION
  • 26. LIVE DEMO • Single-Field Inline Edit • Multi-Field Inline Edit • Group Edit • Sortable List