Beautiful Ruby

Layouts

In Rails applications, layouts are typically defined in seperate files and “wrap” a view via some sort of yield block.

The old way of doing layouts in Rails

Here’s what a basic Erb layout might look like.

<!DOCTYPE html>
<html>
<head>
  <title><%= content_for(:title) %></title>
</head>
<body>
  <h1><%= content_for(:title) %></h1>
  <%= yield %>
</body>
</html>

Then we might have a view file that looks like this.

<% content_for(:title, @user.name) %>

<dl>
  <dt>Name</dt>
  <dd><%= @user.name %></dd>

  <dt>Email</dt>
  <dd><%= @user.email %></dd>
</dl>

Then from the controller we can render the layout and view together.

class UsersController < ApplicationController
  layout 'user'

  def show
    @user = User.find(params[:id])
  end
end

Layouts in Phlex via inheritance

🔓 Unlock content

Pre-order this course to unlock this video, source code, and content.

Pre-order video course for $379 $289

▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓

class UserLayout < ▓▓▓▓▓::▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓▓▓ do
      ▓▓▓▓ do
        ▓▓▓▓▓ { ▓▓▓▓▓▓ }
      end
      ▓▓▓▓ do
        ▓▓ { ▓▓▓▓▓▓ }
        yield
      end
    end
  end
end

▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓▓▓

class UserView < ▓▓▓▓▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓:)
    ▓▓▓▓▓ = ▓▓▓▓
    ▓▓▓▓▓▓ = ▓▓▓▓.▓▓▓▓
  end

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓ do
      ▓▓ { 'Name' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓ }

      ▓▓ { 'Email' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓▓ }
    end
  end
end

▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓

class UsersController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓▓▓▓▓▓ 'user'

  def ▓▓▓▓
    ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓.▓▓▓(
      user: ▓▓▓▓.▓▓▓▓(▓▓▓▓▓▓[:id])
    )
  end
end

▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓

Composing layouts

▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓

class UserView < ▓▓▓▓▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓:)
    ▓▓▓▓▓ = ▓▓▓▓
  end

  def ▓▓▓▓▓ = ▓▓▓▓▓.▓▓▓▓

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓ do
      ▓▓ { 'Name' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓ }

      ▓▓ { 'Email' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓▓ }
    end
  end
end

▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓

class UserLayout < ▓▓▓▓▓::▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓▓:)
    ▓▓▓▓▓▓ = ▓▓▓▓▓
  end

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓▓▓ do
      ▓▓▓▓ do
        ▓▓▓▓▓ { ▓▓▓▓▓▓ }
      end
      ▓▓▓▓ do
        ▓▓ { ▓▓▓▓▓▓ }
        yield
      end
    end
  end
end

▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓

class UserView < ▓▓▓▓▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓:)
    ▓▓▓▓▓ = ▓▓▓▓
  end

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓)
    super do
      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓.▓▓▓(▓▓▓▓▓:, &▓▓▓▓)
    end
  end
end

▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓

class Users::Show < ▓▓▓▓▓▓▓▓
  def ▓▓▓▓▓ = ▓▓▓▓▓.▓▓▓▓

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓ do
      ▓▓ { 'Name' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓ }

      ▓▓ { 'Email' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓▓ }
    end
  end
end

OpenGraph

▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓

class UserLayout < ▓▓▓▓▓::▓▓▓▓
  ▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓
  ▓▓▓▓▓▓▓▓▓ = ▓▓▓▓.▓▓▓▓▓▓(:title, :type, :url, :image) do
    def ▓▓▓▓▓▓▓▓▓▓(title: nil, type: 'website', url: nil, image: nil)
      super
    end
  end

  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓▓:)
    ▓▓▓▓▓▓ = ▓▓▓▓▓
  end

  def ▓▓ = ▓▓▓▓▓▓▓▓▓.▓▓▓(▓▓▓▓▓:, url: ▓▓▓▓▓▓▓.▓▓▓)

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓▓▓ do
      ▓▓▓▓ do
        ▓▓▓▓▓ { ▓▓▓▓▓▓ }
        ▓▓▓▓ property: 'og:title', content: ▓▓.▓▓▓▓▓
        ▓▓▓▓ property: 'og:type', content: ▓▓.▓▓▓▓
        ▓▓▓▓ property: 'og:url', content: ▓▓.▓▓▓
        ▓▓▓▓ property: 'og:image', content: ▓▓.▓▓▓▓▓
      end
      ▓▓▓▓ do
        ▓▓ { ▓▓▓▓▓▓ }
        yield
      end
    end
  end
end

▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓▓

class UserView < ▓▓▓▓▓▓▓▓▓▓

  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓:)
    ▓▓▓▓▓ = ▓▓▓▓
  end

  def ▓▓ = ▓▓▓▓▓▓▓▓▓.▓▓▓(▓▓▓▓▓:, url: ▓▓▓▓▓▓▓.▓▓▓)

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓)
    super do
      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓.▓▓▓(▓▓▓▓▓:, ▓▓:, &▓▓▓▓)
    end
  end
end

▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓

class Users::Show < ▓▓▓▓▓▓▓▓
  def ▓▓▓▓▓ = ▓▓▓▓▓.▓▓▓▓

  def ▓▓
    ▓▓▓▓▓▓▓▓▓.▓▓▓(title:
      ▓▓▓▓▓.▓▓▓▓,
      url: ▓▓▓▓▓▓▓.▓▓▓,
      image: ▓▓▓▓▓.▓▓▓▓▓▓▓▓▓▓
    )
  end

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓ do
      ▓▓ { 'Name' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓ }

      ▓▓ { 'Email' }
      ▓▓ { ▓▓▓▓▓.▓▓▓▓▓ }
    end
  end
end

Using Phlex layouts with Ruby Erb views

▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓ ▓▓▓▓ ▓▓▓▓

▓

🔓 Unlock video

Pre-order, get early bird pricing, and help shape this course.