Fast HTTP Caching With Angular HTTP Observables

today I want to show you a really neat trick that I do for some very simple caching let's get started hi my name is Steve influen and this is demos with angular today I want to show you a really neat trick that I use which is whenever you're making a HP request there's a very simple way to use local storage to catch those requests we're going to start out by building an application we're gonna then use observables and the HTTP client library to pull some data down from the Internet and then we're gonna use a subscription and local storage in order to supply these things back to the user even before the request is completed from the Internet alright so let's get started so as usual I'm starting with a standard angular application that was created at the CLI with ng nu and so our plan today is to pull some data off of github using the HTTP client library that's built into angular and we're gonna take a look at why this HTTP client libraries coming back as an observable and some of the things that you can do with that such as doing fast HTTP caching that can make your application load faster give users better experience or even do something like work offline for the first time so we've got a standard and your CLI app so we care about the source slash app folder and we're gonna do all of our work in the app component today so let's clear out the app component HTML and all the local variables in our app component and just make sure that this is fresh and ready to get started so let's go ahead and add an h1 to this page just so that we know what page we're looking at and that everything is working great and the Notes design out the template for what we want to be rendering so we're gonna want to render an array of divs and then let's just fetch some data from github such as a list of repositories so we're gonna have a set of divs where we're gonna have a list of repos and each repo will just render out the name so we're gonna use the ng for syntax let repo of repos we're going to use the async pipe because repos is going to be a observable of array of repositories and so if we want the repos variable to exist we need to actually define it here so let's go ahead and add a constructor and we're gonna use dependency injection to add the HTTP client to our application this is what will allow us to make HTTP requests from the internet and get those back as observables we can import that from at angular / comment / HTTP and now if we're going to use the HTTP client library we actually need to also provide this as part of our app module and so we're going to import the HTTP client module from angular common HTTP and then we will add that to the imports of our app it doesn't need any sort of configuration so we should be good to go at this point and now the HTTP client that we inject should actually work perfectly so let's define a member variable on this component called repos that's the observable that we are referring to in our template and let's go and fetch that data from the Internet and so one of my favorite API is actually on github so because I just can remember the URL so I hit API to github.com slash search slash repositories and I pass it a query of angular and this API is rate limited but it's also very easy to access and so we're just gonna fetch a list of repositories that match the term angular now what I'm going to do is I'm going to actually define that observable for our repos array and we're gonna use it you should get because they you should not get is generic I can actually supply a type here but I'm going to turn that off just for now and just call it any and then I'm gonna pass it the path that we defined and so here we're not actually making the call we're just defining the observable the call will actually only be made when we subscribe to it in the template so if we actually look at the shape of the API that we're querying we're getting back an object but the thing we want out of this object is the items array so we actually need to do a little bit of data manipulation we could do this in the template by saying access the items property directly but we can also do it in our component just to get out the items array so we're gonna use rxjs we're gonna use the map operator in order to kind of massage the data as it's coming down from the Internet so we're doing is we're getting out from the data the data data items property now if we take a look at our template again we're gonna see all of our references are correct because repos now exists and let's actually clean up the rendering of how we want to show this repository to users so if we look into the repos Jason content we're gonna see there's lots and lots of fields we can access such as images such as comments etc but I want actually the description property let's just make sure this exists yes so it's it's just gonna be repo'd out in description to get out a description so we can say repo description and then let's make give this a header so that it's a little bit cleaner so you can see what's going on and then we will just render out the repo description instead of the repo description with Jason encoding so we take a look at our application and everything seems to be working perfectly so this is a normal HTTP request this is how you normally fetch data from a restful api in angular so now let's jump back to our component and in the typescript side of things let's add this very simple caching let's take a look at why this isn't observable so if we want to understand the network of this application what's happening is when I load this page we are creating a never quest as soon as the template loads two repositories and then we're going to be rendering that to the screen and so if you slow down the network what we'll see is that the applications going to bootstrap and load and render our template even before the repositories list is available and so the user actually gets this blank loading and what we can do is we can use the power of observables to overcome this so we've got our repose observable and we're going to do two things so first we're going to subscribe to that repos observable and we're gonna save it we're gonna persist that data into local storage and so the nice thing about local storage is that it actually survives across different loads and so if we just subscribe to this observable so I'm going to take in everything that that each of your requests is going to emit and I'm going to store it into just the browser's local storage so we actually want to give this a key so that we can ensure that we're using it in the same way consistently because we're gonna refer to this vocal storage in a couple of places so we've got this age of cash and let's put this at the application level and make it a constant because we've got this nice uppercase syntax now the thing to know about local storage is that it actually it needs to be a string so everything that we get back from this API it's gonna be a JSON object and so we need to actually serialize that into a string and then when we fetch the data from local storage we're going to make sure that we need to deserialize this application so now every time an HTP requests are being made we are storing that directly into local storage and rendering it to the screen so there's there's effectively kind of two subscriptions here next we want to go ahead and actually use this local storage data and we're going to do this with another very powerful rxjs operator called start with and what start with does is it takes an observable which is a stream of events and it adds an event at the very beginning so basically it's gonna synchronously emit whatever you give it with the start with operator and so let's take let's redefine this set repose by saying this start repose equals the stop repose dot start with and so we're using the start with operator to add an additional event to our observable so normally an HTTP request is only gonna have zero or one emissions but because we're adding this start with it's going to have one extra emit and so we're just gonna jason parse our local storage based on the key we defined and if the key doesn't exist we will just jason parse an empty array and so with these two very small changes we are cashing off the day that comes back from HTTP and we are adding an event to our repos observable so that when we listen to it in our HTML when we listen to it in our component we are always going to get back a copy up from local storage or whatever we have in cache and then that cache will automatically be replaced with the HTTP request from the internet if we take a look at the local storage because this has been refreshing in the CLI via the ng serv method it's been refreshing in the background we can see that we're actually already caching all this data so as soon as we refresh all of this data should be live all this data should be available to the application even before the network Quest completes and there it is so even though our repositories observe vole or our HTTP request has not yet completed the data is all there and our application is cached and working much much faster now we don't need that extra round-trip to the Internet and so the the final magic piece here is that if for example if you're using a service worker and that service worker was caching all of the angular application files such as your index file your vendor is your main dot J's all these sorts of things the repositories data would still be available from local storage and so not only would my application work offline all of these cached and saved it data would work offline as well meaning that we have a more robust application that works offline and hopefully can deliver more value for our users and a better experience thanks so much for watching and I will see you in the next one

Channel: Digital Fluency

Views: 29,828

Rating: 4.8972602 out of 5

Keywords: angular, how to, tutorial, learn angular, observables, rxjs, typescript, web development, caching, software developing, programming, startWith, operators

Id: Yf1FfhMetjs

Length: 9min 57sec (597 seconds)

Published: Wed Jun 20 2018

Reddit Comments

[u/EvD92]

Hey there, thanks for the video!

How would I go with this approach when I use Services which do the http get and return an observable to my component?

Which part would go where?