Check out a free preview of the full Advanced Elm course
The "Caching Solution" Lesson is part of the full, Advanced Elm course featured in this preview video. Here's what you'd learn in this lesson:
Richard live-codes the solution to the Caching exercise.
Transcript from the "Caching Solution" Lesson
[00:00:00]
>> Richard Feldman: So we've got these different business logic rules and we've got these tags representing our different possibilities. So we have YourFeed, GlobalFeed, or TagFeed. Each of these scenarios, we are logged in or not and we have the active tab and those are the sort of two pieces of information we have to work with.
[00:00:16]
So the good part is, we have a sort of single choice of truth. We have exactly the information that we need and we have no competing sources of truth as to which tab is active or whether or not we're logged in. It's just these two right here. So, in the event that we have YourFeed as the active tab, we have, we're already aware that you are logged in.
[00:00:38]
We shouldn't have to deal with a separate case of you're not logged in, that shouldn't be able to come up. In the actual version of this, I simplified it a little bit for the exercise, in the actual version of this, we're using a cred inside this, to make sure that you actually can't have this without being logged in for sure.
[00:00:53]
In this case, theoretically, that could come up, but for the purpose of the exercise, we'll assume that it can't, just like it can't in the real version. Okay, so inside our tab, and YourFeed, and we need to render something here. So by default, we're rendering empty list. But what we actually want to render is a list of tabs.
[00:01:14]
So we have this thing called viewTab, which is going to take a list of attributes followed by a string message tuple and return HTML message. So how does that work? Inside viewTab, we have it's LI which is a nav-item and it renders an A with sort of like the nav-link for that particular thing.
[00:01:36]
So, how do we decide what to pass in for this tuple? Well, as it turns out, we have a list of tuples right here that conveniently match up with exactly the tabs that we have. So YourFeed is a string of YourFeed, followed by a tuple of the tuple together with the appropriate message for what should happen when you click YourFeed tab.
[00:01:59]
Same thing with GlobalFeed and same thing with TagFeed. So essentially what we're going to do, is we're going to say viewTab, followed by the particular tab that we want to view. So for example, we might say viewTab and then empty, array because we don't want to specify any extra attributes there and for the tuple here we might say, YourFeed.
[00:02:24]
That's going to give us back some HTML message which we will then put inside our list right here. So, let's see what that does. Okay. Compiled it. Whoops. Didn't mean to refresh the slides but we did. Okay, so that's not doing anything yet because when we have a viewTabs, that's calling this here.
[00:02:51]
And we're not calling the yourTab thing because we're not signed in. So we need to sign up. Okay. Now I'm logged in and we have this glorious YourFeed tab. Excellent. That is exactly what we wanted. We also, according to business logic, are supposed to render a GlobalFeed, so let's put one of those in there too.
[00:03:18]
Oops.
>> Richard Feldman: What's the problem there?
>> Richard Feldman: Oops, viewTag. [LAUGH], wrong function, I still want a name.
>> Richard Feldman: All right, so now we have both of those, but neither of them is rendering as active. What's up with that? Well, the problem there is fundamentally that viewTab expects this attribute here, to be passed in with a class of active if it's going to be actually active.
[00:03:46]
And we're currently not passing in any extra classes there.
>> Richard Feldman: So, there we go. Now, we can see that YourFeed is the active tab. However, as soon as I click GlobalFeed nothing good happens. The tabs all disappear. The reason for that being, we don’t actually have any logic in here for GlobalFeed.
[00:04:03]
But we know how a GlobalFeed is supposed to work. It’s supposed to work fundamentally the same as YourFeed except of course which one is selected should be different. And this isn’t quite true because this is assuming that we are logged in. So in the logged in case, yes fair enough, this is how it ought to work, and this will now allow us to click back and forth between the two.
[00:04:24]
But we do want to handle this additional case of what happens if we are not logged in? We wanna show something slightly different, so we're gonna do a conditional here. If is logged in, then we're gonna do that, otherwise we're not going to render YourFeed, we're just going to render the GlobalFeed.
[00:04:42]
Okay, so now we can see that this logic still works the same way as before. But if I open this in incognito mode, we only see the GlobalFeed. We don't see YourFeed. Okay, so far so good. So we've handled each of those cases, now we need to handle the TagFeed case.
[00:05:01]
Once again, TagFeed is going to have two different branches, one for logged in and one for not logged in. And the only difference between the two is going to be whether or not your feed exists in the list. So in both cases, when you have the TagFeed, not only do you only have a TagFeed rendered when it's the active one, according to our final piece of business logic.
[00:05:21]
But we also have the rule that when it's rendered, it's supposed to be last. So we're going to put that at the end there, and we're going to say, viewTab
>> Richard Feldman: Class active, and TagFeed, TagName.
>> Richard Feldman: Okay, and then that's getting a little horizontally excessive, so we'll start to organize these more vertically like this.
[00:05:52]
Okay. So now, we have YourFeed, GlobalFeed and the active one being the TagFeed with that particular TagName. So TagFeed because each TagFeed has a particular tag that it's supposed to display, takes that string as an argument. So let's see how that looks. So by default, no tags. As soon as I pick one, bam, now we have some tags.
[00:06:14]
As soon as I click back, the tags go away. And last but not least, we have the situation where we are not logged in, which case it's the same as before, but without the your feed option. So GlobalFeed and now TagFeed. So there we go, we have now successfully enumerated all the possible states, we have no additional sources of truth.
[00:06:38]
This is essentially immune from the bug that we saw in the slides where multiple tabs are active at the same time. Now granted, we could still induce that bug by doing something like this. That would produce way too many GlobalFeeds. We have certainly not ruled out that possibility.
[00:06:54]
However, it's not as, as much easier mistake to detect. The problem with the other one was that with so many multiple sources of truth bugs, it was a risk condition. It only happened with certain timing characteristics. In this one, if at least we're going to make a mistake, it's always going to be a mistake.
[00:07:11]
It's not going to be based on the particular timing of how you happen to be clicking between these things which is a much better place to be.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops