Your SlideShare is downloading. ×
0
Advanced Views with Erector A builder view framework Jeff Dean
ERB views kinda suck
Make you work more
No encapsulation
Refactoring can be hard
We need something that...
Requires less work
Respects encapsulation
Is testable in isolation
Erector to the rescue!
Views are classes
Views are classes <ul><li>Modular decomposition </li></ul><ul><li>Inheritance (nested layouts) </li></ul><ul><li>Consisten...
Views are classes <ul><li>class  Views::Articles::Show < Erector::RailsWidget </li></ul><ul><li>def   content   div  :clas...
Does the right thing
Does the right thing <ul><li>Escapes HTML </li></ul><ul><li>Auto-closes tags </li></ul><ul><li>You control indenting and w...
Does the right thing <ul><li>class  Views::Articles::Show < Erector::RailsWidget   def   content   div  :class  =>  &quot;...
ERB Refactoring
<ul><li><!-- app/views/articles/show.html.erb --> <%=h truncate(article.title,  :length  =>  10 ) %> </li></ul>
<ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h display_name(article) %> </li></ul><ul><li># app/...
<ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h  article_display_name (article) %> </li></ul><ul>...
<ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h  article_display_name (article) %> </li></ul><ul>...
<ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/art...
<ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/art...
<ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/art...
<ul><li><!-- app/views/articles/show.html.erb --> <%=  render ( &quot;articles/title&quot; ,  :title  => article) %> </li>...
<ul><li><!-- app/views/articles/show.html.erb --> <%=  render ( &quot;articles/title&quot; ,  :title  => article) %> </li>...
Erector Refactoring
# app/views/articles/show.rb class  Views::Articles::Show < Erector::RailsWidget   def   content   text  do   truncate  @a...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Erector::RailsWidget   def   content   display_name   ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Erector::RailsWidget   def   content   display_name   ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Erector::RailsWidget   def   content   display_name   ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Erector::RailsWidget   def   content   display_name   ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Views::Articles::Base   def   content   display_name  ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Views::Articles::Base   def   content   display_name  ...
<ul><li># app/views/articles/show.rb class  Views::Articles::Show < Views::Articles::Base   def   content   display_name  ...
 
What’s next?
more rails helpers
better performance
rails 3
erector.rubyforge.org github.com/pivotal/erector [email_address] [email_address] [email_address] [email_address] [email_ad...
Questions
Upcoming SlideShare
Loading in...5
×

Advanced Views with Erector

1,770

Published on

Erector is a Ruby gem that implements the “builder” pattern for HTML generation. It can save developers time by encouraging more advanced reuse in views via composition and inheritance, terse syntax, auto-closing tags and default HTML-escaping of all output. It can serve as an alternate view technology in Rails.

Using Erector makes it easier to refactor complex views by using standard refactoring techniques such as extracting methods. In ERB you can only accomplish this by helpers or partials, each of which lives in separate files. Since every Erector widget is a class, you can factor out duplication more easily than you can with helpers or partials.

Because views are just Ruby classes, Erector allows for inherited (nested) layouts by default. As a security measure, all output is HTML-escaped by default and all HTML elements are closed automatically.

This talk was given by Jeff Dean at RailsConf 2009. http://en.oreilly.com/rails2009/public/schedule/detail/8587

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,770
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Advanced Views with Erector"

  1. 1. Advanced Views with Erector A builder view framework Jeff Dean
  2. 2. ERB views kinda suck
  3. 3. Make you work more
  4. 4. No encapsulation
  5. 5. Refactoring can be hard
  6. 6. We need something that...
  7. 7. Requires less work
  8. 8. Respects encapsulation
  9. 9. Is testable in isolation
  10. 10. Erector to the rescue!
  11. 11. Views are classes
  12. 12. Views are classes <ul><li>Modular decomposition </li></ul><ul><li>Inheritance (nested layouts) </li></ul><ul><li>Consistent semantics </li></ul>
  13. 13. Views are classes <ul><li>class Views::Articles::Show < Erector::RailsWidget </li></ul><ul><li>def content div :class => &quot;content&quot; do p &quot;Hello <script> World!&quot; , :class => &quot;sidebar&quot; end end </li></ul><ul><li>end </li></ul>
  14. 14. Does the right thing
  15. 15. Does the right thing <ul><li>Escapes HTML </li></ul><ul><li>Auto-closes tags </li></ul><ul><li>You control indenting and whitespace </li></ul>
  16. 16. Does the right thing <ul><li>class Views::Articles::Show < Erector::RailsWidget def content div :class => &quot;content&quot; do p &quot;Hello <script> World!&quot; , :class => &quot;sidebar&quot; end end end # <div class=&quot;content&quot;> # <p class=&quot;sidebar&quot;>Hello &lt;script&gt; World!</p> # </div> </li></ul>
  17. 17. ERB Refactoring
  18. 18. <ul><li><!-- app/views/articles/show.html.erb --> <%=h truncate(article.title, :length => 10 ) %> </li></ul>
  19. 19. <ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h display_name(article) %> </li></ul><ul><li># app/helpers/articles.rb def display_name (article) truncate(article.title, :length => 10 ) end </li></ul>
  20. 20. <ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h article_display_name (article) %> </li></ul><ul><li># app/helpers/articles.rb def article_display_name (article) truncate(article.title, :length => 10 ) end </li></ul>
  21. 21. <ul><li><!-- app/views/articles/show.html.erb --> </li></ul><ul><li><%=h article_display_name (article) %> </li></ul><ul><li># app/helpers/articles.rb def article_display_name (article) truncate(article.title, :length => 10 ) end </li></ul>
  22. 22. <ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/articles.rb def article_display_name (article) content_tag :span , h(truncate(article.title, :length => 10 )), :title => article.title end </li></ul>
  23. 23. <ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/articles.rb def article_display_name (article) content_tag :span , h(truncate(article.title, :length => 10 )), :title => article.title end </li></ul>
  24. 24. <ul><li><!-- app/views/articles/show.html.erb --> <%= article_display_name(article) %> </li></ul><ul><li># app/helpers/articles.rb def article_display_name (article) content_tag :span , h(truncate(article.title, :length => 10 )), :title => article.title end </li></ul>
  25. 25. <ul><li><!-- app/views/articles/show.html.erb --> <%= render ( &quot;articles/title&quot; , :title => article) %> </li></ul><ul><li><!-- app/views/_title.html.erb --> <span title= &quot;<%= article.title %>&quot; > <%=h truncate(article.title, :length => 10 ) %> </span> </li></ul>
  26. 26. <ul><li><!-- app/views/articles/show.html.erb --> <%= render ( &quot;articles/title&quot; , :title => article) %> </li></ul><ul><li><!-- app/views/_title.html.erb --> <span title= &quot;<%= article.title %>&quot; > <%=h truncate(article.title, :length => 10 ) %> </span> </li></ul>
  27. 27. Erector Refactoring
  28. 28. # app/views/articles/show.rb class Views::Articles::Show < Erector::RailsWidget def content text do truncate @article .title, :length => 10 end end end
  29. 29. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Erector::RailsWidget def content display_name end private def display_name text do truncate @article .title, :length => 10 end end end </li></ul>
  30. 30. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Erector::RailsWidget def content display_name end private def display_name text do truncate @article .title, :length => 10 end end end </li></ul>
  31. 31. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Erector::RailsWidget def content display_name end private def display_name span :title => @article .title do truncate @article .title, :length => 10 end end end </li></ul>
  32. 32. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Erector::RailsWidget def content display_name end private def display_name span :title => @article .title do truncate @article .title, :length => 10 end end end </li></ul>
  33. 33. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Views::Articles::Base def content display_name end end </li></ul><ul><li># app/views/articles/base.rb class Views::Articles::Base < Erector::RailsWidget def display_name span :title => @article .title do truncate @article .title, :length => 10 end end end </li></ul>
  34. 34. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Views::Articles::Base def content display_name end end </li></ul><ul><li># app/views/articles/base.rb class Views::Articles::Base < Erector::RailsWidget def display_name span :title => @article .title do truncate @article .title, :length => 10 end end end </li></ul>
  35. 35. <ul><li># app/views/articles/show.rb class Views::Articles::Show < Views::Articles::Base def content display_name end end </li></ul><ul><li># app/views/articles/base.rb class Views::Articles::Base < Erector::RailsWidget def display_name span :title => @article .title do truncate @article .title, :length => 10 end end end </li></ul>
  36. 37. What’s next?
  37. 38. more rails helpers
  38. 39. better performance
  39. 40. rails 3
  40. 41. erector.rubyforge.org github.com/pivotal/erector [email_address] [email_address] [email_address] [email_address] [email_address]
  41. 42. Questions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×