pillaiindu
How do you achieve Optimistic UI in Phoenix with LiveView?
Elixir is fast, but not everyone on the planet is having a fast internet connection. Optimistic UI (previously called Latency Compensation) is a concept first introduced by Meteor framework.
Let me explain what Optimistic UI / Latency Compensation is:
For example you’re sending a message through a chatbox.
In traditional way:
- You typed the message
- pressed enter or clicked send button
- the browser sent an ajax request
- the data was stored in the database at server
- the server sent an OK response
- the message got copied from the textarea to the messages list
- the textarea got cleared.
In Optimistic UI way:
- You typed a message
- You pressed enter / clicked send button
- Message got copied directly to the message list, and the text area got cleared
→ rest of the process of sending message to the server, saving to database, OK response from server everything was done in the background.
So the Latency Compensation / Optimistic UI way feels a lot faster to the user, and it makes the UI bearable if the internet is slow.
(for details on Latency Compensation / Optimistic UI, read the linked post).
I asked Meteor team, if this feature can be used outside Meteor? They replied that Apollo client (for Graphql) which is created by the same team provides that feature under the name Optimistic UI.
I wanted to know if it’s possible using LiveView or vanilla JavaScript with Phoenix, instead of going the Apollo and Graphql way (which also brings the cruft of front-end frameworks like Vue and React etc).
Most Liked
peerreynders
Reef is an anti-framework.
- Why I wrote my own vanilla JS alternative to Vue and React
- How I built my own vanilla JS alternative to Vue and React
I think he is encouraging people to peek under the hood rather than just simply use it.
- Refactoring a vanilla JS app with state based UI
- State based UI vs. manual DOM manipulation
- State-based UI with vanilla JS
- Handling classes and other attributes with state-based UI
Bonus: Lean Web
josevalim
LiveView now adds some classes, such as phx-click-loading, whenever you do an action. This can be used to provide some UI feedback and in many cases. For more complex cases like the chat example, then you need to fallback to JS with phx hooks.
peerreynders
True Lies Of Optimistic User Interfaces (2016-11-15)
In most cases Web Worker is likely overkill for this as the server interaction is asynchronous to begin with. You are simply updating the page before the request to the server is made. So working with Promises or async functions should be enough.
What can make this approach more complicated is that you need enough context to undo/update the page should the request fail, especially as the user may have taken other actions since then.
I think one good example of Optimistic UI are iMessage messages.
The text bubble appears as soon as
send is activated - even though sending hasn’t completed. Later, if the the message can’t be delivered it is marked as such (and the device vibrates to call attention to that fact).
Last Post!
D4no0
While I generally agree with this, I also think that a lot of things we take as standards these days, like for example that UI should be always responsive in some manner just don’t make much sense for some projects.
I used liveview for admin panels for almost all of my projects. There, I don’t care about user latency, even though that can be a problem sometimes if you have huge payloads (which happens more often than I expected at first). You want a fully reliable system that is fully synchronized with what actually happens on the server, and the complexity running a configuration server is usually insane, so adding the additional layer of client-side state is just unwise in such situations.
We have to fully understand where it makes sense to add additional features, otherwise I think the trip to server liveview offers by default is superior to any hacks involving client-side state modifications.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"