Pre-order

πŸ”“ Unlock video

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

Pre-order video course

Turbo Frames

Turbo frames are a way to update the content of a page without reloading the entire page. They are a key feature of Turbo, a framework for building fast and responsive web applications; however, they do break encapsulation by the fact that they work with DOM ids, which can easily be duplicated by accident when using the rails dom_id helper.

Regardless, we’ll take a look at how to use them with Phlex, then explore other approaches to updating frames that minimize the risk of duplication.

A Phlex view with Turbo Frames

Let’s start with a Phlex view that loads a Turbo Frame.

πŸ”“ Unlock content

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

Pre-order video course for $379 $249
class View::Post::Show < β–“β–“β–“β–“β–“::β–“β–“β–“β–“
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ :turbo_frame

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

  def β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“ { β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“ }
    β–“β–“β–“β–“(class: "prose"){
      β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“, type: :md
    }
    β–“ β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“
    β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ id: "comments", src: β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“β–“)
  end
end

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

class PostCommentsController < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“
    β–“β–“β–“β–“β–“β–“β–“β–“β–“ = β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“.β–“β–“β–“(β–“β–“β–“β–“β–“β–“β–“β–“β–“)
  end
end

β–“

class CommentsController < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ { β–“β–“β–“β–“β–“β–“β–“β–“β–“ = β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“ }

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

  def β–“β–“β–“β–“β–“β–“
    β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ do |format|
      format.β–“β–“β–“β–“ { β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ }
      format.β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ do
        β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“
        β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“ "comments", β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“.β–“β–“β–“(β–“β–“β–“β–“β–“β–“β–“β–“)

        β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“
        β–“   β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“ β–“β–“
        β–“ β–“β–“ β–“β–“β–“ β–“β–“
        β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“ "new_comment", β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“.β–“β–“β–“(β–“β–“β–“β–“β–“β–“β–“β–“)
      end
    end
  end
end
Turbo Streams
Next video
Stimulus
Previous video