Pre-order

πŸ”“ Unlock video

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

Pre-order video course

Turbo Pagemorphs

I always recommend starting with Turbo Pagemorphs before bothering with Turbo Streams or Turbo Frames. Turbo Pagemorphs are the simplest way to add interactivity to your Rails application. They also work best with components.

When then does it make sense to use Turbo Streams or Turbo Frames? When Pagemorphs don’t work well, but they should for 80% of use cases.

Pagemorphs with components

The best part about Turbo Pagemorphs is they work with components right out of the box, without any modifications.

Consider a post with comments. The view would show the post and a list of whatever comments it currently has.

πŸ”“ Unlock content

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

Pre-order video course for $379 $249
class View::Post < β–“β–“β–“β–“::β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“:)
    β–“β–“β–“β–“β–“ = β–“β–“β–“β–“
  end

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“ { β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“ }
    β–“β–“β–“β–“(class: "prose"){
      β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“, type: :md
    }
    β–“β–“β–“(id: "comments") do
      β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“ do |β–“β–“β–“β–“β–“β–“β–“|
        β–“β–“β–“(class: "comment") do
          p { β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“ }
        end
      end
    end
  end
end

Add turbo tags to the head tags

β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

class View::Base < β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ = nil
  β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ = nil

  β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ = nil

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“β–“β–“ do
      β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“
      β–“β–“β–“β–“(name: "turbo-pageload", content: β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“)
      β–“β–“β–“β–“(name: "turbo-refresh-scroll", content: β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“)
      β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“
    end
    β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“
    β–“β–“β–“β–“ do
      yield
      β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    end
    β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“
  end
end

Configuring the view to stream page morphs

β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“

class View::Post < β–“β–“β–“β–“::β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“
  include β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“:)
    β–“β–“β–“β–“β–“ = β–“β–“β–“β–“
  end

  β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ = "replace"
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ = "preserve"
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“β–“
  end

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“ { β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“ }
    β–“β–“β–“β–“(class: "prose"){
      β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“, type: :md
    }
    β–“β–“β–“(id: "comments") do
      β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“ do |β–“β–“β–“β–“β–“β–“β–“|
        β–“β–“β–“(class: "comment") do
          p { β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“ }
        end
      end
    end
  end
end

β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“

Configure model to broadcast updates

β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“

class Comment < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ :post
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ -> { [ β–“β–“.β–“β–“β–“β–“, :comments ] }
end

β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“

def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“β–“
end

Wiring it up to the controller

β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

class PostsController < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“
    β–“β–“β–“β–“β–“ = β–“β–“β–“β–“.β–“β–“β–“β–“(β–“β–“β–“β–“β–“β–“[:id])
    β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“.β–“β–“β–“(post: β–“β–“β–“β–“β–“)
  end
end

β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“

Reactive approach to updating apps

β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“

Why Superform?
Next video
Turbo Broadcasts
Previous video