Ten+ years of React later… I really love LiveView. Here is a philosophical question of sorts. Is it appropriate to still use React for richer interactive client-side interactions? Take for example a calendar that I render where the user can click on various days and trigger a modal-form appearing.
It does seem like a loss to not have instant UI changes since I have to wait for the wire - that ever so slight delay in UI while we make a roundtrip over the socket.
Or should I try to really go all in and do as much as possible? Am I just fearing change?
You can use JS commands if you’re missing the client-side instant feedback. Of course this isn’t always tenable if you have a large number of different forms as you need to hide the form then show it. I would caution against using React with LV personally as now you have two ways of doing things and, if it’s a project others are going to come in on, you’re going to have to have solid rules about what is React and what is LiveView.
Otherwise for things like calendars I just find a vanilla JS plugin (there are several good ones) and use that with a good ol’ phx-update="ignore".
I’m a bit of a LiveView evangelist, though, so certainly seek out other takes
It certainly poses these risks, especially if your connection speed is slow, however the content size of data over the wire is not that big and usually you can’t notice the input lags.
Speaking generally about this, 95% of web applications don’t need a dedicated frontend framework and liveview is a saver in this regard, the time you save having not to deal with all the frontend complexity and a unified code base is an amazing tool that differentiates between a product that can succeed and fail.
In your example. would the modal form be for a new event or would it pre-fill with event data? If the latter, unless you load up that month’s events on page load, wouldn’t you have to make the round-trip in React? I agree with @sodapopcan that JS commands would be the way to go if you want instant feedback.
live_svelte might be of interest to you as it gives you reactivity with svelte while also saving over the wire with Liveview, but could also introduce some complexity to your project.
Thanks for the feedback! I agree of course that the content size of the payload is very small, and while the connection is persistent, there’s just enough of a lag that it makes the UI (in our case) feel less magical. I also agree that mixing LV and React seems too complex, which means I have to make a choice.
It seems like it ends up being a decision between client payload size (JS bundle) vs richness of interactivity (responsiveness). I can’t believe after all this time computing still has tradeoffs!
It’s funny because with the application we’re developing, we end up in such an abyss of JS services. We’re using Next.js and we need a good way to handle async work payloads. Well that’s tricky so we use inngest.com. A nice little managed service, but gosh does it seem like such a luxury to just fire up a Phoenix.Task and enjoy the richness of BEAM/Elixir.
This feels very much like a case of “don’t fight the framework.” If I want to enjoy all the benefits of Phoenix, I should use LiveView, period.
I have tried using React and LV in two ways.
The first was to basically do in LV only the initial session establishment for the security and then I employed React that send events to the server side when new data were necessary.
The second was by following the paradigm of Stephen Bussey where I had a number of smaller React based components where I found it necessary.
However, in the latest version of my toy projects (after Phoenix 1.7), I totally removed React and instead, I use a number of Hooks where I want to avoid client-server interaction. You can even consider localStorage at the browser if it makes sense.
Summarising, in my opinion, if you can have small JS libraries to handle the client side functionality you need, then I see no reason in introducing React or any similar framework in LV. At the same time, pure Elixir solutions are inadequate for a number of applications (but Hooks are here to save us).
