DEV Community

Roland Studer
Roland Studer

Posted on

Phlex is the ruby way to build your views

Phlex is an incredibly refreshing gem created by Joel Drapper. It introduces a remarkable way to build views in pure Ruby, as exemplified below:

class Nav < Phlex::HTML
  def template
    nav(class: "main-nav") {
      ul {
        li { a(href: "/") { "Home" } }
        li { a(href: "/about") { "About" } }
        li { a(href: "/contact") { "Contact" } }
Enter fullscreen mode Exit fullscreen mode

Initially, you may wonder: Why? Why would you do that when HTML is already perfectly readable? Using Ruby here seems odd, detached from the underlying HTML I want to write.

However, let's examine a typical partial, such as the one from the . search show page

The specific details aren't crucial; I'm only presenting an excerpt. Take note of the nested conditionals within.

<% @title = "search" %>
<% if @error_msg %>
  <div class="errorExplanation">
    <p><%= @error_msg %></p>
<% end %>
<%= link_to t("advanced_search"), advanced_search_path, class: "t-link--gray t-link--has-arrow" %>
<% if @yanked_filter %>
  <% @subtitle = t('.subtitle', :query => content_tag(:em, h(params[:query]))) %>

  <% if @yanked_gem.present? %>
Enter fullscreen mode Exit fullscreen mode

In this case, we find a significant amount of view logic nested within the HTML structure. To comprehend this template fully, one must examine both the HTML and the embedded Ruby code.

With Phlex, however, we can fundamentally transform how we perceive and write these views. We can easily isolate the logic from the HTML nesting, resulting in something like this:

class Searches::Show < Phlex::HTML
  def template
    if @yanked_filter
      if @gems.any?
Enter fullscreen mode Exit fullscreen mode

The template method clearly displays the actual view logic of the full template. The appropriate instance methods provide the HTML. For me, Phlex isn't really about the HTML; in a way it is about everything else.

We can write ruby and Phlex provides us the html tag methods we need.

We have the freedom to choose the most suitable level of abstraction and refactor as we see fit. We have the elegance of Ruby at our disposal.

I am genuinely enthusiastic about Phlex. It has completely transformed how I approach views, paving the way for elegant abstractions this one for forms.

Working with your views as enjoyable as writing other ruby code.

this article first appeared on

Top comments (0)