"Reusable Templates in Phoenix" blog post question

Hi everyone!

I just found this post (Reusable Templates in Phoenix) by @danielberkompas. I also write server side components in Phoenix and would like to know how you write your templates!

My code looks like this:

web/templates/user_account/edit.eex
<%= top_bar do %>
  <%= top_bar_title gettext("Edit user account") %>
  <%= top_bar_submit gettext("Update"), form: "user_account_form" %>
  <%= top_bar_link gettext("Back"), to: user_account_path(@conn, :index) %>
<% end %>

<%= render "form.html", changeset: @changeset,
                        action: user_account_path(@conn, :update, @user_account) %>
web/templates/user_account/form.eex
<%= form_for @changeset, @action, [id: "user_account_form"], fn f -> %>
  <%= box do %>
    <%= box_heading gettext("Security") %>
    <%= box_password_input f, :password, gettext("Password") %>
    <%= box_password_input f, :password_confirmation, gettext("Password confirmation") %>
    <%= hidden_input f, :employee_id %>
  <% end %>
<% end %>
web/templates/components.ex
defmodule App.Components do
  use App.Web, :view

  defmacro __using__(_) do
    quote do
      import App.Components, except: [render: 2, template_not_found: 2]
    end
  end

  def top_bar(do: content) do
    ~E"""
      <div class="top-bar w-clearfix">
        <%= content %>
      </div>
    """
  end

  def top_bar_title(title) do
    ~E"""
      <div class="top-bar-heading"><%= title %></div>
    """
  end

  def top_bar_subtitle(subtitle) do
    ~E"""
      <div class="top-bar-subheading">(<%= subtitle %>)</div>
    """
  end

  def top_bar_link(title, attributes \\ []) do
    link(title, [class: "button top-bar-button"] ++ attributes)
  end

  def top_bar_submit(title, attributes \\ []) do
    submit(title, [class: "button top-bar-button"] ++ attributes)
  end

  # ...
end

Can you tell me if using ~E is faster or slower than function call like content_tag/2?

2 Likes

I can not find a sigil_E in elixir, eex, nor phoenix. So it is hard tell whithout knowing about its implementation‌…

1 Like

sigil_E is from phoenix_html: https://hexdocs.pm/phoenix_html/Phoenix.HTML.html#sigil_E/2

1 Like

Ah, thank you.

So on a first glance it seems, as if sigil_e and sigil_E do a lot of stuff at compile time, while content_tag/2 is more work at runtime.

So if you use the sigil variants it should run faster but might take longer to compile, but to know it for sure which one is better in which situation, you might need to bench

4 Likes

HI everybody,
I’m somehow digging up a little here…
But I have a similar concern (might post a dedicated subject on it…)
How is the best way today to go with this kind of “componentization”?
Is everything explained here is suitable with current Phoenix version (and its pipeline etc.)?