tmbb

tmbb

I’ve been looking at the possibility of implementing a server-side VDOM (Virtual Dom, like Reactjs, Vuejs, Snabbdom and onthers). The problem I see with this is the high latency of the updates, and the way it interacts with input components. Suppose you have a VDOM that returns the following (using vue-style templates):

Enter your name: <input v-model="name"></input>
<br/>
<span>Hello {{ name }}!</span>

The UI should be updated as the user types (probably debounding events, but that doesn’t change the main point).

Suppose the user types a “My Name”. The event is sent to the server, which sends the minimum delta so that the browser’s DOM is changed. But suppose now that before receiving the update, the user types “Another Name”. This can happen because latency between client and server can be arbitrarily high…

You’ll have something like this:

  1. User requests a page. The server sends a DOM with name = ""
  2. User types “My name”. The server receives an event. The server sends a new DOM with name = "My Name"
  3. The user types “Another Name”
  4. The user receives a new DOM with name = "My Name", which overwrites the text in the input component. This is a very surprising UI change
  5. The server receives name = "Another Name"
  6. The UI changes back to the previous version.

I don’t think how one can avoid this. There is a serious mismatch that will keep the client and server permanently out of sync. Althout I’ve often felt that a VDOM was superior to the approach taken by Drab (which has the concept of living assigns, and instead of re-rendering everything and diffing the result updates parts of templates that correspond to specific mutations), now I’m not so sure, because of the way the network latency messes with the input components’ updates…

I’m not aware of any widely used server-side VDOM, so I don’t know if anyone has managed to find a way around this limitation.

Most Liked

LostKobrakai

LostKobrakai

Why do you want to handle user input live on the server? The only common case I can see using something like that would be live search results.

peerreynders

peerreynders

:icon_question:

Given that latency in the real world is always greater-than-zero, chattiness will always create problems (prefer fewer messages with larger payloads (i.e. more coarse grained messages)).

source

grych

grych

Creator of Drab

I’ve never heard about mutation watchers before, this is why I doubt I am using it in Drab. But it always may be an issue with a terminology.

I am afraid Drab is not so sophisticated. It uses something I may call “naive direct updaters” than “mutation watchers” :slight_smile:

Where Next? Top

Trending in Discussions Top

AstonJ
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
2977 94592 917
New
cblavier
Hey there, It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
heathen
Quite interesting article Google brought me. Didn’t find any mentions about it here. What do you think in general? Would you use togethe...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
AstonJ
Since we have deprecated our Erlang sections (as we have dedicated Erlang Forums now) let’s add this thread for those who’d like to post ...
New
maennchen
:warning: Security advisory: Decimal DoS vulnerability A vulnerability has been published for decimal where very large exponents can cau...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews