1. Advanced Views with Erector
A builder view framework
Jeff Dean

2. ERB views kinda suck

3. Make you work more

4. No encapsulation

5. Refactoring can be hard

6. We need something that...

7. Requires less work

8. Respects encapsulation

9. Is testable in isolation

10. Erector to the rescue!

11. Views are classes

12. Views are classes
• Modular decomposition
• Inheritance (nested layouts)
• Consistent semantics

13. Views are classes
class Views::Articles::Show < Erector::RailsWidget
def content
div :class => "content" do
p "Hello <script> World!", :class => "sidebar"
end
end
end

14. Does the right thing

15. Does the right thing
• Escapes HTML
• Auto-closes tags
• You control indenting and whitespace

16. Does the right thing
class Views::Articles::Show < Erector::RailsWidget
def content
div :class => "content" do
p "Hello <script> World!", :class => "sidebar"
end
end
end
# <div class="content">
# <p class="sidebar">Hello &lt;script&gt; World!</p>
# </div>

17. ERB Refactoring

18. <!-- app/views/articles/show.html.erb -->
<%=h truncate(article.title, :length => 10) %>

19. <!-- app/views/articles/show.html.erb -->
<%=h display_name(article) %>
# app/helpers/articles.rb
def display_name(article)
truncate(article.title, :length => 10)
end

20. <!-- app/views/articles/show.html.erb -->
<%=h article_display_name(article) %>
# app/helpers/articles.rb
def article_display_name(article)
truncate(article.title, :length => 10)
end

21. <!-- app/views/articles/show.html.erb -->
<%=h article_display_name(article) %>
# app/helpers/articles.rb
def article_display_name(article)
truncate(article.title, :length => 10)
end

22. <!-- app/views/articles/show.html.erb -->
<%= article_display_name(article) %>
# app/helpers/articles.rb
def article_display_name(article)
content_tag :span,
h(truncate(article.title, :length => 10)),
:title => article.title
end

23. <!-- app/views/articles/show.html.erb -->
<%= article_display_name(article) %>
# app/helpers/articles.rb
def article_display_name(article)
content_tag :span,
h(truncate(article.title, :length => 10)),
:title => article.title
end

24. <!-- app/views/articles/show.html.erb -->
<%= article_display_name(article) %>
# app/helpers/articles.rb
def article_display_name(article)
content_tag :span,
h(truncate(article.title, :length => 10)),
:title => article.title
end

25. <!-- app/views/articles/show.html.erb -->
<%= render("articles/title", :title => article) %>
<!-- app/views/_title.html.erb -->
<span title="<%= article.title %>">
<%=h truncate(article.title, :length => 10) %>
</span>

26. <!-- app/views/articles/show.html.erb -->
<%= render("articles/title", :title => article) %>
<!-- app/views/_title.html.erb -->
<span title="<%= article.title %>">
<%=h truncate(article.title, :length => 10) %>
</span>

27. Erector Refactoring

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. # 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

30. # 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

31. # 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

32. # 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

33. # app/views/articles/show.rb
class Views::Articles::Show < Views::Articles::Base
def content
display_name
end
end
# 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

34. # app/views/articles/show.rb
class Views::Articles::Show < Views::Articles::Base
def content
display_name
end
end
# 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

35. # app/views/articles/show.rb
class Views::Articles::Show < Views::Articles::Base
def content
display_name
end
end
# 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

37. What’s next?

38. more rails helpers

39. better performance

40. rails 3

41. erector.rubyforge.org
github.com/pivotal/erector
jdean@pivotallabs.com

42. Questions