devbrett

devbrett

Choosing Phoenix LiveView - The difficulties deciding between Phoenix LiveView and traditional frontend frameworks

If I need to ship a new product in a week, Phoenix LiveView is my go-to framework.

Elixir LiveView is incredible, and an alluring choice for software leaders looking to develop applications super fast. However, in recent experience, I’ve seen teams hit some pitfalls.

The trick is to understand what Elixir LiveView excels at, and what it doesn’t.

TL;DR: LiveView is perfect for internal tools and simple apps. Skip it for complex UIs, offline-first apps, or if your team doesn’t know Elixir well.

Most Liked

DaAnalyst

DaAnalyst

A LiveView developer here (from its earliest days)..

Is your team familiar with Elixir?

As opposed to what? JS or Python? The languages every human gets born with knowing full well, so outside of the two learning any other language is like a burdensome extra skill yet to get acquired?

IMO out of all the cons you list there, the only one holding water is the continuous connection requirement, and even that one is only partially true b/c LiveView does handle a loss of connection gracefully when idle, the only catch being you can’t really change the server-side state if the connection is down, but that’s true for every web app.

What you don’t mention in your post is that LiveView has the BEAM VM underneath meaning you can achieve things with processes WITHIN your app you can only dream of in any other framework. That’s not to mention the savings on, say, Amazon services that you otherwise MUST pay for because your Lego-component friendly framework of choice runs in a single server-side thread, has no in-memory DB of its own nor does support horizontal scaling while it’s vertical scaling is non-existent.

The more appropriate questions you could’ve asked in your post are the following:

  1. Are you building a fat client app (for that’s the only kind of web app LiveView is not made for)?
  2. Are you building an app that’s meant to scale without rewriting it each time it gains another order of magnitude more users (b/c with LiveView you won’t have to)?
  3. Are you planning to hand most of your SaaS income over to Amazon (for with LiveView you won’t need to)?

My 2c

12
Post #2
garrison

garrison

I wouldn’t really refer to terminating the process and destroying all of the state within it as handling it “gracefully”. It would be fair to say that LiveView could handle it gracefully, but it doesn’t.

I do think for certain use-cases having a thin client with state directly next to the BEAM/database is advantageous. However, it’s not like this is black and white; you could have a client-rendered app that interacts with a BEAM backend and still get all of Elixir’s benefits on the server.

I think this premise is a bit absurd in general, but also I would point out that a thin client approach is more expensive on the server side than a thick client because you have to do more work on the server.

But really I am just restating the previous point: you can use Elixir without LiveView and get those same benefits.

kjwvanijk

kjwvanijk

Thank you for writing this article, definately thought provoking. In the past I have read similar analyses of liveview’s limitations regarding client side interactions. What I always find puzzling is that when there is critique on liveview for having to write a few js/ts functions through a hook, the solution for not having to do this is bringing in a full js framework complete with npm hell and lots more js to write than if you would be creating a hook.

steffend

steffend

Phoenix Core Team

It could, of course. But as you already noted, there are gotchas. Some things are sensitive so you encrypt them. Some things won’t work if you reconnect to another node (NIF resources). With all that, I don’t think it should be part of LiveView itself and you instead roll your own if necessary (or build a library).

DaAnalyst

DaAnalyst

Have you tried pulling the ethernet cable out and then plugging it back in? Unless LiveView was trying to push or render during that period the process(es) would not restart. You wouldn’t even notice it happened.

Of course, I wasn’t arguing about fat client (“client-rendered”) apps. One of my points was in fact that that’s the only case LiveView is not made for. And yes, any app that keeps sufficient state on the client to function in a stand-alone mode and only query/mutate server state on explicit demand is in essence a fat client app.

It depends on the particular requirements. If the app doesn’t require frequent queries/mutations, then sure, but that’s again the fat client type of app that’s not perfectly suited for LiveView.

On the other hand, if the app is chatty, and you have a REST API, you can stay assured the amount of data transferred over the wire on average (not accounting for full page http refresh) will be far less if its LiveView server-rendered than if it’s “client-side” rendered. It’s easy to understand why’s that, and we have also proven it to ourselves in practice.

Btw, I only hope we’re not having this conversation solely because of the LiveView process restarting when it detects it’s out of sync.

Where Next?

Popular in Blog Posts Top

thiagoa
Hello everyone, I published the first post of a series which aims to TDD a full application under an Umbrella project. Each post will g...
New
fredwu
Hi folks, I wrote a blog post the other day on how I built my MVP in 3 months whilst having a day job, using Elixir/Phoenix/LiveView. Th...
New
mudasobwa
Blogged about the motivation and reasoning behind my idea to create yet another FSM library. Long story short: I did it in a proper way :...
New
marcin
Hi! :wave: I wanted to refresh my knowledge on how to mix phx.gen.auth with local password users db, as well as OAuth providers such as ...
New
wmnnd
Hey there, I’ve started a little blog series about building and deploying Elixir applications. Now I would like to share with you the f...
New
lawik
Building on other people’s work I bashed things together and suddenly I can know when someone is speaking using Elixir and Membrane.
New
adolfont
Hi, You all probably know that José Valim is Brazilian and that his native language is Portuguese. I, Herminio Torres, Matheus Pesanha a...
New
brainlid
Dialyzer is a tool that you’ve probably heard about in the Elixir community. You may have even used it. However, adding Dialyzer to an ex...
New
ConnorRigby
Just finished a post for Embedded Elixir and I thought it should be cross-posted here: I’ll update this thread as posts get published. ...
New
mudasobwa
Just blogged on the general approach to creating easily extendable applications with plugin support.
New

Other popular topics Top

Tee
can someone please explain to me how Enum.reduce works with maps
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement