Breaking up LiveView templates into partials for DRY code?


I am really really new to Elixir, and although I have tried to get started with it earlier - I, finally, started rewriting a monolith Rails app using Phoenix to fix a few things we were having troubles with (and o’course, learning new stuff helps).

So far, I am loving the components we have ported to our Elixir application, and Phoenix LiveView has been incredibly useful to speed things up. We were using Vue.js earlier, but the development workflow is so easy with LV, once we got a hang of it.

However, there is one thing we could not find any reference to. We have a huge root layout, and like in the previous Rails application we have it split across several partials. We are using LiveView on top of it, and it works beautifully. Although, the diffs are pretty huge. I figured that LiveView is sending those partials in the diff, probably because it only searches for diffs at the first level, and considers nested partials as updates to simplify diff calculation.

So, e.g. the layout is:

<%= @count %>
<%= render "partials/_nested.html", assigns %>

In the above case, LiveView diffs are returning the whole content of partials/_nested.html. If we remove the partial, and include the HTML in the code directly - the diffs go back to sane size. I guess the same warning applies here - avoid content_tag in your templates.

But, to keep the code DRY - it would be really great, if we can simply ignore such “static” partials from the diff calculation somehow? I am not sure how the diff calculation works (haven’t gone through that part of code). If possible, we would like to mark partials that do not change once rendered, and have them be ignored by LiveView in diffs. Any suggestions regarding this?


Have you considered turning the partials into live components?

1 Like

Is your partial a .eex or .leex file?

I know this is quite old but I believe this is what most of us are looking for:


For folks in the future, I thought I’d also point out that there are both Phoenix.Component and Phoenix.LiveComponent (as @Dlacreme identified). There are some “partial” use cases that might be satisfied by the former. As I’ve seen Component and LiveComponent used interchangeably in some tutorials, thought it worth mentioning.

1 Like