jinder

jinder

Hi all,
I am new to Phoenix with small frontend experience. I have a usecase where I am curious to know how you would approach the following:

Use Case : Need to render data in table where rows can be sorted again column in acs and des. order of values. Sorting happens for the current rendered rows.
Since the sorting is straightforward, should it be handled by liveview handle_event or directly handle on frontend using component like material-ui react table . I am using react for frontend. Would there be any advantage of liveview over react in such case ?

Showing Posts 1 to 5

tfwright

tfwright

Most of the power of live view comes from keeping state on the server and rendering markup there. Rendering a table is an extremely common use case. I would only even contemplate dealing with react if I had to build a front end for a backend I dont control.

kanishka

kanishka

Not that I can tell.

My limited understanding of the advantage of liveview is that you don’t have to implement an API and your full stack devs can focus on one programming language. If you are dealing with basic data entry/crud UIs for an early startup or small company with limited resources this can provide a boost in productivity.

lerosbif

lerosbif

2 years later, is there any update to the when and why to use React over LiveView for a frontend in Phoenix?

As a learning exercise. I spent some time wiring up React to Phoenix, and in the end, I am left pondering the ‘why’ in all of this. Are there things that LiveView cannot do as well as React?

garrison

garrison

The obvious things are offline/local-first and e2e encryption. There are also some latency advantages for a client-rendered app but the difference is very domain-specific in practice because most React apps are hitting the server for API calls constantly anyway and the distance to the database matters much more than the distance to the server.

There are some advantages for client rendering in terms of performance for some use-cases but LiveView apps can be optimized to perform better than you would probably think and React optimization is not trivial either.

LiveView apps are stateful on the server so (and this is implementation specific) they may be more expensive to operate than a client-rendered app. In practice I don’t think this is very meaningful unless you are operating at astronomical scale with thin margins - servers are cheap and Elixir scales out.

If you want the best possible user experience I still think client rendering will always win, but it’s important to understand that LiveView has a declarative stateful rendering model (like React) but on the server. This is fundamentally different from other approaches like HTMX, LiveWire, etc. It is actually possible to build extremely complex interfaces in LiveView (unlike those others), and the advantage for client rendering with respect to the average web developer is very small. The vast majority of web devs will never even get a chance to work on an app where there is a substantial difference IMO, at least if the current state of the industry holds.

I’m referring to apps like Linear or Figma here.

Finally there are a handful of use-cases for which I suspect server-rendering is actually optimal, which may be surprising. These are cases where the state is inherently biased towards the server. I think a good canonical example of this is something like the AWS console - everything is inherently server-side, and the UI is just a thin client over those APIs. I suspect that AI/Agentic apps will fall into this category once people figure out how to actually build them - a good example would be the Deep Research paradigm, where again everything is happening on the server essentially by definition.

lerosbif

lerosbif

Thank you for the detailed reply. You have given me a lot to think about regarding the architecture of an application I am considering developing.

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
itzmidinesh
Hi all, I’m working on a Phoenix project where I need to make external HTTP requests and I’m trying to choose between Req and HTTPoison....
New
pragdave
How do I tell Hologram not to escape HTML when substituting into templates? {Textile.render(@product.long_description)} escapes the HTM...
New
rlipscombe
I’d like to create a file with 600 permissions (rw-------), but there’s a race condition if I create it and then change the permissions. ...
New
leoschweizer
Hi, we run different LLM models across a cluster, with each node loading a configurable subset. Model-specific queues let nodes consume ...
New
rlipscombe
When I use Mix.install with a git dependency, using git@github.com:... how do I change the SSH identity used? I’ve got two Github accoun...
New
adr
Hello all. I have a question as to best practices for code organization when implementing a liveview with a lot of responsibilities. Sup...
New

Other Trending Topics Top

dominicletz
Hey there, I haven’t seen a list of useful Elixir specific skills for the popular AI tools yet so I’m starting one here with my first. ...
New
raa-ziq
Hi everyone :waving_hand: I wanted to share something I’ve been building — NowBlind, a random chat app designed to help people discover ...
New
mudasobwa
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
KristerV
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
OndrejValenta
(I just needed to vent somewhere and LinkedIn is full of hope, or hype, I’m not sure which exactly) AI dream has many faces, but general...
New
kip
Localize is the next generation localisation library for Elixir. Think of it as ex_cldr version 3.0. The first version will be released ...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews