Best workflow between JS Frontend w/ Elixir backend as a solo-dev?

I personally use with success:

• light backend based on Elixir + Plug (no Phoenix, no MVC, no boilerplate, no framework at all),
• heavy frontend: SPAs with Vue or vanilla Js + esbuild

It’s very flexible and adaptable but not for everybody’s taste or needs.

What about coming at it from the other direction, find someone that you can work well with, understands your vision for the product and you can trust, take their advice on a setup that would play to their strengths? As long as things stay within one of the big options you won’t have much problem finding other front end devs who can work on it should you need to.

I do this too. There is a small caveat: you must keep the Phoenix’s version on the js side to match the version on the elixir side.

I found this out the hard way… after hours of debugging a LiveView that stopped working after upgrading Phoenix…

But yeah, we got an entire separate “app” for assets which uses NPM and Webpack. It so that we can share assets between our Rails app and Elixir app.

If there’s a need for SSR/SEO:

• LiveView
• Phoenix templates + vanilla JS (also Alpinejs, Htmx)
• replace Elixir by full JS SSR frameworks (SvelteKit, Next, Nuxt)

No need for SEO:

• LiveView
• Vue, React, SolidJS, … with a GraphQL/REST API in Phoenix

So the need for SEO or not seems an important factor for choosing the tech. It has not been specified or I missed it.

Imo it seems that all other solutions not mentioned in this list are kinda hacky.

Using a JavaScript framework with a Phoenix channel backend is a legitimate solution for a wide range of applications.

You can also specify a file path as your package version, so you set the relative file path to where your phoenix lib is. That’s how phoenix did it in prior versions to.

Something like file: ../deps/phoenix

LiveView might be a no-go if you really don’t want to touch any view code or HTML at all, but hear me out, it really sounds to me like it would fit your use case perfectly.

Have you considered hiring someone that only knows HTML and CSS? And ideally some design skills. You mentioned cost being a concern, that would be even cheaper than hiring a front-end JS dev.

You would need to build the functionality on the LiveView pages but you can do it with no concern for CSS or aesthetics, and then they come after you and sprinkle all the beauty on the HTML and CSS.

From where I am sitting you need to weigh the cost of two things:

SPA

• Setting up and maintaining a JS front-end application with Webpack, Babel, Node, NPM, A framework, api endpoints.
• Authentication for those endpoints
• When you switch to a different front-end dev they will want to change it all because there is no industry standard for what set of things to use… And when that happens it will be very difficult for you to convince them that the re-tooling is unnecessary, because they should be the expert and you are self-professing to “prefer being in the backend”.
• When your front-end dev is working on updating Webpack or one of it’s cousins, they will run into some blocker that requires some config change in Phoenix, which they won’t know how to do, then they will ask you to help them fix it, because you are the Elixir expert, and there you will be, in the exact front-end that you want to pay someone else to work on.

LiveView

• Learning how to use LiveView (assuming you don’t already know) and write some views. Making some code changes as the library matures (trust me, they have been minimal, I’ve ben keeping up with it).
• Spending time writing the un-styled front-end code in LiveView.
• If you switch devs, they will complain about how the last person set up the CSS and want to move a lot of the CSS around or use a different technology for writing the CSS at a higher level.

If I was a betting man, I would bet you are going to spend significantly less time and money on LiveView while delivering features faster.

This is a great point and this is actually how many large companies go about it - there are the initial concepts which are then made into more complete designs, those are then built in html/css/js as a static build, then finally ported over to the framework or system being used (this is how we built devtalk and all previous projects I have worked on).

Personally moving forward I want to try the reverse, build the system and then focus on the design and UI once everything is working as required. In part because back ends are much more complex than they used to be but also because it’s easier to try a few different approaches (or MVPs) to get a feel for what fits best for your vision.

Or find someone you think is capable and just get them to learn Elixir/Phoenix

We’re really lucky that we have so many books and learning material and I am constantly being surprised when I think surely there can’t be many more topics to write about Elixir now, then PragProg (or someone else) comes out with another one

I’m going through a similar situation at the moment. I’d already evaluated a few of the options discussed in this thread and came to a conclusion - it depends

You haven’t described the problem space that your product is trying to solve. For my project, it involved a lot of use of the Twilio API. I started with LiveView and used React for the Twilio bits of the page. When I pushed LiveView hooks to their limit, I ported the whole page over to a React component rendered using Remount in a standard heex template. The React HOC that manages everything is getting pretty gnarly, so further down the line I might move most of that out to a SvelteKit app.

I’d say start with LiveView, as your pace of productivity will be much faster than all the extra work required by you trying to keep an API and SPA always working together, especially if you’re duplicating business logic on both sides. If/when you bring someone else on board, then you re-evaluate, or they might be fine with learning Phoenix.

Everyone in this thread raises some good points, but I think @thojanssens1 and @AstonJ are on the money.

IMO, if your idea is design heavy or requires a lot of client side interaction that LV isn’t suited for, then build it using whatever JS framework you like. If not, start with LiveView and push it as far as you can.