Pre-order

πŸ”“ Unlock video

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

Pre-order video course

Helpers

One of the more confusing concepts when getting started with Phlex is understanding how helper functions work. Unlike Rails helpers, Phlex helpers don’t leak state, which is beneficial for maintainability, but it does create a slight learning curve for Rails developers.

Traditional Rails β€œhelper functions” are modules included in view templates from the ./app/helpers directory. While Phlex takes a different approach, it provides excellent interoperability with existing Rails helpers through a comprehensive adapter system.

Interoperability with Rails Helpers

Phlex ships with an extensive set of adapters that allow your Phlex views to interact with Rails helpers.

Remember that the Components::Base class includes Rails route helpers by default:

class Components::Base < Phlex::HTML
  include Phlex::Rails::Helpers::Routes
end

πŸ”“ Unlock content

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

Pre-order video course for $379 $289

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

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

class Components::Base < β–“β–“β–“β–“β–“::β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“
  include β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“
  include β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
end

Don’t include everything in Components::Base

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

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

class Views::Base < β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“
  include β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“
  include β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“ β–“β–“β–“
end

The full list of adapters

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

Building custom Rails helper adapters

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

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

Value helper adapter

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

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

β–“β–“β–“About <%= β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(1.β–“β–“β–“.β–“β–“β–“) %> I went outside.β–“β–“β–“β–“

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

module Phlex::Rails::Helpers::Pluralize
    extend β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

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

Output helper adapter

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

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

<%= β–“β–“β–“β–“β–“β–“β–“β–“β–“(model: β–“β–“β–“β–“) do |β–“| %>
  <%= β–“.β–“β–“β–“β–“β–“ :name %>
  <%= β–“.β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ :name %>

  <%= β–“.β–“β–“β–“β–“β–“β–“ "Submit" %>
<% end %>

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

<%= β–“β–“β–“β–“β–“β–“β–“ "Hello, World!", β–“β–“β–“β–“β–“β–“β–“β–“β–“ do %>
  β–“β–“β–“β–“Hello, World!β–“β–“β–“β–“β–“
<% end %>

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

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

module Phlex::Rails::Helpers::LinkTo
    extend β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

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

Adapters are transitional

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

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

Staying organized
Next video
Rendering from templates
Previous video