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 create
components_view.exwhich 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%>.
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.