engineeringdept

engineeringdept

LiveView Websockets in the real world

We’re currently using LiveView for part of our admin system, and getting on well with it.

I’m interested in potentially expanding to parts of the user facing sections of our site, but interested to learn more about the characteristics of LiveView/Websockets in real world conditions.

Our user base is almost entirely mobile, skewing towards lower end devices and data plans.

How well does LiveView (and the broader WS tech stack: client libraries, browsers, etc.) handle slow/lossy mobile connections, and older browsers?

Beyond using the LV hooks for in flight messages, is there anything to look at when architecting our app to minimise potential issues?

Does anyone have war stories from Websocket deployments at scale to learn from?

Thanks!

Most Liked

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

100% agreed.

As a matter of pragmatism however if your team is 90% Elixir people and your user base is exclusively businesses with solid internet though, it might be a fine provisional choice even for eg: confirmation dialogues.

In the long term though what I’d love to see is improved JS / LiveView interop. I’m finding that managing the state of your domain in LiveView to be a much improved experience over Javascript. I haven’t had do debug redux cache issues or anything like it yet, and I don’t miss that experience from the SPA world.

At the same time, we just built a collapsable side nav and to your point, it isn’t good UI / UX to manage that collapsing state via LV. Confirmation dialogues and a host of other “display only” UI interactions probably fall under the same category.

I think the jury is still out on whether LV + some spartan JS can be a solid (online only still required) SPA like replacement. From a “we need to deliver features fast and are a mostly Elixir team” perspective it’s quite nice. If we could hire a half dozen react developers though I’m not sure that we’d stick with it.

Exadra37

Exadra37

Nothing like a real world user experience to reply to your question.

So just jump in a train, car or bus commute and keep using your project with live view and then you will have a first hand experience on it. That’s what I am planning to do when my MVP is ready.

As a train commuter in a country with very bad mobile internet connectivity, even when inside the capital I can say to you, based on using other normal sites, that Live View will perform bad in this scenarios, specially when I am seeing people relying in live view to manipulate everything in the DOM.

While an amazing product the Phrenzy around it made it a disservice, because live view demos floating around are pretty much bad examples of using it in the real world.

My advice is to keep live view to a bare minimum in your web app. Just use it in places where you need to apply business logic to what you are doing, and forget all the other fancy uses. Even so I am to see how bad the user experience will be, and I am doing my app to allow me as much as possible to easily go back to normal Controllers.

So my advice is to cool down our hipe around it and put on the shoes off the end user and go to the terrain and use what we are building with live view.

Ah and remember that not all your users have a powerful laptop or mobile device like yours, thus when going to the field pickup your old laptop and mobile device and use them instead. Nothings beats a real user experience, thus please I ask to everyone to not come back to me to tell that we have tools in the browser to simulate the same or to use the built in Live View debug to throttle it.

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

YUP. Phrenzy was neat but impractical unfortunately.

Liveview works great when it is used for UI interactions that must involve the server, because that’ll take the same time no matter how you write it. Form interactions are generally fine, live data push updated from the server is great.

No matter how much you use it, you MUST avail yourself of the various status classes the phoenix adds to stuff to provide user feedback. A modal that takes 500ms to pop up can feel completely disfunctional, or it can feel completely fine depending entirely on whether the modal button gets a spinner instantaneously. Phoenix makes this easy, but you do have to do it. There have been really interesting studies on what people perceive latency to be, and you can get away with quite a bit as long as there is some instantaneous feedback that lets people know their click or tap was registered.

And as a last note, we’re doing a wonky thing where all of our live views are actually making GraphQL calls to fetch their data. What this means is that everything they can do a dedicated mobile app can also do without any additional work on the backend. For specific mobile scenarios that need to be highly optimized we just went ahead and built a dedicated mobile app.

Where Next?

Popular in Questions Top

qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
mgjohns61585
Could someone help me? I’m making my first elixir program, number guessing game. I can’t figure out how to convert the user’s guess from ...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
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
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement