Top Banner
Advanced Views with Erector A builder view framework Jeff Dean
42

Advanced Views with Erector

Dec 07, 2014

Download

Technology

Alex Chaffee

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
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Advanced Views with Erector

Advanced Views with Erector

A builder view framework

Jeff Dean

Page 2: Advanced Views with Erector

ERB views kinda suck

Page 3: Advanced Views with Erector

Make you work more

Page 4: Advanced Views with Erector

No encapsulation

Page 5: Advanced Views with Erector

Refactoring can be hard

Page 6: Advanced Views with Erector

We need something that...

Page 7: Advanced Views with Erector

Requires less work

Page 8: Advanced Views with Erector

Respects encapsulation

Page 9: Advanced Views with Erector

Is testable in isolation

Page 10: Advanced Views with Erector

Erector to the rescue!

Page 11: Advanced Views with Erector

Views are classes

Page 12: Advanced Views with Erector

Views are classes

•Modular decomposition

•Inheritance (nested layouts)

•Consistent semantics

Page 13: Advanced Views with Erector

Views are classesclass Views::Articles::Show < Erector::RailsWidget

def content div :class => "content" do p "Hello <script> World!", :class => "sidebar" end end

end

Page 14: Advanced Views with Erector

Does the right thing

Page 15: Advanced Views with Erector

Does the right thing

•Escapes HTML

•Auto-closes tags

•You control indenting and whitespace

Page 16: Advanced Views with Erector

Does the right thing

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

# <div class="content"># <p class="sidebar">Hello &lt;script&gt; World!</p># </div>

Page 17: Advanced Views with Erector

ERB Refactoring

Page 18: Advanced Views with Erector

<!-- app/views/articles/show.html.erb -->

<%=h truncate(article.title, :length => 10) %>

Page 19: Advanced Views with Erector

<!-- app/views/articles/show.html.erb -->

<%=h display_name(article) %>

# app/helpers/articles.rb

def display_name(article) truncate(article.title, :length => 10)end

Page 20: Advanced Views with Erector

<!-- 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

Page 21: Advanced Views with Erector

<!-- 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

Page 22: Advanced Views with Erector

<!-- 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.titleend

Page 23: Advanced Views with Erector

<!-- 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.titleend

Page 24: Advanced Views with Erector

<!-- 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.titleend

Page 25: Advanced Views with Erector

<!-- 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>

Page 26: Advanced Views with Erector

<!-- 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>

Page 27: Advanced Views with Erector

Erector Refactoring

Page 28: Advanced Views with Erector

# app/views/articles/show.rb

class Views::Articles::Show < Erector::RailsWidget def content text do truncate @article.title, :length => 10 end endend

Page 29: Advanced Views with Erector

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

Page 30: Advanced Views with Erector

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

Page 31: Advanced Views with Erector

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

Page 32: Advanced Views with Erector

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

Page 33: Advanced Views with Erector

# app/views/articles/show.rb

class Views::Articles::Show < Views::Articles::Base def content display_name endend

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

Page 34: Advanced Views with Erector

# app/views/articles/show.rb

class Views::Articles::Show < Views::Articles::Base def content display_name endend

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

Page 35: Advanced Views with Erector

# app/views/articles/show.rb

class Views::Articles::Show < Views::Articles::Base def content display_name endend

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

Page 36: Advanced Views with Erector
Page 37: Advanced Views with Erector

What’s next?

Page 38: Advanced Views with Erector

more rails helpers

Page 39: Advanced Views with Erector

better performance

Page 40: Advanced Views with Erector

rails 3

Page 41: Advanced Views with Erector

erector.rubyforge.org

github.com/pivotal/erector

[email protected]

Page 42: Advanced Views with Erector

Questions