Optimistic UI Exercise

[00:00:00]
>> So open up 02-optimistic-ui. We'll cancel this server and run node dev 2, to get our dev server for the second exercise going we should be on port 4002. And again, because of the way that cookies and Things work, you're going to need to log in again. So it's kody@remix.run, kodylovesyou, and we're in.

[00:00:31]
All data is fresh and it's awesome. So for optimistic UI, I think I will go into this a little bit after the exercise. I'll talk a little bit more about examples of Optimistic UI. Actually, I take that back. We're gonna talk about this right now. I'll demonstrate optimistic UI to you.

[00:00:51]
This is kind of what's in the background information. But let's look at Twitter as an example of Optimistic UI. If I say this is a test tweet. I'll probably get a couple of likes on this before I delete it. But for the fun of it, let's say that I'm on a slow network connection.

[00:01:11]
So I'm throttling to slow 3G and I hit that favorite button. Notice how it instantly turns red, even though you can see in the network tab, it's taking at least two seconds for that request to happen. And then if I unfavorite it, same thing, it unfavorites right away, even though it takes some time for that to actually happen.

[00:01:30]
This is called Optimistic UI and it makes users trust your app more. It just makes the whole experience feel a lot better. So what happens, this actually is pretty straightforward, pretty easy to do, because you literally just say when they click on this, then set state to your favorite ID and then send the Fetch Request.

[00:01:50]
Here's the challenge though, what if the user clicks a bunch of times and you have race conditions with those fetch requests. Or even more scary, I don't know if Twitter has a bug with that. So let's just make sure that is correct. Okay so what if, I delete this tweet over here but I've still got it open over here.

[00:02:12]
I'm looking at notifications or something like that. So then I hit unfavorite. And it unfavorites right away but then it actually favorites again, saying sorry that tweet has been deleted. I cannot unfavorite this tweet no matter how hard I try, I've favorited this forever. And so this is where your optimism has been misplaced.

[00:02:31]
Things are like they're not what you expected them to be. And so that set state to change the heart to favorite it or to unfavored it. Now becomes a little more tricky because you actually have to track that fetch request to make sure it completes properly and revert what you've done.

[00:02:47]
This becomes especially hard when the user does something like this. I'm not sure what state that's supposed to end in but, yeah, I guess it would stay favorite and be correct. So this is what makes Optimistic UI difficult, is this rollback experience. It makes it difficult unless you're using remix.

[00:03:07]
[LAUGH] Because remix makes building Optimistic UI really awesome. So that's what you're gonna be building for this example, we're gonna be working in the invoice ID file again. And I think that basically what we want, right now we're not gonna solve the problem where the form should get cleared out, that'll come soon.

[00:03:30]
But as soon as the user hits Create Deposit, that deposit should show up in that list right away. And you're actually not gonna be adding a ton of code for this one. But I want you to test out what happens if it fails. So go into the action and like throw an error or something to make that fail or or maybe return a response that just says you know, failure or whatever, so that we can test what rollback is like as well.

[00:03:58]
And I think that that is everything to get you going. So have a good time on exercise two.