Beautiful Ruby

Layouts

In the last video, we ended up with a controller that rendered inline views that looks like this:

class PostsController < ApplicationController
  before_action do
    @blog = current_user.blog
    @posts = @blog.posts
  end

  class Index < Phlex::HTML
    def initialize(posts:)
      @posts = posts
    end

    def template
      h1 "Posts"
      ul do
        @posts.each do |post|
          li do
            a href: post_path(post), post.title
          end
        end
      end
    end
  end

  def index
    render Index.new(posts: @posts)
  end

  # ...
end

How do we handle layouts in Phlex?

Working towards layouts

Since layouts are a different concern than a view, we’re going to work towards extracting layouts out of our view classes and use class composition to achieve our goal.

Rendering content around a view

🔓 Unlock content

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

Pre-order video course for $379 $289

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

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

  ▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓▓▓▓)
    super do
      ▓▓▓▓(class: "prose", &▓▓▓▓▓▓▓)
    end
  end

  def ▓▓▓▓▓▓▓▓
    ▓▓ "Posts"
    ▓▓ do
      ▓▓▓▓▓▓.▓▓▓▓ do |▓▓▓▓|
        ▓▓ do
          ▓ href: ▓▓▓▓▓▓▓▓▓(▓▓▓▓), ▓▓▓▓.▓▓▓▓▓
        end
      end
    end
  end
end

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

class View < ▓▓▓▓▓::▓▓▓▓
  ▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓▓▓▓)
    super do
      ▓▓ { ▓▓▓▓▓ }
      ▓▓▓▓(class: "prose", &▓▓▓▓▓▓▓)
    end
  end
end

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

  def ▓▓▓▓▓ = "Posts"

  def ▓▓▓▓▓▓▓▓
    ▓▓ do
      ▓▓▓▓▓▓.▓▓▓▓ do |▓▓▓▓|
        ▓▓ do
          ▓ href: ▓▓▓▓▓▓▓▓▓(▓▓▓▓), ▓▓▓▓.▓▓▓▓▓
        end
      end
    end
  end
end

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

Extracting the layout into its own class

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

▓ ▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓
class Layouts::Base < ▓▓▓▓▓::▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓(▓▓▓▓▓:)
    ▓▓▓▓▓▓ = ▓▓▓▓▓
  end

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

class Layouts::Post < ▓▓▓▓▓▓▓::▓▓▓▓
  ▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓▓▓▓)
    super do
      ▓▓ { ▓▓▓▓▓ }
      ▓▓▓▓(class: "prose", &▓▓▓▓▓▓▓)
    end
  end
end

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

Using the layout from the view

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

class View < ▓▓▓▓▓::▓▓▓▓
  ▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓▓▓▓)
    super do
      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓::▓▓▓▓.▓▓▓(▓▓▓▓▓:)
    end
  end
end

Disable the Rails layout

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

class PostsController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓▓▓▓▓▓ false

  ▓▓▓▓▓▓▓▓▓▓▓▓▓ do
    ▓▓▓▓▓ = ▓▓▓▓▓▓▓▓▓▓▓▓.▓▓▓▓
    ▓▓▓▓▓▓ = ▓▓▓▓▓.▓▓▓▓▓
  end

  class View < ▓▓▓▓▓::▓▓▓▓
    ▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓ ▓▓▓▓▓▓
    def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓(&▓▓▓▓▓▓▓)
      super do
        ▓▓▓▓▓▓ ▓▓▓▓▓▓▓::▓▓▓▓.▓▓▓(▓▓▓▓▓:)
      end
    end
  end

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

    def ▓▓▓▓▓▓▓▓
      ▓▓ "Posts"
      ▓▓ do
        ▓▓▓▓▓▓.▓▓▓▓ do |▓▓▓▓|
          ▓▓ do
            ▓ href: ▓▓▓▓▓▓▓▓▓(▓▓▓▓), ▓▓▓▓.▓▓▓▓▓
          end
        end
      end
    end
  end

  def ▓▓▓▓▓
    ▓▓▓▓▓▓ ▓▓▓▓▓.▓▓▓(posts: ▓▓▓▓▓▓)
  end

  ▓ ▓▓▓
end

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

🔓 Unlock video

Pre-order, get early bird pricing, help shape this course, and watch more than 30 seconds of this video.