Pre-order

πŸ”“ Unlock video

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

Pre-order video course

Phlex is Ruby

Phlex is just Ruby. The most basic Phlex component looks like this:

class MyComponent < Phlex::Component
  def initialize(name:)
    @name = name
  end

  def view_template
    h1(class: "text-2xl font-bold") { "Hello, #{@name}!" }
  end
end

Then, to render the component, you can use the render method:

render MyComponent.new(name: "World")

Let’s take a closer look at how Phlex components work.

HTML tags are methods in Phlex

Phlex provides a set of methods for rendering HTML tags. These methods are named after the HTML tags they represent, and they take a block of code that will be executed to generate the content of the tag.

Consider the following HTML:

<h1 class="text-2xl font-bold">Hello, World!</h1>

Here’s how you’d render it in Phlex:

πŸ”“ Unlock content

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

Pre-order video course for $379 $249
β–“β–“(class: "text-2xl font-bold") { "Hello, World!" }

The view_template method

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

Ruby in components

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

class MyComponent < β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(name:)
    β–“β–“β–“β–“β–“ = name
  end

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“(class: "text-2xl font-bold") { β–“β–“β–“β–“β–“β–“β–“β–“ }
  end

  private

  def β–“β–“β–“β–“β–“β–“β–“β–“
    case β–“β–“β–“β–“.β–“β–“β–“.β–“β–“β–“β–“
    when 0..6
      "Top of the morning to ya, #{β–“β–“β–“β–“β–“}!"
    when 7..11
      "Β‘Buenos dΓ­as, #{β–“β–“β–“β–“β–“}!"
    when 12..17
      "Good afternoon, #{β–“β–“β–“β–“β–“}!"
    else
      "Β‘Buenas noches, #{β–“β–“β–“β–“β–“}!"
    end
  end
end

Rendering data

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

class UserEmailList < β–“β–“β–“β–“β–“::β–“β–“β–“β–“β–“β–“β–“β–“β–“
  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“:)
    β–“β–“β–“β–“β–“ = β–“β–“β–“β–“
  end

  def β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
    β–“β–“(class: "text-lg font-semibold") { "Email List" }
    β–“β–“ do
      β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“.β–“β–“β–“β–“ do |β–“β–“β–“β–“β–“|
        β–“β–“ { β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“.β–“β–“β–“β–“β–“β–“β–“ }
      end
    end
  end

  private

  def β–“β–“β–“β–“β–“β–“(β–“β–“β–“β–“β–“β–“β–“, **)
    β–“(href: "mailto:#{β–“β–“β–“β–“β–“β–“β–“}", **) {
      block_given? ? yield : β–“β–“β–“β–“β–“β–“β–“
    }
  end
end
Rendering
Next video
Why components?
Previous video