Good pattern for structuring a project

I’m interested to know how other people are structuring their projects.

I do React mostly for my day job (up skilling on Elixir and Phoenix as I really like what it has to offer). One thing that React does really well is let you make small reusable components, for many cases this can be very useful and easy to work with (although often it can also be overkill as well). It’s also great when paired with Tailwind because you just reuse the component and not the same styles in multiple places. ie. a simple example would be creating a Button component with styles that can be reused.

Being relatively new to Phoenix and Elixir I’m not sure if it has this type of pattern, are people implementing anything like this, building up components to use? I have seen there is the concept of a Live Component, are people doing similar implementations using that? Without components, changes to styles with Tailwind need to be made in multiple places.

Also keen to know if people just use the ‘live’ directory as just a flat folder for all their pages or using folders, or some other structure?

I’m building a non-live Phoenix app and I’m really looking forward to using Surface’s components for the same reason you mentioned - Tailwind (or any CSS styling) adds a lot of “noise” to what is really a straightforward HTML form. Theoretically you can do the same with partials, but components is a game-changer for me.

I’m trying to gather the bits and pieces here: Phoenix 1.6 is coming with support for .heex (HTML-aware templates?) that are enabler (?) for this. I haven’t verified that yet, but non-live components might be already supported by Surface.

Would be great for somebody knowledgeable to chime in on this, @josevalim maybe?

1 Like

I’m not Jose, but I have been using Surface for >8 months now. Here are my thoughts having come from a similar react background.

Surface has been my game changer. Before it I was using react + apollo with an absinthe backend. (still a great stack if you have a react/fe team). Always felt raw eex/leex templates were missing something, that I had with react component(s).

The PETAL stack + Surface is my current go to. Maybe just .heex will be good as it adds sanity checking to the html structure…

The Surface component model is awesome, and very familiar when coming from react!

Hope that helps


Thanks for the replies. I Will take a look at Surface, funnily enough, was listening to Chris McCord on the Thinking Elixir podcast talking about components and Surface and the work that is happening there. This was the episode if anyone is interested #024 LiveView Uploads with Chris McCord - Thinking Elixir (mentions it around the 40min mark)