1

Let say, user A has the name of 'James' and trying to change it to something else like 'John'. It might be stupid to ask this question but how do you apply this change?

I retrieve the new data from database and send back to Frontend to rewrite the data. However, it seems like it could increase network traffics. I was thinking like, storing the value inside the frontend and then the backend signals success or failure with the HTTP status codes. Then, rewrite data inside the frontend.

However, what I made a mistake and there is a difference between actual database and the state inside the frontend.

-- updated

enter image description here

First of all, apology for unclear question in the beginning. So, my question is, how to deal with the updated data between front and backend.

As user update some field like his or her name. When, user does that, the frontend post-requests to the backend with the necessary data. However, the name variable is also stored in the frontend's state. When the backend responses with 200, then use that frontend-stored variable to update the frontend's name state. I thought this would save some network traffic sending back the data for large-scale websites.

Currently, I've doing with the 2nd method. Get the updated data from the backend and send back to the frontend with the response. And then, the frontend just rewrites with the data.

I was just wondering how websites would take care of this. After watching optimization videos that for a large scale site, even few kb matters in order to boost up the speed.

Again, I am sorry for the unclear question in the beginning. And, hopefully this would clear up my questions.

3
  • 1
    Is the question you intend to ask "how to manage state between the backend and the frontend?" Jun 1, 2021 at 12:17
  • Yes, I am sorry the last part was not saved somehow. Jun 1, 2021 at 12:55
  • I added more. English is not my first lang. I didn't think of the I retrieve could be confusing to ya all. Jun 2, 2021 at 9:11

1 Answer 1

3

There are several ways to manage the front-end and back-end user interface. It's very important to realize that the two operate independently, so both will be maintaining state. The important difference is that the back-end has the authoritative state. Meaning that if there is a discrepancy between the two, the back-end is correct.

One of the ways many modern sites handle this duality is by making the back-end all API calls, and the front end is a Single Page App (SPA). Whether you use Angular, React, or some other front-end framework, they each have a way of receiving data from the back-end and knowing which parts of the screen need to be redrawn.

In this scenario, you will have a JSON representation of the user that both the front end and the back end agree on. If your user is allowed to change their name then the interaction would be something like this:

  • User interacts with a form that was drawn with the current user data
    • User changes name from James to John
    • User clicks the "Save" button which submits the form
  • Front end sends a POST to the back end telling it that state needs to change
  • Back end processes that information
    • Saves the change to the data store (commonly a database, but not always)
    • Returns 200 OK with the new user JSON object in the response body
  • Front end receives the object, and updates its state
    • The front end state management recognizes a change
    • Notifies all components rendering from that JSON that there is a change
  • The front end redraws itself with the new information

There was a style of development or web framework where the backend would handle rendering the whole screen, or a portion of it. That's now less common, due to the maintenance and the speed at which changes can be done. When you decouple the look and feel from the data, it opens you up to a richer user experience, with an appropriate amount of network traffic. Another benefit is the lower load on the CPU and memory required to render that information in the back end.

3
  • Thank you so much. I was curious how normal website does this. Do they like save changes inside the frontend and then use those states to update or get the value from the backend and rewrite. I felt like you must get the data from backend but then these large sites could benefits from reducing http size by storing data on Frontend and then update its own! Jun 1, 2021 at 12:58
  • 1
    If a UI shows the user that the name is James and they want to change to John, but the name was already changed to Jack, such cases can either be ignored (change to John regardless, since that request was last), or, notify the user that their screen was out of date (use some conditional spec on the POST: so as to request to apply the change only if otherwise not changed since some date, or version number is still the same, as known to the front-end requestor).
    – Erik Eidt
    Jun 1, 2021 at 14:40
  • 1
    You will generally wait for the backend to send the new state back, and then populate the front-end state, followed by a redraw. If for some reason the data is not saved, the user sees that the name is not changed, and tries again. Sometimes this process -- even with a successful save-- is too slow, and you will do an "optimistic save"-- send the data, and change the data in the front-end before getting a successful response. Both are done, but as you can imagine, if you do the latter, you have to deal with unwinding the front-end change if the POST fails.
    – ndp
    Jun 2, 2021 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.