What does your ideal version of Phoenix look like - fork - template engine

I’m wondering how this is different to EEx though besides the <%= %> vs @ syntax?

Avoid <%= %> syntax is a good improvement (one character vs five), because it is less intrusive, and more HTML friendly. If other people are doing front-end in your project (designers or front-end developers), it’s better because it does not interfere so much with the real HTML. And if you are working alone or doing front and back-end is less error prone than the current syntax.

For example, this piece of code:

<h1>Users</h1>

<%= link "New User", to: new_user_path(@conn, :index) %>

<ul>
  <%= for user <- @users do %>
    <li><%= user.name %> (<%= user.age %>)</li>
  <% end %>
</ul>

Could be something shorter and easy to read if were:

<h1>Users</h1>

@link "New User", to: new_user_path(@conn, :index)

<ul>
    @for user <- @users do 
        <li>@user.name  (@user.age)</li>
    end 
</ul>

Furthermore in the last version of Razor you can use tag helpers and you can write back-end code by using special HTML tags.

For example:

@Html.TextBoxFor(m=>m.FirstName, new { @class = "form-control", placeholder=”add a first name”})

Would be:
<input asp-for="FirstName" placeholder=”add a first name” class="form-control" />

Coming from php → rails → phoenix I’ve always used the <%= <?= etc syntax so its interesting to see a different one. I’ve never used it so no opinion on what is better to work on but have you considered trying to reimplement it in elixir?

it’s better because it does not interfere so much with the real HTML

To me it looks like it interferes about the same both ways just a difference in the characters. What do you see as it interfering less?

Furthermore in the last version of Razor you can use tag helpers and you can write back-end code by using special HTML tags.

Sorry don’t know Razor, what does that input do differently than a normal one that involves backend code? Could you explain how it works?

I have worked many years with ASP .NET so maybe my opinion is a little bit conditioned.

HTML is a markup language that uses <> symbols a lot. If you are using the same characters in your template engine, in some way you are obfuscating your HTML. When the template is short and clean, it does not matter. But some times the views are very complex and are far cleaner and easy to read if you avoid using <%= to write your Elixir (Ruby or PHP) code.

Here is a bigger example from ASP .NET Core docs:

regcs.png632×488 23.5 KB

For me, it’s much cleaner than Phoenix templates. It’s much more easy to see where is the server code and where the HTML code.

But with ASP .NET Core (the last version) you can also use tag helpers that are much more HTML friendly. The same example with tag helpers:

regth.png580×500 13.4 KB

The asp-* tags are the server code, and they do not interfere with HTML code, so it’s much cleaner and easy to read.

Thank you for the reply. What function do the asp-for attributes provide?

The example is a simple one, so it’s just an HTML form. Some tags are used for defining the controller and action to call (similar to form_for in Phoenix), other tags bind the model with their inputs (useful when you are editing data and it has to be preloaded) and others provide some client validation.

Older Microsoft ASP.NET tech is also using <% %> but they moved to using @ when Razor templating was created. Company I currently work for also uses Razor heavily, but C# is quite different language and I’m not quite sure how well templating would work without end marker like %> in EEx. Might not be even possible.

One thing I really hate about ASP.NET’s Razor is unintentional white space. I’m just started learning Elixir and Phoenix and I think it has the same problem. Working with React it’s really great that it doesn’t add any white space between HTML elements by default. You have to explicitly add white space if you need it. So many hours that our company has wasted fixing small UI inconsistencies because Razor doesn’t remove white space between HTML elements.

If EEx suffers from this same problem, it would be great to have an mode where white space was stripped between HTML elements and you would have to explicitly add white space.

Think I got it so

<input asp-for="ConfirmPassword" class="form-control">

is the equivalent of

<%= text_input f, :confirm_password, class: "form-control" %>

That does look quite nice.

Why using a lambda, the new keyword, multiple brackets and that @ symbol is supposed to be cleaner? That’s something you won’t see outside of the ASP.NET world. EEx is simple, just like pretty much any other template engine. I came from the Microsoft lands too and I feel your pain, but have in mind that Phoenix took a few ideas from Ruby on Rails, not from ASP.NET.

I do prefer developer friendly. This is indeed much more cleaner, probably too much, and the purpose template engines shouldn’t be abstracting complexity away with fancy directives / attributes or making your code more integrated with your HTML, but being concise about what you’re trying to achieve. Overall it’s a matter of taste.

You can build your own HTML minifier in Elixir, or you can parse the templates before developing your app to production with tools like Gulp, which it’s a bit weird, but it’s another option if you’re not comfortable with Elixir (ASP.NET has WebMarkupMin). However I must say that minifying the HTML is not a big deal as it won’t affect performance, unless your hosting provider has limited bandwidth, it doesn’t matter.

HTML minimizers usually just removes extra white space. So three spaces are changed to one etc. I’m not talking about that. I’m talking that white space effecting layout in browser. Let’s say you have this

   <div>
      <span>foo</span>
      <span>bar</span>
   </div>

it’s not same as <div><span>foo</span><span>bar</span></div>, first one has white space between foo and bar when you view it in browser. But in React’s JSX/TSX they are the same. To add white space in React you need to use {" "}

So no minimizer will ever fix this problem. Its support has to be added to template it self and you need some way of defining white space you want.

Microsoft’s Razor format updates have also broken our layout so many times because updated formatting didn’t take account white space that was added. Well broken might be a too strong word, but changed how our layout is drawn in browser by adding white space when there was none.

With templating that keeps white space between HTML you have to do hacks like minus margin if you want to keep your template readable. Maybe be our company just cares too about our site looking consistent, but this has been a big issue for us.