Organising your Phoenix app into components

Phoenix Forum Questions / Help
, , ,
1

Hi all,

I’m quite new to web development and recently I’ve started working on a website using Phoenix. I realized pretty quickly that I need to find a way to reuse as much of my HTML as possible, otherwise I’d end up duplicating a lot of code. Refactoring it later would be even more of a nightmare. I haven’t found an effective way of doing it though, so I was wondering if anyone here has any suggestions.

I’ve tried 2 approaches:

  1. Create a directory “components” inside your template (you can get creative here) and put a partial html.eex file there with parameters like <%= @arg %> and if needed <%= @content %> block as well. then inside your views create components_view.ex which might contain methods like render_modal(arg do: block), do: render_modal("_modal.html", content: block, arg: arg). It can then be used inside your other html.eex files as <%= MyAppWeb.ComponentsView.render_modal "arg1" do %> ... <%end%>.

  2. Surface UI: A React/Vue inspired library for LiveView. This is a very elegant solution and I really hope this project grows in popularity, however, I’ve struggled with it. First, I got the impression that its components only work with live page, not html.eex (I could we be wrong though) – this became a problem when I was dealing with authentication (phx.gen.auth) which I believe requires controllers. Second, it really concerned me that when I ran into problems, there was virtually no information online about the problems I was facing because this library is so new. Additionally, if you go with Surface, then I don’t think that you can use embedded Elixir anymore, you are forced to use the Surface directives, which I think is fair enough.

Of these two approaches, I’m choosing to go with (1) because it feels safer, but I still feel that this approach isn’t exactly smooth. I think Surface is what I’m really looking for, but it isn’t quite mature enough for someone inexperienced like myself to invest in. As for the full-blown frontend frameworks, I’d really prefer to avoid them if possible. They might help me organise my code, but they would introduce another layer of complexity.

I’d love to hear about your experience with this. Have you found an approach to organise your frontend in a way that works well? Do you have any recommendations? Surely it’s possible to create production-grade websites with Phoenix while keeping your codebase clean.

Many thanks!

3 Likes
2

This is briefly covered in the Phoenix Guides.

What I do is similar to your (1) but I don’t add render functions in a view and call them directly.

I create a directory inside lib/my_app_web/templates which is usually named shared or partial and place the “shared” templates there. For this conversation I’ll just call it shared.

Create a template:

<%# lib/my_app_web/templates/shared/hello.html.eex %>

<strong>Hello <%= @name %>!</strong>

Then create the view:

# lib/my_app_web/views/shared_view.ex

defmodule MyAppWeb.SharedView do
  use MyAppWeb, :view

  # add any supporting functions for the shared templates
end

Then in any other template:

<%# lib/my_app_web/templates/page/index.html.eex %>

...
<%= render MyAppWeb.SharedView, "hello.html", name: "world" %>
...

Hello world!

If you want to nest directories under lib/my_app_web/templates/shared like lib/my_app_web/templates/shared/components for organization you’ll need to add pattern: "**/*", to the view function in lib/my_app_web.ex like so:

...
def view do
  quote do
    use Phoenix.View,
      root: "lib/my_app_web/templates",
+     pattern: "**/*",
      namespace: MyAppWeb
     ...
  end
end
...

Then when you use a template that is nested just provide the relative path to the template in the render function like so:

<%# lib/my_app_web/templates/page/index.html.eex %>

...
<%= render MyAppWeb.SharedView, "components/modal.html", conn: @conn, arg1: @arg1 %>

<%# If you're needing to pass many params (args) to the shared templates like arg1: @arg1, arg2: @arg2 etc., you can use `assigns` instead %>
<%= render MyAppWeb.SharedView, "components/modal.html", assigns %>
...

Hope that helps.

3 Likes