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

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 

Recently uploaded (20)

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 

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