Intro
Phlex is a Ruby gem for building fast object-oriented views. Phlex actually supports HTML, SVG and CSV views, but we'll focus on HTML views to begin with.
Phlex views are composed of components. Components can be concrete, like a Header or Footer, or more abstract like a Button. They can be nested in other components or wrap a layout around your content.
Templates are described using basic Ruby constructs: methods, arguments and blocks, which directly correspond to HTML tags, attributes and content.
Building components in Ruby makes it possible to build powerful abstractions. For example, let’s build a Nav
component that allows developers to add items to the menu without needing to understand the underlying HTML.
class Nav < Phlex::HTML
def view_template(&)
nav(class: "main-nav") { ul(&) }
end
def item(text, href)
li(class: "nav-item") {
a(href:, class: "nav-link") { text }
}
end
end
Now we can use this Nav
component to build out our menu in our Header
component:
class Header < Phlex::HTML
def view_template
render Nav.new do |nav|
nav.item("Home", "/")
nav.item("About", "/about")
nav.item("Contact", "/contact")
end
end
end
Now the details of how to render a navigation menu are encapsulated in the Nav
class, and the Header
component can focus on the high-level structure.