Transcript
-
So currently, any time that a user makes a request to our homepage or an individual movie page, we're finding the file for the movie, reading it, parsing it, and then sending it back to the user.
-
Whenever we can streamline that process a little bit by using something called caching, which essentially allows us to store that information in memory, so
-
that we can skip all the processes in between. To start with, let's go ahead and create a new service. So we can right-click our services folder, new file, and let's call this CacheService.
-
Within here, we'll create a new class called CacheService, and we'll have a private variable called Store.
-
We'll set this variable's type to record string any, and set it to an empty object. We're gonna have a couple of methods that will allow us to perform CRUD operations against our store.
-
So CRUD meaning create, read, update, and delete. But first, let's have a method that will allow us to determine whether or not something already exists in the store. We'll call this has, provide in a key of type string, and
-
we'll return back key in this. So we're just gonna return back is key in this store. If it is, we'll have true, otherwise it'll be false. Next, let's focus on get.
-
So let's allow us to get something out of our store. So get key string, return this.store, and let's reach for an individual key.
-
Then we'll have set, specify the key that we wanna set into, the value. And then this store, set it on the key, equals value. Scroll down just a little bit here.
-
And then lastly, we wanna be able to delete. This will be a key string, and let's just delete this store key. So we'll just delete the key straight out of the object.
-
So now this service is going to serve as our in-memory cache. Everything for it will be stored within the store variable, and then we'll have the methods to be able to perform CRUD operations against the store.
-
So in order for us to actually hold information within our cache service store, we're gonna need to hold it in memory. Meaning we're gonna need to create this cache service as a singleton,
-
which means that we're gonna need a single instance of this cache service to live throughout the lifespan of our server. Now this is quite a mouthful and it might sound hard to understand, but
-
really all that we need to do is at the bottom of our file, instantiate a new instance. So let's do const cache = new cache service.
-
And then we just need to export this single instance out of this file. So export default cache. Now the reason I'm not just doing export default new cache here,
-
is so that we're actually giving this variable a name. Which is going to aid in our ability to import this file throughout our codebase. So now the reason that this will actually allow this cache service to serve as
-
a singleton is because whenever we first import this file into our codebase, it will instantiate the new instance of our class and kick that back.
-
Any other imports therein will use this same instance of our cache and return that back whenever we attempt to import this file.
-
Meaning we can use this cache service in our movie model, movie controller, so on and so forth, and we'll be referencing the exact same store that we have
-
within this one instance, making it a singleton. So let's give this a save and try this out. So let's jump into our movie model. And anytime that we find the movie, let's go ahead and store it into our cache.
-
So after we finish creating the movie and setting all of its data, let's do cache, which is the variable that we've called the instance. And you'll see that Visual Studio Code will pick that up and
-
allow us to just hit Tab to auto import it, nice and easy. Then we'll wanna use the set method that we created. We'll set it on the slug, so we'll use the slug as the key. And for the value, we'll set it to movie as a whole.
-
At the top of this find method now, we can check to see whether or not the movie that we're trying to get already exists within our cache.
-
And if it does, we can bypass all of this and just return the cached version. So let's do if cache.has the slug that we're trying to find.
-
Then we just wanna return cache.get and then provide in the slug so that we can get the underlying movie stored for the slug within our cache. Let's also add a console.log in here so
-
that we can determine whether or not something's being hit by the cache. So let's console.log and let's do cache, hit, and provide in the slug value. We can give this a save.
-
And we're already making use of our find method within our controller. It's being used for both the all method and the find method. But to show you that the cache is going to allow us to access the store from
-
anywhere within our code base now, let's go ahead and comment out the movie that we have right here. And let's do const movie equals cache.
-
Let's import that, .get, and let's pass in params.slug. So now in order for this to work, we'll need to hit our home page so that all of our movies get cached.
-
And then whenever we try to find an individual page, it will use that same store used within our movie model to cache all of our individual movies to then fetch our movie from the cache
-
that's stored in memory. So let's give that a try. Let's save this file, open up our browser. We need to hit our home page first. Okay, we can inspect our terminal and
-
notice that we don't have any console.log stating that our cache was hit. If we now refresh the page, view our terminal once more, cool. Our cache was hit for each of the three movies that we have.
-
Let's try to now dive into one of our movies and look at that. We were able to get the information A-OK, despite our code not actually reading the movie directly from the file.
-
Instead, it's reading it from our in-memory cache. That's pretty cool. We can go home. Let's try another one and let's try the third. All three are working A-OK.
-
If we were to restart our server at any point in time, so let's stop our server and start it up again. We now see that we get an error within our browser,
-
cannot read properties of undefined reading title. And that's because we no longer have an in-memory reference of our underlying
-
movie because whenever we stopped our server, the singleton was destroyed. And then recreated again whenever we booted our server back up, clearing out that in-memory store.
-
And that's why we don't want to read just straight from the cache, but we want to instead first try to determine whether or not the cache holds something. And then if it does, we can read directly from the cache.
-
Otherwise, we want to have a fallback mechanism to get a fresh instance of the object. So let's jump back into our movies controller and set this back to how it was, just like so.
-
Give this a save, we can get rid of our cache import here. And we can get rid of these other imports that we're no longer using. Save once more, jump back into our browser, give this a refresh, and we see our movie once more.
-
If we check out our terminal, that time it did not hit the cache. But if we refresh the page, view our terminal once more, we have a cache hit for this one instance of our movie.
-
If we hit back to our homepage, the other two movies are now cached. And this homepage read from the cache for the third movie that we already had cached. Now all three movies exist within our cache.
-
So if we attempt to dive into any one of our other movies, it will now read from the cache. So here we can see cache was hit for Awesome Movie of the Trilogy.
-
[BLANK_AUDIO]
Singleton Services and the Idea of Caching
We'll learn about singleton services and how to use them as a store to hold temporary information throughout our server's life by building a simple in-memory caching service.
- Created by
- @tomgobich
- Published
Join the Discussion 0 comments
Be the first to comment!