EMILY: Hello again.
Welcome back to the "Flutter Boring Show."
We're going to be adding caching to the Hacker News
App, a much requested feature.
FILIP: True.
EMILY: Actually before that, I'm going
to jump in and add right now when you tap on these stories,
you just see story.
I think in an earlier iteration we had it
display the number of comments.
And we got rid of that when we were no longer hard
coding things.
So we're going to add it the proper way.
And I pulled up the Hacker News API up on GitHub.
And this has all the fields.
And here you can see that Descendence,
in the case of stories or polls, shows the total comment
count, which is--
FILIP: Handy.
EMILY: Yes, conveniently named Descendence, but you know.
So let us-- let's see.
That is in here.
I think it's like raw item.
Build item, there we go.
Article type, we want to do article.descendence.
Oh, and that's an int, so we want--
actually let's make that text.
It's the number of comments.
And that'll just say comments.
Great.
Look at that.
FILIP: That's awesome.
EMILY: 98 comments.
FILIP: Can you show another--
oh, nice.
EMILY: This blog has moved.
Yes.
OK, so and then, we actually noticed
we had a bug that we just implemented.
So Filip added pulling in the stories
from the Hacker News API, from the top and the news stories.
And right now, if you tap between them--
oh, wait.
FILIP: Yeah.
It's just, I think, it does show.
But it's so slow because we're not
caching that it looks like it's not changing sometimes.
If you like click back and forth to--
EMILY: I see.
FILIP: So we should probably implement--
EMILY: Maybe we should implement some caching.
OK.
So to do that, let's go into our block.
And so what we're doing is we're pulling up, reading this--
let's see.
This is a list.
So what we want to do is we can make a--
I was going to make a hash map of article ID
to Article that has been parsed.
But, no?
FILIP: No.
Yeah.
Sure.
No, no, no.
I'm saying hm because I thought we would just like put
the articles through some list.
And then we use it, or--
EMILY: Sure.
What I was thinking is like so this takes the top,
say, 10 stories.
What if someone posts another one?
If you get one updated one, were you just going
to invalidate the whole list?
FILIP: Hm.
Good point.
EMILY: So if we put in a hash map, we get one new one
and all the others are still cached.
And so we can look them up individually.
So yes, yours is quicker for like a whole block.
But I think for 10 articles, it's not going to be that bad.
So I was trying to remember now, so in what--
actually, yeah.
Do we-- I was sitting there watching you code it
and now I need to orient myself.
We are calling getting the IDs, we take this list.
Where does this-- where does this get called?
FILIP: In many places, actually.
Three.
EMILY: OK, so how about instead, let's get rid of that.
How about we write this to a list.
Or sorry, we'll take this and store it in the hash map,
once we get those IDs.
No, no, no.
Actually, we're going to, once we get the articles,
store that in the hash map.
So let's go to definition of that.
FILIP: Right.
So, yeah.
OK.
So I was--
EMILY: You see what I'm saying?
FILIP: Yes.
I was thinking that the delay is because just the first call,
but it's actually because of all the 10
other calls for the articles.
Right?
Yes.
That's perfectly reasonable.
So yeah, what I wanted to cache is like everything.
But Emily has a much better point.
And like always getting the latest IDs
and then reusing whatever we have for the articles
themselves.
That's great.
Yes.
EMILY: So I'm writing a hash map.
Hash map and article, and then when we have that
update articles-- no, wait.
I was just there.
Where was it?
I apologize.
My font size is bigger than I like it with this.
Get articles and update.
Here we go.
So now we have the list of IDs.
We have--
FILIP: I just checked that article is a built thing.
So it will have good hash.
So that's good.
EMILY: Thank you for checking.
Sorry.
I just need to find--
we have initialize articles, update articles,
I'm just like oh.
FILIP: We can rename initialize articles with something
like kickstart or something.
Because that's only called once in the [INAUDIBLE]..
EMILY: Well, I think initialize has that--
what I'm just going to do is I'm just
going to organize these things.
So I'm going to put initialize kind of near--
well, we'll put it after our declarations but near this.
Oh, and here's another little bit of cleanup.
We have some declarations here and some here.
Wait, no.
Those are getters.
Never mind.
So getter, getter, initialize, close, get article.
So here's where we want, in get article.
We want to say if our cached articles contains
key of this ID--
actually, we could just say, if it doesn't contain,
do the thing.
FILIP: A thing with a throw as well.
EMILY: Yes.
Thank you.
And then, and if here we want to say cached articles ID
equals results.
And then we'll say, return cached articles.
FILIP: Oh, OK.
Interesting.
And then in this case, you'll need else for the throw.
Otherwise you'll always throw.
EMILY: Oh.
Thank you.
Yep.
That would be sad.
FILIP: You would throw my favorite error.
EMILY: Oh, yes, the excellent error.
FILIP: But still.
OK.
Yeah, that was quick.
EMILY: OK, so now hooray, an exception.
Oh, actually, you know why?
It's because I need to do a hot restart because I
declared something.
FILIP: Contains key-- try calling null.
EMILY: What?
FILIP: Is it null?
FILIP: So, OK, actually, I think my--
I'm going to restart this.
This is a new machine.
And I think maybe this code is a little wonky.
I was noticing hot restart was not quite happy with me.
Try again.
If this doesn't work, then we can--
FILIP: Yes.
It's weird.
Cache [INAUDIBLE].
EMILY: Because it should be-- it's like right here.
FILIP: Yeah, it shouldn't be null, ever.
EMILY: That's funny, though, that it
thought it was there but then-- well, whatever.
So here.
FILIP: Yeah.
Nice.
EMILY: All right.
FILIP: All right.
EMILY: Great.
So there you have it.
That is how you do caching.
Basically in summary, it's all within the block.
It's all hidden from the UI because the UI doesn't care
how you get the information.
And it's just under the covers, we're
return the data faster because we have a little hash map.
FILIP: Yeah.
So that's great.
So I think that's been great.
What's next?
Do we say?
I think it's almost ready to publish it to Play Store.
EMILY: Yeah.
So stay tuned.
And you can learn how to publish your beautiful new app
to the Google Play Store.