Phlex HTML in Pure Ruby (whaaat?) Bradley Schaefer / @[email protected] 

Expectations • This talk is for Web Developers • You are familiar with Ruby • My presentation skills could use some work 

What is the purpose of this talk? Adventure! Exploration! Wonder! Fun! Excitement! Joy! 

What is the purpose of this talk? * maybe to convince you to start using phlex for everything Adventure! Exploration! Wonder! Fun! Excitement! Joy! 

How are you writing HTML templates today? ERB (Embedded RuBy) Ruby Toys -- <%= @name %>

<%= @name %> (<%= @code %>)

<%= @desc %>

<% @features.each do |f| %>
• <%= f %>
<% end %>

<% if @cost < 10 %> Only <%= @cost %>!!! <% else %> Call for a price, today! <% end %>



How are you writing HTML templates today? ERB (Embedded RuBy) Haml (HTML Abstraction Markup Language) Ruby Toys -- <%= @name %>

<%= @name %> (<%= @code %>)

<%= @desc %>

<% @features.each do |f| %>
• <%= f %>
<% end %>

<% if @cost < 10 %> Only <%= @cost %>!!! <% else %> Call for a price, today! <% end %>

%html %head %title Ruby Toys -- #{@name} %body %h1 #{@name} (#{@code}) %p= @desc %ul - @features.each do |f| %li %b= f %p - if @cost < 10 %b Only #{@cost}!!! - else Call for a price, today! 

How are you writing HTML templates today? ERB (Embedded RuBy) Liquid (Jekyll) Ruby Toys -- <%= @name %>

<%= @name %> (<%= @code %>)

<%= @desc %>

<% @features.each do |f| %>
• <%= f %>
<% end %>

<% if @cost < 10 %> Only <%= @cost %>!!! <% else %> Call for a price, today! <% end %>

Ruby Toys -- {{ name }}

{{ name }} ({{ code }})

{{ desc }}

{% for f in features %}
• {{ f }}
{% endfor %}

{% if cost < 10 %} Only {{ cost }}!!! {% else %} Call for a price, today! {% endif %}



🔥Hot Take🔥 

No content

Just. look at it… Haml (HTML Abstraction Markup Language) %html %head %title Ruby Toys -- #{@name} %body %h1 #{@name} (#{@code}) %p= @desc %ul - @features.each do |f| %li %b= f %p - if @cost < 10 %b Only #{@cost}!!! - else Call for a price, today! 

Something even better! https://phlex.fun 

Phlex is Ruby ERB (Embedded RuBy) Phlex Ruby Toys -- <%= @name %>

<%= @name %> (<%= @code %>)

<%= @desc %>

<% @features.each do |f| %>
• <%= f %>
<% end %>

<% if @cost < 10 %> Only <%= @cost %>!!! <% else %> Call for a price, today! <% end %>

class ExamplePage < Phlex::HTML def template html do head { title { "Ruby Toys -- #{@name}" } } body do h1 { "#{@name} (#{@code})" } p { @desc } ul do @features.each do |f| li { b { f } } end end p do if @cost < 10 b { "Only #{@cost}!!!" } else "Call for a price, today!" end end end end end end 

🧐 Is this actually better? class ExamplePage < Phlex::HTML def template html do head { title { "Ruby Toys -- #{@name}" } } body do h1 { "#{@name} (#{@code})" } p { @desc } ul do @features.each do |f| li { b { f } } end end p do if @cost < 10 b { "Only #{@cost}!!!" } else "Call for a price, today!" end end end end end end 

🧐 Also, I cheated a little bit class ExamplePage < Phlex::HTML def template html do head { title { "Ruby Toys -- #{@name}" } } body do h1 { "#{@name} (#{@code})" } p { @desc } ul do @features.each do |f| li { b { f } } end end p do if @cost < 10 b { "Only #{@cost}!!!" } else "Call for a price, today!" end end end end end end 

👍 good old-fashioned Ruby class ExamplePage < Phlex::HTML def initialize def template html do head { title { "Ruby Toys -- #{@name}" } } body do h1 { "#{@name} (#{@code})" } p { @desc } ul do @features.each do |f| li { b { f } } end end p do if @cost < 10 b { "Only #{@cost}!!!" } else "Call for a price, today!" end end end end end end def initialize(name:, code:, desc:, features:, cost:) @name = name @code = code @desc = desc @features = features @cost = cost end 

It’s Fast • 12x faster than Rails ERB partials • 5.5x faster than ViewComponents • 84x faster than dry-view https://github.com/KonnorRogers/view-layer-benchmarks 

It’s Fast 

Slides are hard. Who wants to do some live coding? 

That’s great, but in Rails? https://www.phlex.fun/rails/ 

What does that get you? Layouts Component Generator yield / content_for Helpers Controller Generator View Generator ApplicationView ApplicationComponent 

What a Controller looks like class ArticlesController < ApplicationController layout -> { ApplicationLayout } def index # explicit rendering is required render Articles::IndexView.new( articles: Article.all.load_async ) end def show render Articles::ShowView.new( article: Article.find(params[:id]) ) end end 

What’s in an ApplicationComponent? class ApplicationComponent < Phlex::HTML def h1 = super(class: "text-3xl font-semibold my-5") def h2 = super(class: "text-2xl font-semibold mt-10 mb-5") def a(**attributes) super( class: "font-bold text-red-600 underline underline-offset-4", **attributes ) end end 

Migrating Existing Views https://www.phlexing.fun 

Yes, it works with 

Advanced Examples ⚡ Feel the POWER ⚡ 

Phlex Documentation (built in Phlex) https://github.com/joeldrapper/phlex.fun/ https://phlex.fun 

Phlex Documentation (built in Phlex) 

Slides are hard. To the editor! 

Custom Tags & Attributes class JiraTaskList < Phlex::HTML register_element :ac_task_list, tag: "ac:task-list" register_element :ac_task, tag: "ac:task" register_element :ac_task_status, tag: "ac:task-status" register_element :ac_task_body, tag: "ac:task-body" register_element :ac_placeholder, tag: "ac:placeholder" def template ac_task_list do ac_task do ac_task_status { "incomplete" } ac_task_body do ac_placeholder(**{:"ac:type" => "mention"}) do "@mention example. This placeholder will automatically search " + "for a user to mention in the page when the user begins typing." end end end end end end 

Reasons to NOT use Phlex • You never want to test views • You hate Ruby • You don’t write HTML • You don’t care about rendering performance 

But, seriously Phlex is Fun! Try it out! 

Phlex HTML in Pure Ruby (whaaat?) Bradley Schaefer / @[email protected] https://github.com/soulcutter/phlex-talk