Phlex: HTML in Pure Ruby

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)
<html> <head><title>Ruby Toys -- <%= @name %></title></head> <body> <h1><%= @name %> (<%= @code %>)</h1> <p><%= @desc %></p> <ul> <% @features.each do |f| %> <li><b><%= f %></b></li> <% end %> </ul> <p> <% if @cost < 10 %> <b>Only <%= @cost %>!!!</b> <% else %> Call for a price, today! <% end %> </p> </body> </html>

Haml (HTML Abstraction Markup Language) <html> <head><title>Ruby Toys -- <%= @name %></title></head> <body> <h1><%= @name %> (<%= @code %>)</h1> <p><%= @desc %></p> <ul> <% @features.each do |f| %> <li><b><%= f %></b></li> <% end %> </ul> <p> <% if @cost < 10 %> <b>Only <%= @cost %>!!!</b> <% else %> Call for a price, today! <% end %> </p> </body> </html> %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!

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

🔥Hot Take🔥

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 <html> <head><title>Ruby Toys
-- <%= @name %></title></head> <body> <h1><%= @name %> (<%= @code %>)</h1> <p><%= @desc %></p> <ul> <% @features.each do |f| %> <li><b><%= f %></b></li> <% end %> </ul> <p> <% if @cost < 10 %> <b>Only <%= @cost %>!!!</b> <% else %> Call for a price, today! <% end %> </p> </body> </html> 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

Phlex: HTML in Pure Ruby

Phlex: HTML in Pure Ruby

Bradley Schaefer

More Decks by Bradley Schaefer

Other Decks in Programming

Featured

Transcript