Challenge 3: Solution

[00:00:00]
>> Jafar Husain: Actually I don't know how many people are familiar with the idea of an image viewer. But for those of you out there. Who use Reddit. It's got a lot of the, what I think are called picture oriented stuff. It's where folks just post pictures. It's where your time goes to die in general.

[00:00:15]
You get to browse those forever, right. I know I love doing it. And after a while I thought this would be a pretty cool little app to build as part of demonstrating just how powerful RX could be. The idea's pretty simple. There's a drop down list here where you can pick between different sub Reddits, ie, different.

[00:00:32]
They're like a little bit like, it you're not familiar with Reddit they're like a little bit like channels. Like on a TV, you pick different subreddits and then you can click Next to go to the next image and Back to go to the previous image. So this is a app that seems really, really simple but it's actually a lot more complex than one might think.

[00:00:55]
Just so you know, I've built you a little helper function in the index.js file, just to get the images for a particular sub. So it's gonna basically create an observable that will just give you a single array of the first 200 images available for that subreddit. But it turns out that although this seems simple, there's a lot of considerations we have to think through.

[00:01:19]
Like for example, some of these images might not be valid, right. So you might go to them and you might get an error. In which case, you'd wanna display an error placeholder. Another thing you might wanna do is you might wanna actually confirm that it's a real image and fully preload it before displaying it.

[00:01:34]
Because if you try and display a large image, the screen will just go black while it gets loaded. So when we hit next, what we'd like to do is preload the image, and once it's preloaded, then and only then do we want to display it over the old image.

[00:01:47]
Also, it would be nice, and most of the time, when you're building an app for UX purposes, to display a progress bar. Like, maybe when somebody clicks next or changes a sub, we can display a little progress bar on top of the images. Just to show the user that they've responded.

[00:02:03]
So that's basically in general how we want the app to work. Also you never know. Reddit can go down, so if an error occurs we want to after maybe a reasonable number of retries. We'd want to show the user an error message and tell them to come back and try later.

[00:02:18]
So that's basically kind of the app that we're building. Now, you could think this is a pretty simple app but it practices actually a ton, well a ton. There's quite a few things that could go wrong when you are building an app like this. Can anybody like before I show you what are some of the race conditions that you could run into?

[00:02:40]
>> Student1: You changed subreddits before the image is loaded?
>> Jafar Husain: Sorry, yeah, changed that so I've begun loading an image, so I pressed next, and I began loading an image. And then I changed subreddits, and now we have a race, right? We might get the first image from the new subreddit really fast, but the image we were loading before takes a long time, and we end up showing the old image on top of the new image from the new subreddit.

[00:03:03]
So there's a classic example of erase, right? What happens if? Yeah?
>> Student2: The user attempts to click more than once?
>> Jafar Husain: Yeah, if they click next 50 times, I mean, unless we've some sort of controlling of the erase there, they'll just get whatever image happens to load last, not the last image they told to load, right?

[00:03:21]
We wanna avoid concurrently loading all 50 images. Anything else?
>> Student2: They click the back button?
>> Jafar Husain: Yeah, back button, same problem, or back, next, back, next, back, next, next, next, back, back, right? That's where you can get into some problems, so you need to make sure. And what we'd also like to do, I mean just for usability, while a new sub is being loaded.

[00:03:46]
We might wanna stop as a result. We might wanna stop responding to the back and next buttons. That might be a way in which I would handle this to make sure that they don't start navigating while they switch the sub, until a new sub comes up.