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

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

user1606
1#
user1606 Published in June 20, 2018, 1:24 am

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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO