Home What is the best practice for refreshing front-end UI when making changes the the database through the UI?
Reply: 1

What is the best practice for refreshing front-end UI when making changes the the database through the UI?

SuperStatistician Published in 2018-01-12 22:51:24Z

I'm looking to understand the best practices when updating UI and Database values simultaneously.

The Set-up

I have a table on the front end which is a list of items with the columns:

  • ID
  • Name
  • Create Date
  • Favorite button (star)

This list is pulled from the database via axios (similar to Ajax) when the page is loaded. The favorite button is a toggle for the user that changes the class and also updates the database. I'm trying to understand the best practices for updating the UI and the database.

Currently, the logic goes like this:

  1. Initial list is loaded on the page
  2. The user clicks the favorite button on one of the rows
  3. The UI javascript sends the update to the database to change the "favorite" value for that single item in the list
  4. Once a successful change is made the back-end responds with 200 success code
  5. The front end receives the successful change and then uses axios to query the full database list to refresh the UI list with the updated data

Is this the correct method to refresh the UI? The problem I see with this method is poor UI response time if I'm waiting to both update and then again query the database while the user is making changes.

Other options

Another option I've thought about is to update the UI list while simultaneously sending the update request to the back-end. The only difference is I would not "re-query" the database to update the data since it should match.

Armen Vardanyan
Armen Vardanyan Reply to 2018-01-12 22:59:12Z

This depends on more personal approach, I think. I personally think that making any queries at all is not necessary, if we certainly know what kind of change has been made. Or we can query for that specific object only, not the entire list. Or our API can be configured in a way that it returns the new, updated object from the database if the edit was successful (that's my favorite).

But one may argue that refreshing the entire list is a bad idea. It is

  • A heavier query for the database
  • More items to convert to JSON in backend
  • More data sent through network
  • More JSON to parse in frontend

As you see, this is cumbersome, and if you have many users, they may start bombarding the database with queries, though each knows (speculatively somewhat, but mostly correctly) how there data does look like at the very moment. So if the API cannot be configured to return the updated object, I suggest either to query only for the updated object, or not querying at all -- if we know what changes we requested the backend to make in the database, and we know the backend succeeded in doing that, then we just apply the changes in our frontend without any further thought

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.329657 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO