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

Hey guys, I’m legit struggling with deciding the stack setup for my next project. I really want to code in elixir for the backend but I want the front end to be easily editable by other developers. I cannot afford an Elixir developer, but a JS frontend developer is much more within my range. I much prefer being in the backend.

Right now I’m thinking about either having a Phoenix or Absinthe backend with a JS frontend, or to do full on sveltekit. Ideally, I’d like to have the first, but I’m not sure how to most productively implement this.

So how best to I optimize the workflow between an Elixir backend and a JS frontend? As a solo-dev, that aims to expand how would you recommend doing this? Do I have a sveltekit server in between for SSR and file based routing? That would mean I’d have two servers I’d have to deal with, which doesn’t make much sense…

It’s very overwhelming for me and I definitely have analysis paralysis but I would love to have some guidance on this.

Thank you in advance!

PS- I’m still quite new to all of this so maybe I’m missing some concepts that would make this easier.

2 Likes

That would break the ‘solo’ project, right?

Having done a quite large solo project myself, I did regret it not being LiveView. The additional setup for SSR, API mapping etc was quite time consuming. Also the JS world has the awkward habit of hypes and breaking changes. Svelte might soon be a no-go once the JS framework train moves further.

However, when you really want to go the JS frontend route, the combo Absinth + Apollo is great. GraphQL provides some flexility and easier mental model (imho) while working on a separate backend and frontend.

Ps. The reason JS devs are cheaper is mostly because the language is popular and basics easy learned making for a good stream of newbies. It’s not a bad thing perse, but remember that 100x a cheap rate is more expensive then 20x a higher rate.

9 Likes

I have been in that hell as a solo developer.

Rails + AngularJS
Rails + EmberJS
Phoenix + vanilla Javascript

Then LiveView appeared, and I immediately switched to it the first day it was publicly released.

LiveView is the way to go. You will save tons of time. Less overwhelm. Less frustration. Simpler. More productive. Happier.

8 Likes

Agree with what they said! ^^

LiveView has been making leaps and bounds, not just with performance tweaks but in areas which some might have considered weak points for this type of tech.

Have a look at things like Surface - A component-based library for Phoenix LiveView and 🍿 LiveMotion - High performance animations for Phoenix LiveView and when you really must have a SPA/heavy client based JS, then you could use Hologram - full stack isomorphic Elixir web framework alongside Phoenix! :003:

Personally I would go LiveView first and then (use it/Phoenix with) Hologram and then something like Svelte if I really really had to (tho in that case I would probably really be needing something WASM).

This is jmo, ultimately just go with your gut :023:

5 Likes

Maybe a hybrid approach?

Using Svelte in your Phoenix App? I ran across GitHub - nikokozak/svonix: Render Svelte components in Phoenix views. a while back. Did not try it but could be interesting.

3 Likes

Would you know how this library works? No SSR? What are the limitations?

1 Like

I absolutely love LiveView, but as OP said… it’s hard finding an Elixir dev; it’s much easier finding a frontend JS dev.

Even with LiveView, I’m not a very good frontend dev. It might make more sense for me to make a GraphQL backend, then let a frontend dev work their magic in React or Vue or whatever is popular these days.

2 Likes

I do not think you should choose elixir for your project if your another developer knows nothing about it.
Elixir is just a tool but not a goal.

It just compiles a svelte component where you can treat it like a component or partial. The interop between live view and this library doesn’t exist so you have to prevent it from updating when using live view. As for SSR, I think not since it’s a JS component, but I’m not certain.

Exactly my issue. I love Elixir as a backend but I want to be able to have someone come in and work with the front end because I am really not that good at, nor do I like, the front end.

Too much css & tears, too little time.

1 Like

What I would go with is

  • Single repo, unless there’s a REALLY good reason to separate them out. Just makes following changes easier.
  • Use Phoenix with NPM. You can still use esbuild, but you can also easily install all the other NPM packages you might need.
  • Pick whatever frontend framework that makes sense. I’ll defer to advice by other’s here. I love Vue myself.
4 Likes

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.

2 Likes

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.

4 Likes

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.

3 Likes

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

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.

3 Likes

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.

2 Likes

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

2 Likes

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

1 Like

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.

5 Likes

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 :003:

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 :lol:

3 Likes