I am trying to making a note app like clone of “todoist” webapp but I have some perfomance issues when I submit a note it takes some time on every note to make a http request to server and save note in db and then populate my list with new notes. How do I prevent http request and db request on every create note?
Hello!
You cannot prevent neither of them, otherwise how would you store the to-dos? Does it work slow locally?
How is the webapp built? React, Angular, Vue, etc. And the back end? What did you use? Maybe a profiler can help you spot the problems. Take a look at google chrome’s lighthouse or the performance tab of Firefox (F12 or Control + Shift + i):
Google “optimistic update”.
3 Likes
One strategy might be to do the db stuff in a way that doesn’t affect UI performance, such as using promises, or even web workers.
I guess this relates to @jenovs suggestion above.
I was thinking to use browser’s indexdb to store notes locally and do HTTP and DB stuff in background, is this good idea?
No, it’s better to use what @jenovs suggested.
However, if you’re having performance problems with this kind of app, I would try to understand why it’s slow, since it shouldn’t (it is too simple to have performance issues, unless you added many features).
How do I implement “optimistic update” in my webapp, As far I know about optimistic update is that change UI before server sends confirmation about change is successful or not, if server throw an error then change failed or everything works fine, It’s like freecodecamp like button I don’t think when user click the button server makes a HTTP or DB request and save the like in DB cause doing network operation takes times but it seems like instant?
Yes, that’s it 
.
You assume that the transaction is successful immediately and only if there’s an error you roll back the change, that’s why it’s called optimistic (instead of pessimistic) .
Something like:
async function updateUiComponent() {
component.changeToSuccessfulState();
const options = {};
try {
const response = await axios.post('https://project.com/api/resource', options);
} catch (e) {
console.error('Something failed:', e);
component.changeToErrorState();
}
}
Depending on how you implement it, there will be problems like how do you notify the user that the transaction failed? For this case, however, it may not really be a problem.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.