IVR
Organising your Phoenix app into components
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:
-
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 createcomponents_view.exwhich might contain methods likerender_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%>. -
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!
Marked As Solved
l00ker
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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"