DRYing up your views

A talk about view logic I gave at the Ruby en Rails 2009 conference in Amsterdam on the 30th of October that year.

Transcript

1. Dax Huiberts dax.huiberts@holder.nl Best practices and useful tools DRYing up your views
2. • My first big presentation • So if I screw up... please be merciful.
3. Overview • Basics • Haml • Formtastic • Advanced techniques • Block Helper • Presenters
4. Basics What you should already do with plain Rails
5. Some basics • Keep your logic out of your views • HTML-escape your user output • Don’t mix javascript inside your views • Use partials for recurring HTML structures
6. Keep your logic out of your views
7. Keep your logic out of your views Don’t do this: <% main_categories = Category.find :all, :conditions => "parent_id IS NULL" %>
8. Keep your logic out of your views Don’t do this: <% main_categories = Category.find :all, :conditions => "parent_id IS NULL" %> Better: <% main_categories = Category.main %>
9. Keep your logic out of your views Don’t do this: <% main_categories = Category.find :all, :conditions => "parent_id IS NULL" %> Better: <% main_categories = Category.main %> Best: def main_categories @main_categories ||= Category.main end
10. HTML-escape your user output
11. HTML-escape your user output Hi, my name is: <script>window.location='http://bit.ly/4kb77v'</script>
12. HTML-escape your user output Hi, my name is: <script>window.location='http://bit.ly/4kb77v'</script> <%= link_to @user.name, @user %> Results in: <a href="/users/666"><script>window.location='http://bit.ly/4kb77v'</ script></a> SHIT!!!
13. HTML-escape your user output Hi, my name is: <script>window.location='http://bit.ly/4kb77v'</script> <%= link_to h(@user.name), @user %> Results in: <a href="/users/666">&lt;script&gt;window.location='http://bit.ly/4kb77v'&lt;/ script&gt;</a> GOTCHA!!!
14. Don’t mix javascript inside your views
15. Don’t mix javascript inside your views <a href="/users/666" class="delete">&lt;script&gt;window.location='http://bit.ly/4kb77v'&lt;/ script&gt;</a> is much better than: <a onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);f.submit();return false;" href="/users/ 666">&lt;script&gt;window.location='http://bit.ly/4kb77v'&lt;/script&gt;</ a>
16. Use partials for recurring HTML structures Your view: <div class="tl"> <div class="tr"> <div class="bl"> <div class="br"> <%= @post.body %> </div> </div> </div> </div>
17. Use partials for recurring HTML structures Your PARTIAL: <div class="tl"> <div class="tr"> <div class="bl"> <div class="br"> <%= data %> </div> </div> </div> </div>
18. Use partials for recurring HTML structures Your PARTIAL: <div class="tl"> <div class="tr"> <div class="bl"> <div class="br"> <%= data %> </div> </div> </div> </div> Calling it with: <%= render :partial => "shared/rounded_box", :locals => {:data => @post.body} %>
19. Use partials for recurring HTML structures Your helper method: def rounded_box &block data = capture(&block) concat(render(:partial => "shared/rounded_box", :locals => {:data => concat()})) end
20. Use partials for recurring HTML structures Your helper method: def rounded_box &block data = capture(&block) concat(render(:partial => "shared/rounded_box", :locals => {:data => concat()})) end And your view: <% rounded_box do %> <%= @post.body %> <% end %>
21. Haml Beautiful HTML
22. Haml • Started using it in summer 2007 • Hate it => get used to it => loved it • Closer to the CSS domain • Markup should be beautiful • http://haml-lang.com/
23. Haml ERB: <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> UGLY!!!
24. Haml Haml: #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio BEAUTIFUL!!!
25. Haml Haml: %strong= item.title
26. Haml Haml: %strong= item.title ERB: <strong><%= item.title %></strong>
27. Haml Haml: %strong{:class => "code", :id => "message"} Hello, World! ERB: <strong class="code" id="message">Hello, World!</strong>
28. Haml Haml: %strong.code#message Hello, World! ERB: <strong class="code" id="message">Hello, World!</strong>
29. Haml summary • Haml is awesome!!! • Everybody should use it! • O’RLY? • YEAH’RLY!
30. Sass Also take a look at Sass! Syntactically awesome stylesheets: http://sass-lang.com/
31. Formtastic Semantically rich and accessible forms
32. Formtastic • Forms are friggin’ boring to code • Semantically rich & accessible • Automatic support for: • Labeling • Error reporting • Extensive markup possibilities • http://github.com/justinfrench/formtastic
33. Formtastic form_for: <% form_for @user do |form| %> <div> <%= form.label :title %> <%= form.text_field :title %> </div> <div> <%= form.label :body %> <%= form.text_area :body %> </div> <div> <%= submit_tag "Save" %> </div> <% end %> EWWW!!!
34. Formtastic semantic_form_for: <% semantic_form_for @user do |form| %> <%= form.inputs :title, :body %> <%= form.buttons :commit %> <% end %> YAY!!!
35. Formtastic semantic_form_for with Haml: - semantic_form_for @user do |form| = form.inputs :title, :body = form.buttons :commit WHOOHOO!!!
36. Formtastic summary • Cleans up your code dramatically! • Best use of forms yet!
37. Advanced Techniques When your projects get bigger
38. Block helpers When DRYing up views gets in the way
39. Block helpers • When partials start to contain to much options • When partials look more like ruby than HTML • http://github.com/markevans/block_helpers
40. Block helpers Calling a partial: <%= render :partial => "videos/video", :locals => {:video => video, :hide_description => true, :style_tag => :li }%>
41. Block helpers Calling a helper method: <%= render_video video, :hide_description => true, :style_tag => :li %>
42. Block helpers Complex partial: <% hide_thumbnail ||= true hide_description ||= true header_tag ||= :h2 style_tag ||= :div css_class ||= 'video' %> <% content_tag style_tag, :class => css_class do %> <%= content_tag header_tag, video.title %> <%= image_tag(video.thumbnail_url, :class => 'thumb') unless hide_thumbnail %> <%= '<p>%s</p>' % h(video.description) unless hide_description %> <% end %> Hmmm.....
43. Block helpers Block helper (part 1 of 2): module VideosHelper class VideoBlock < BlockHelpers::Base DEFAULT_OPTIONS = {:hide_thumbnail => true, :hide_description => true, :style_tag => :div, :header_tag => :h2, :css_class => "video"} attr_accessor :video, :options def initialize(video, options = {}) @video = video @options = DEFAULT_OPTIONS.merge(options) end ...
44. Block helpers Block helper (part 2 of 2): ... def display header = content_tag(options[:header_tag], video.title) thumbnail = image_tag(video.thumbnail, :class => "thumb") unless options[:hide_thumbnail] description = content_tag(:p, video.description) unless options[:hide_description] data = header + thumbnail.to_s + description.to_s content_tag(options[:style_tag], :class => options[:css_class], data) end end end
45. Block helpers Your ERB: <%= video_block video, :hide_description => true, :style_tag => :li %> MMMMM!!!!!
46. Block helpers summary • Shift from ERB to Ruby • Don’t pretend it’s a partial anymore • More structured & more maintainable over time
47. Presenters Bridging the gap between models and controllers/views
48. Presenters • Apply the adapter (wrapper) pattern to combine controller logic with domain logic • Keep logic in it’s rightful place. • Prevent models to contain controller logic • Warning: It’s still a concept!
49. Presenters Wrong ERB: <% if current_user && (current_user.is_admin? || (@topic.creator == current_user && !@topic.locked)) %> <%= link_to "Edit topic", @topic %> <% end %> WRONG!!!
50. Presenters Presenter file: class TopicPresenter < Presenter::Base def can_edit? is_admin? || (is_owner? && !locked) end def can_lock? is_admin? end def can_reply? current_user && !locked end ... ... def is_owner? creator == current_user end private def is_admin? current_user && current_user.is_admin? end end
51. Presenters Controller action: def show @topic = presenter(Topic.find(params[:id])) end
52. Presenters Correct ERB: <%= link_to "Edit topic", @topic if @topic.can_edit? %> DAMN RIGHT!!!
53. Presenters summary • Like I said, it’s still a concept • Can clean up complex partials a lot • Keeps models the way they should be • More info at: http://www.htmltimes.com/presenters-in- Ruby-on-Rails-applications.php or http://bit.ly/vUlv
54. Conclusion • It saved precious bits on your hard drive • Higher level of abstraction • Views get more readable, thus better maintainable • Beware: Big shift from ERB/Haml to Ruby • But, It’s a joy writing views again!
55. That’s it!
56. Questios?