Extracting Superviews

Embedding views directly in controllers is a powerful way to build or prototype user interfaces for applications, but it’s not for everybody. Some developers like to keep views in the ./app/views folder, so let’s look at how that can be done in a 100% Phlex Rails application.

A controller with inline views

In the last video, we ended up with the UsersController with inline views.

🔓 Unlock content

Purchase this course to unlock this video, source code, and content.

Purchase video course for $379 $329

class UsersController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓▓▓▓▓▓ false

  include ▓▓▓▓▓▓▓▓▓::▓▓▓▓▓▓▓
  include ▓▓▓▓▓▓▓▓▓::▓▓▓▓▓::▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

  ▓▓▓▓▓▓▓▓▓▓▓▓▓ do
    ▓▓▓▓▓ = ▓▓▓▓.▓▓▓▓(▓▓▓▓▓▓[:id])
    ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓
  end

  class View < ▓▓▓▓▓::▓▓▓▓
    attr_writer :user

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

    def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
      super do
        ▓▓▓▓▓▓ ▓▓▓▓▓::▓▓▓▓▓▓▓::▓▓▓.▓▓▓(title: ▓▓▓▓▓.▓▓▓▓) do
          ▓▓▓▓▓▓▓(class: "container-lg") do
            ▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓
            ▓
            ▓▓(class: "font-bold text-3xl") { ▓▓▓▓▓ }

            ▓▓▓(class: "card bg-base-200") do
              ▓▓▓(class: "card-body") do
                yield
              end
            end
          end
        end
      end
    end
  end

  class Form < ▓▓▓▓▓▓▓▓▓▓::▓▓▓▓
    def ▓▓▓▓▓▓▓▓▓▓▓▓▓
      ▓▓▓ ▓▓▓▓▓(:name).▓▓▓▓
      ▓▓▓ ▓▓▓▓▓(:email).▓▓▓▓▓

      ▓▓▓(class: "flex flex-row items-center gap-4"){
        ▓▓▓▓▓▓ "Save profile", class: "btn btn-primary"
        ▓(href: ▓▓▓▓▓▓▓(action: :show)) { "Back to profile" }
      }
    end
  end

  class Show < ▓▓▓▓
    def ▓▓▓▓▓▓▓▓▓▓▓▓▓
      ▓▓(class: "text-xl font-bold") { "Profile" }
      p(class: "text-lg") { "How you appear in Thingybase" }

      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓::▓▓▓▓▓::▓▓▓▓.▓▓▓ ▓▓▓▓▓ do
        ▓▓.▓▓▓▓▓ :name
        ▓▓.▓▓▓▓▓ :email
      end

      p do
        ▓▓▓▓▓▓▓(▓▓▓▓▓▓▓▓▓▓▓▓▓▓(▓▓▓▓▓), class: 'btn btn-outline'){ "Edit profile" }
      end
    end
  end

  class Edit < ▓▓▓▓
    def ▓▓▓▓▓ = "Editing #{▓▓▓▓▓.▓▓▓▓}"

    def ▓▓▓▓▓▓▓▓▓▓▓▓▓
      ▓▓▓▓▓▓ ▓▓▓▓.▓▓▓(▓▓▓▓▓)
    end
  end

  def ▓▓▓▓▓▓
    if ▓▓▓▓ ▓▓▓▓.▓▓▓(▓▓▓▓▓)
      ▓▓▓▓▓▓▓▓▓▓▓ action: :show
    else
      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓(:edit), status: :unprocessable_entity
    end
  end
end

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

Move each view into its own file

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

class UsersController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓ ▓▓▓
  class View < ▓▓▓▓▓::▓▓▓▓
    attr_writer :user

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

    def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
      super do
        ▓▓▓▓▓▓ ▓▓▓▓▓::▓▓▓▓▓▓▓::▓▓▓.▓▓▓(title: ▓▓▓▓▓.▓▓▓▓) do
          ▓▓▓▓▓▓▓(class: "container-lg") do
            ▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓
            ▓
            ▓▓(class: "font-bold text-3xl") { ▓▓▓▓▓ }

            ▓▓▓(class: "card bg-base-200") do
              ▓▓▓(class: "card-body") do
                yield
              end
            end
          end
        end
      end
    end
  end
  ▓ ▓▓▓
end

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

▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
class Views::Users::View < ▓▓▓▓▓::▓▓▓▓
  attr_writer :user

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

  def ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
    super do
      ▓▓▓▓▓▓ ▓▓▓▓▓::▓▓▓▓▓▓▓::▓▓▓.▓▓▓(title: ▓▓▓▓▓.▓▓▓▓) do
        ▓▓▓▓▓▓▓(class: "container-lg") do
          ▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓
          ▓
          ▓▓(class: "font-bold text-3xl") { ▓▓▓▓▓ }

          ▓▓▓(class: "card bg-base-200") do
            ▓▓▓(class: "card-body") do
              yield
            end
          end
        end
      end
    end
  end
end

Move the Form view

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

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
class Views::Users::Form < ▓▓▓▓▓▓▓▓▓▓::▓▓▓▓
  def ▓▓▓▓▓▓▓▓▓▓▓▓▓
    ▓▓▓ ▓▓▓▓▓(:name).▓▓▓▓
    ▓▓▓ ▓▓▓▓▓(:email).▓▓▓▓▓

    ▓▓▓(class: "flex flex-row items-center gap-4"){
      ▓▓▓▓▓▓ "Save profile", class: "btn btn-primary"
      ▓(href: ▓▓▓▓▓▓▓(action: :show)) { "Back to profile" }
    }
  end
end

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

Move the remaining views

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

module Views::Users
  class Show < ▓▓▓▓
    def ▓▓▓▓▓▓▓▓▓▓▓▓▓
      ▓▓(class: "text-xl font-bold") { "Profile" }
      p(class: "text-lg") { "How you appear in Thingybase" }

      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓::▓▓▓▓▓::▓▓▓▓.▓▓▓ ▓▓▓▓▓ do
        ▓▓.▓▓▓▓▓ :name
        ▓▓.▓▓▓▓▓ :email
      end

      p do
        ▓▓▓▓▓▓▓(▓▓▓▓▓▓▓▓▓▓▓▓▓▓(▓▓▓▓▓), class: 'btn btn-outline'){ "Edit profile" }
      end
    end
  end
end

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

Including the views back in the controller

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

class UsersController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓ ▓▓▓
  include ▓▓▓▓▓::▓▓▓▓▓
  ▓ ▓▓▓
end

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

class UsersController < ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
  ▓▓▓▓▓▓ false

  include ▓▓▓▓▓▓▓▓▓::▓▓▓▓▓▓▓
  include ▓▓▓▓▓▓▓▓▓::▓▓▓▓▓::▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

  include ▓▓▓▓▓::▓▓▓▓▓

  ▓▓▓▓▓▓▓▓▓▓▓▓▓ do
    ▓▓▓▓▓ = ▓▓▓▓.▓▓▓▓(▓▓▓▓▓▓[:id])
    ▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓
  end

  def ▓▓▓▓▓▓
    if ▓▓▓▓ ▓▓▓▓.▓▓▓(▓▓▓▓▓)
      ▓▓▓▓▓▓▓▓▓▓▓ action: :show
    else
      ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓(:edit), status: :unprocessable_entity
    end
  end
end

How are the views found?

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

It’s a choice of style

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

🔓 Unlock videos

Access all course videos, code, & materials