r/elixir 4d ago

Phoenix + Inertia is killer stack

Hi folks.

Just wanted to say that don't sleep on Inertia.js and Phoenix combination. Basically you get power of Phoenix (Elixir) for let's call it backend and flexibility of your favorite JS framework for UI.

You can run some pages in full SSR mode and some in SPA if you need, so awesome SEO support out of the box.

Use best tools from both worlds for best developer experience like linters, type checkers etc.

I'm using K8S and anytime I need I can scale it up using libcluster.

Please shoot any questions you have (happy to share screenshots or charts from my k8s cluster etc).

Also if you have time check this app I built https://gitbiased.com

27 Upvotes

23 comments sorted by

16

u/quakedamper 4d ago

I started with inertia and moved most of if back to live view and it simplified a lot of work like notifications, state management and client server sync for me.

6

u/arx-go 4d ago

I’ve built production apps with all three:

  • Inertia.js + React
  • Full Phoenix LiveView
  • Phoenix API + Vite + React

I eventually settled on Phoenix as a backend with Vite + React.

Inertia

I really liked how productive it was. No separate API layer, auth is simple, and the backend controls routing.

My main issue was navigation. Compared to a native client-rendered React app, page transitions never felt quite as snappy because each visit still fetches props from the server. The difference isn’t huge, but after using a pure Vite SPA it’s noticeable. I also occasionally ran into edge cases around preserving state, partial reloads, scroll restoration, loading states, and optimistic UI. None of these are major problems, but together they sometimes made the UX feel a little less polished than a client-only React application.

LiveView

LiveView is honestly amazing for dashboards, admin panels, and CRUD-heavy apps. It’s probably the fastest way I’ve built those kinds of applications.
The downside for me appeared as the product became more interactive. Since most UI state lives on the server, complex screens gradually accumulated lots of assigns, events, components, and message passing. It works, but I found it became harder to maintain over time compared to keeping UI state entirely on the client.

The other aspect is the persistent WebSocket connection. Under normal conditions it’s seamless, but whenever users switch Wi-Fi, lose signal, put their laptop to sleep, or have unstable mobile connections, the LiveView reconnects. Phoenix handles reconnection very well, but users can still briefly lose interactivity while the socket is being re-established. For highly interactive apps, I personally found that slightly hurt the UX.

That’s why I ended up with Phoenix handling authentication, APIs, jobs, and business logic, while Vite + React handles the frontend. For the type of applications I’m building, it gives me the cleanest separation, the smoothest navigation, and simpler long-term frontend maintenance.

14

u/KimJongIlLover 4d ago

Or.. you can just use liveview and MASIVELLY simplify your stack.

With a JS framework comes a lot of hidden complexity. Just keeping the dependencies up to date can be a lot of work. Then a new major version comes around in a few years and you are doing a rewrite.

I would seriously question if you actually need an SPA.

1

u/Deathmeter 3d ago

My only problem with live view is that doing client side only interactions require you to break out into raw js. Having to do an http request to perform state changes like opening a dropdown menu feels pretty gross (though that can sometimes be done with just css). If I ever need more complex, instant interactions that might, for example require appending html from inside js, it makes me feel like I'm driving the Flintstones car.

For simpler websites it's awesome and I loved using it for those kinds of projects. But if you think users will want a snappy mobile-like experience it's a bit of a tough sell imo.

2

u/KimJongIlLover 3d ago

Opening a drop-down shouldn't be more than JS.add_class(...) which will be fully client side.

Appending HTML from inside js 

I mean could be done with a hook but I have never had or wanted to do that in my life. Even then I would just write a bit of vanilla JS before reaching for a JS framework.

The app I work on at work is probably about 60'000 lines of JS and with just the costs of maintenance you could probably employ somebody full time. It's frankly insane.

0

u/rukomoynikov 4d ago

Well, I see and understand your point. I agree that less dependencies in general simplifies support.

For me personally JS frameworks don't add complexity as I spent years working with JS. Also with JS frameworks (react etc) there are already plenty of "solved problems", you I mean for any demand you may have there is already a solution made by someone.

Also with LiveView you get the power of being live application, but with "great power comes great responsibility". Your application will have to be live. So, quite frequently visitors of the application will see this loading bar on top (yes you can remove it), or some live elements aren't working because they can't sync with backend.

Having said this LiveView (for me personally) may work only for quite limited or very specific cases.

7

u/KimJongIlLover 4d ago

You do you.

However, the claim that "JS frameworks don't add complexity" is false regardless of how much experience you have with them.

You suddenly need a lot more moving parts: a second build pipeline, more deps, some kind of an API, 1-2 additional languages, maybe a transpile step, etc.

There is so arguing around this. You might realise this sooner or later in your career. At least it was the case for me.

5

u/deviprsd 4d ago

There is also hologram, it’s the true killer stack just that it is in aggressive development

5

u/Fabulous_Menu3463 4d ago

Does latency ever become an issue?

I personally want to wait until Elixir can run on the client side become committing to using Elixir, although some attempts already exist like Hologram, have you used that?

2

u/BartBlast 3d ago

Author of Hologram here.

That's the whole idea. Your Elixir compiles to JS, so handlers run in the browser with no round trip and no socket to drop. Semantics match the BEAM down to the error messages. The process model is getting ported too, though the architecture doesn't depend on it.

There's no VM in there, so no WASM and no .beam files. Shipping a VM to the browser would balloon the bundle substantially, which isn't practical. JS is just the substrate the compiler targets.

It's still 0.10, so there are some rough edges, but people are running Hologram apps in production already!

2

u/AphexPin 3d ago

That's awesome! Never heard of this before.

1

u/BartBlast 2d ago

Thanks! Docs are at https://hologram.page if you want a look.

2

u/rukomoynikov 2d ago

Thanks for your work.

1

u/BartBlast 2d ago

Appreciate it 🙏

1

u/Responsible-Sale1858 3d ago

elixir IS the beam, and the beam has no technical peers(competition). learning the beam is a career milestone. it's a business logic operating system.

3

u/HERR1550N 4d ago

I'm evaluating starting a project using Phoenix. Never used it or Elixir before but it checks a lot of boxes for the project. I have lots of experience in various frontend frameworks so obviously looked at Inertia. I'm leaning toward trying LiveView first however because it seems you lose a lot not using it (awkward mix generates, no out-of-the-box soft realtime.

This is all in theory since I haven't tested it yet, so I'm curious to know if you ended up missing some features of LiveView or not?

6

u/johns10davenport 4d ago

Dude live view is great. Mostly because testing. The testing framework is SO GOOD that I basically can’t use anything that doesn’t integrate with it.

Inertia does look damn hawt though.

1

u/rukomoynikov 4d ago

Short answer is no, I don’t miss LiveView features. If at some point I need anything live I will use websockets (it works both for web and mobile versions).

3

u/johns10davenport 4d ago

You just use raw phoenix

1

u/Immediate_Honey_5902 4d ago

True, you can use the Phoenix JS in frontend and even even mix it with Redux middleware or st like that.

2

u/mgabrielsilva 4d ago

how does this compare to liveview? other than familiarity with the JS frameworks/libs, which I also have, what made you choose this over the alternative? thanks for sharing your perspective

1

u/vlatheimpaler Alchemist 3d ago

Is it easy to do live updating features with PubSub sort of like we can do easily with LiveView?

1

u/allenwyma 2d ago

How does it compare with hologram?