Optimize Bundle Size by Piping Operators with RxJS and Vue.js

Instructor: [00:00] Instead of importing all of RxJS, I'm going to import just some pieces of it to save on some file size. I'm going to import observable, subscription, and subject are the main pieces we'll need. Then, to configure vue-rx, we'll say vue.use vue-rx. Then, an object with observable, subscription, and subject.

[00:24] This will save on a lot of file size because our previous approach of importing all of Rx and just doing Rx like this included the entire library. To optimize, we pick and choose the things we need and leave out the things we don't.

[00:37] The latest versions of our RxJS introduce pipeable operators, which let us pick out only the functions or methods we need to save even more on file size. For example, to rebuild our functionality here, the template is still intact. I'm just going to build out the subscriptions function again.

[00:54] I can start with our create loader, which takes the URL and will return an observable. Before it was observable from, but now it needs to be just from. We import "from" from RxJS. We'll save from.this.$http, which is Axios giturl.

[01:19] Then, instead of pluck data which we did before, now, we need to .pipe and then pass in pluck data as a function that's piped through there. We'll also need to import pluck, so import from RxJS/operators. We'll import pluck. We'll save there and let it reformat.

[01:42] You'll notice that this was observable from, now it's just from. This used to be .pluck, and then you'd chain on other methods, but now it's .pipe. You pass in as many methods or operators as you're going to use.

[01:54] Our cache will pretty much look the same. That's just an object. cachePerson just takes the cache, returns a function that takes the URL, and then we return cache URL. If that exists, we return that. Otherwise, we assign cache URL to create loader and return that.

[02:19] There's nothing new in that because that's all just JavaScript, so no imports needed. Then, our people is going to be create loader with the URL slash people, so nothing new there. I do need to start returning stuff, so return people. Let's save there.

[02:38] Now, we're returning the people stream, so you'll see that people start to show up. Now, our active tab stream is going to be this.$watch as observable as it was before. We'll watch active tab and configure it to immediately fire, so immediate true.

[02:56] Now, instead of .pluck, we're doing the same thing where we do .pipe, then pass in pluck and we're plucking off the new value. Now, we'll create some streams off of active tab. One will be person. Called this Luke before, I'm renaming it to person because that makes way more sense.

[03:14] Before, this was activetab.combineLatest, but now these operators like combineLatest need to be creation operators where I'll import combineLatest from RxJS and then come down here and I'll say combineLatest the active tab stream and the people stream.

[03:38] Before it was activetab.combineLatest, now it's combineLatest and you pass an active tab and the people. Then, I'll combine them with this function of tab ID and people. Then, I'll say grab the tab ID dot ID of that person. Let that reformat.

[03:55] Then, before, we mapped this to a URL, but now we need to pipe it and then we'll map in here which we need to import from our list of operators. Map and come back down and we're mapping this people ID to the URL starwars.training.

[04:19] Then, instead of .switchMap, we're going to ,switchMap. We'll need to import switchMap as an operator as well, so switchMap. Come on down and we're switch mapping to cachePerson and passing in the cache. Then, the last one would have been .catch, but now since it's a standalone operator, it's been renamed to catchError.

[04:43] I'll go ahead and scroll up to that and import ,catchError. Scroll back down and catchError, which takes the error and returns an observable. We'll just return create loader and we'll just return the second person in case anything went wrong.

[05:07] You obviously could return whatever data you wanted for that. Then, instead of .share, we are going to ,share and import the share operator. Scroll back up, import share. We'll hit Save there. Looks like I made a minor typo up here with catchError, so we'll delete that E.

[05:26] Now, with our person stream, we can grab our name and our image. The name was a simple one because it was just constName is the person stream. We'll pipe and pluck name and we'll return name. Hit Save. You can see we got Luke down here. I'll click here. It's C3PO, R2D2, and Luke.

[05:49] Then, our load image stream was person and, again, pipe and pluck image, and then, map. We've already imported those. Map image to where the images are hosted, starwars.egghead.training/image.

[06:11] Then, the fail image is this.imageerror.pipe. We'll just map to http, and this is just the placeholder service 400 by 400. I'll need to import mapTo. Come up here. Make sure that's imported. Scroll back down.

[06:39] Then, our image used to be observable.merge, the fail on the load but now it's just merge. We'll have to import merge as one of our creation operators. Merge is there. Scroll back down. Now, we're merging load image and fail image and returning image.

[07:04] Hit Save. Everything should be back to working, the data nice and cached. All the streams hooked together properly. Now, using piping and importing operators and passing them into the pipe, saving us from the heavy baggage of importing every single operator and also allowing us to more easily write custom operators.