Fireblast - Html render with module components for Phoenix inspired by React

News Announcing
, ,
8

Of course you can use what ever module in the <%= %> and you can even use render(YourApp.UserView, "index.html", name: "John<br/>Doe") in there.

But it’s just about how easy it is to read the.

You can use ~E and ~e but they don’t accept #{}

So things like:

list = [1, 2, 3]

render_item = fn item ->
  ~x(<p>#{item}</p>)
end

~x(
  <div id="1">
    #{Enum.map(list, render_item)}
   </div>
)

Is really hard to replicate just with sigils, you can use the EEx do get the same effect.

It just has to do with familiarity. Vuejs look really different from React but at some level they are doing the same things. But in our case we are actually getting the same result because we don’t have to contend with a javascript rendering part.

There are going to be case where I would have a clear win over Phoenix templates. That is with something like a Trans tag.

~x(
  <p>
    <Trans>
      Hello <a href="/world">World</a>
   </Trans>
  </p>
)

Would get translated into

arg9295287e5e664ce9b7eaf95f87226762 = gettext("Hello %{tag1}World%{tag1}", tag1: "<a href=\"/world\">", tag2: "</a>")
{:safe, ["<p", ">", arg9295287e5e664ce9b7eaf95f87226762, "</p>"]}

Compared to having to do that manually for Phoenix templates.

Now I just have to finish my implementation of Trans :grin:. It’s not that hard given what I have access to I just have to do it.