RXJS Observables in Angular - Ward Bell & Sander Ellis

what's this theme this is from Tron isn't it yeah it's from toilet it's like 1980 something right 82 82 the beginning of the 80s and there we are with the most awful animation ever yeah didn't you see okay you did it again no you can't is I never look like that okay so have a look like that either haha no never did we're gonna MacGyver this rxjs thing yeah first we're going to cover observable anxiety which is afflicting many of many of you many of us made me and then because this is really a talk about angular in rxjs rather than rxjs sitting all by itself we're gonna look at the key api's and angular that use rxjs and see you know sort of learn rxjs by way of angular rather than watching counters and bouncing balls and then somewhere at the end if we get there and we're fast we're gonna have a little bit of fun with arcgis itself in the context of everything in an Rx is fun and easy going oh this is easy I don't know what you guys are complaining about is there's just a few operators out there so I put it a fool to don't learn them all I pity the fool remember this guy mr. t anyway there's a cure for operator anxiety which some of us have and it begins with stop worrying which is about as good advices keep your eye on the ball yeah that's um so but really just use the operators you know and let go of what you don't know and when you get stuck you can always code imperative Lee in the subscribed method and we're going to show you the SUBSCRIBE method and when everything else fails you just do it there I mean really don't be a hero don't be in rxjs hero and then there's this cool link called which operator do I use and if I click this thing it'll bring it up and what this is is a what do they call those trees decision tree decision guav yeah so you figure out what you want to do and then you keep working your way right until you find the method interested in and that is enormous ly helpful so yeah so anyway these are our steps for sort of taming the anxiety and then you just go about learning the new operator at your leisure yeah take one up all right out of the time exactly so there are four major api's and angular that use rxjs and so whether you want to you know even want to learn rxjs you're gonna face them so you might as well face into it and we have a boatload of examples to help guide you through that and we're going to do that right now with the help of david hasselhoff are you going to drive right in I'm gonna drive right into it so here is the samples this doesn't look very helpful oh there I click a button and suddenly I have a panoply of method buttons here each doing different examples so we'll try that one how about that it gets and subscribes that's a nice life better your favorites are one today I don't know how you got Star Wars into one of my presentations but you figured it out yeah okay so I got a better job so this is the service behind it and you can see that we get jeez that's HDPE there's a get method and the net result is this observable of route movies now route movies is what the API gives us usually when you're talking to something you have no control over the API and this is one of those cases so we got to kind of take what they give us and it's like it gets a count and next and all that other stuff and a lot of things we don't need it we don't need much but that's what it's gonna give us back so we got a deal with it yeah so we get it and then we got to consume it in the in the component so let's it helps us simple films component and that's pretty simple let film of films film title we've seen that before we inject the film service we get data what does that do there it is subscribe alright so you know this you get the data back the first call back in subscribe it's just like then the first call back is the good stuff it comes back now you assign the you pluck the results out of the data object and you sign it to the films array and then it goes and and you get a presentation no problem let me do something exciting oh well we could try adding we should make a new movie let's yeah we should be able to do that so let's go to silly little of - I think version - yeah that's after one this is the same thing except it's got a an ad ad movie which also returns an observable of something and it uses an HTTP POST which is kind of what you do when you add something and if we look at how that's consumed we'll go to the component - which should be here let's just I start typing until we see it simple films component - and there's our ad and there's our ad and so hey this should work great so let me close that one down come in here generate is bound to it and unprecedented everything promise me a new thing you told me it would do something we got broken example here ok everybody what did we not do anybody shout it out cuz everybody makes this mistake and they wonder why they're afters nuts the answer yes even though we don't really want anything to come back we got at least subscribed to it to execute it and yes you can have a subscribe method that doesn't have any callbacks in it it just works just great yeah it just kicks the thing off alright let's try it again we come here we generate I'm new observer and we could do more of that I want to yeah I want to see that movie like three times yeah now you can but you know things always go right for me they go right for you always I never ride my coat i beckoned some always up I never have any problems of a network so we are done we can ship this thing well we we might but I I've been a little bit evil here and I've got a button in here that will mess up our URL we just do this so Teddy the thing doesn't come that is probably not oh yeah like what API URL that's not the one you're looking for it is not the API you're looking for so that's killing me so now when we do this thing we got nothing but we can see that we're getting a 404 error behind the scenes all right I guess II error so we ship it off and say hey open the console that's what we should do we should tell them just look at the console that's what we tell users I'm a payment that III know you are but I have a higher standard Center so that is why we have this handy-dandy second parameter the second argument to subscribe which is the error argument I guess what if this was a then you have the two as well so this is it's just like a promise it's still like a promise in this respect but the promise is not the same as I'm not suitable okay so this is working now let me go and toggle the bed which is not oh we get that those're yeah he knows beautiful bit this is perfect you would ship this right yeah I thought I'd oh right because this is like the user knows what to do yeah he knows HD at 404 that's that's obvious isn't it it's obvious this app is yep I think we might I think what we would really like to do is have something that looked a little bit like that a user friendly message sorry but I can move it can get moves right now so the TR that is closed or something well at least you could yeah it could be that but you can try again later all right okay nice Sexton well that me to go that's what we're gonna do we're gonna have to look at some code and what we're going to do in there we're gonna have to change both the service and the component so let's start with the service and it you know we've put off as long as we can learning about operators but the time has come yes it is cool so here we are did I do the right one simple Philips three I think so easy that's cuz I'm in the component huh huh you should open yeah I should try the service shouldn't okay here we go so here's where we were getting the movie and now what we do is we have to do this pipe thing and I'm hoping you guys learn by a pipe you pipe you use a pipe for any stream anything I've been using a pipe for years yeah me too it's it steam smoke I've pipes in my hose that spring water I'm from San Francisco dude I have a guy I go back so we break out the old pipe and we stuff it full of operators from Eric schools like the catcherror one so you throw something and it catches there right it catches that error and it again it lets you know in the console that things didn't work out so well but what we're going to do is we're going to create that friendly or message alright and we're gonna throw that error again with another operator we're gonna return what's it simple enough it's an error observable that passes this message nice and simply back up and now I'm gonna keep this open I'm gonna do simple films three the component and now in our callback in the subscribe if things are bad we get a nice string error message that we can put in there and that's how we get a nice different from the problem it's not that much different but there is something different here and it's pretty important and it might be easier to see if I went into simple films too and put this a little bit side-by-side so let me give that a try so that's two there this is three here and you may notice that before we had that fish the results out of that data package we shouldn't be doing that in a component you know the component should with homeowner wants films it shouldn't know about anything else I agree we use services rather than have the component to HTTP it so we can push the work down into a service that's why the pattern works so we shouldn't be bubbling up some details about how it how it actually goes so while we're in here catching the error we're gonna use the map another operator this is one of the ones I know you're gonna know or you already know and we're going to stracke the results which is the film's there's the same thing as the area map does exactly and now when we look at the cat the components it's getting something that's reasonable for it to play with so so we get a sense we've given it a developer friendly result and we've given it a user friendly error message I still think there's a shitload of code can we do that here can we clean this up a little bit you think we can I suspect I forget what I don't know it was Xander but I'm gonna let that go okay sorry but movies can not be found right now and just because I don't know where at state we're in we're gonna redo this so that we're gonna use sample films this guy right yeah that's where you going that's right that's async pipe I'm still typing I'm liking it so let's go in there and that's the surface hasn't changed exactly the same there's no service exactly the same but dude or something funny in here there's their films with a dollar on and there's this AC those films are making big bucks oh that doesn't look like an array of films anymore or movies that's an array of an observable a movie I'm a head starting to explode but I'm going with you what's the dollar thing well that's our convention for saying it's an observable oh cool all right so I can I can leave that off so because that's an extra thing to type so you notice though the key thing to notice here is that we are no longer subscribing to get films now we're just taking that observable and chucking it into the template actually we're binding to this film's dollar and we're letting the film's dollar pass through the async pipe so the async pipe is going to do what we did regulate it's going to subscribe and I don't have to ship anything in temporary variable anymore this is so much cleaner it is cleaner we did a little bit of extra stuff though in there because you you know one of the things is that this only shows the happy path but we knew we wanted to display a user-friendly error but we no longer subscribing so we can't do it in a subscribe callback so we use our friend the catch the pipe and the catch error again there he is we're piping it through when we can use catch error again to set I like what you're doing with the screen that you like reminds me on the Asus vision the other things going on regularly dad we you know if we lose them we could just do this and they're gonna yeah thank you okay so we've done that and now I believe really cool again we have gone through the simple films where we have learned we've learned that HTTP client is an API that is observable we learn to subscribe to execute we've learned about piping operators we've learned that map will help you transform one value or a bag of something into the what cities did you actually want and I think I rebar a little bit ahead are we a little bit of her yeah yeah we did the catcher yeah we're cool alright so like Laverne we are we are swinging we're swinging with simple films and this for a lot of you should be familiar terra-tory but we wanted to go through it yeah we wanted to go over the basics once more oh yeah we yeah we are going to do some more basic stuff and then we go to the fun stuff so hurry yeah all right here's the fonds we're gonna talk about error wikipedia and error isolation let's do it so here's wikipedia it's a search for wikipedia we could type in I like your form it's amazing for yeah it is amazing so I said let's type in there you know and now you notice how I wait a long time and then it does the lists and there's angular that must be reactive because you're typing and it's reacting it is reacting so that's cool and there's another thing like do you spell angular with a or I don't think so no maybe you do no I don't think so maybe you do no yes no yes no yes no I think it's been three hours I never notice the list didn't update mmm they list didn't change no I programmed this thing so it's it's alright I'm glad you know why let's see if we could show them how this works okay so let's go into the week do you know what a peer oppressed cost these days there are two telling if you're killing me so this is our third API it's called it's reactive forms you may have heard of it what you are probably used to seeing in a reactive form if you'd know it is that you would expect it to see a form in here but there's no form to be seen no form to be found all right that's because we're using all the form you me are no pinfalls right we're used all we're by using their active forms module we get to do this we get to put this attribute this directive on there called form control and basically we say that this input box is under the form control of something called search term and if we're lucky there is a search term to bind to that is a new form control that's a really minimal form I think I think that's a minimal form and one of the cool things about search term the form the control is that it has a value changes property and yes you folks out there guessed it that is an observable whoa come back what there's just two major stages do it slower that's the solution dude slow come on be nice observable okay so what's an observable well now that it's an observable it's fair game to start playing with it and so what do you do with an observable you subscribe to it you you could but you know me and pipes a big on pipes so I'm pipe that are we going to stream it somewhere we're gonna we're gonna take those results and the first thing we're going to do is tap now that new one what's that one Xander I think that's a side effect well it's it's something that gives us a side effect you may wonder where the word tap comes from because in a previous life there was something called do well think wiretap I thought it was just a depth one was a pipe oh it could have been ah here here I am thinking wiretapping because you know who doesn't want a wiretap the pipe I do so it's legal though this one's legal and so we you know if there was an error message you know as soon as they type any key we were cleared up yeah you want to clear out the old arrows if they would go searching for something new you need to clear your things but we can throw another operator in the mix and this is the bounce time and this is the one that waits for them to stop typing all right so you can just type your little heart out until it's not going to do anything until one second passes so once one second is passed wait those two they are not doing anything to my observe law D ah no the observable is not what's going true booboo the an operator takes an observable inputs an observable out and each one is creating a new observable and handing it out and then so we're just check change and changing it alone so anyway after one second then we said remember what I did I can't remember how to spell angular does it have an R does it not have an R does it have an R does it not I went back and forth back and forth like that and I ended up on exactly the same search term I started on all right distinct until change says hey buddy I looked at the previous value I'm look at the current value you didn't really do anything we don't send you those squats so only if a second goes by and I've actually changed something do we get to the dreaded switch map my understanding is that maybe you now know what is so we don't have to explain that one no I don't think so all right so we do that and we catch the error and then we want to we've run through another map once we get something back there that just makes it prettier and we're done so the key lesson here in in this thing is really that so I'm gonna settle down is that you can create a form control and it has a value changes this is the third API and I have something that would let Fonzie tell it to you all right we have reactive forms the API is observable you can watch the value changes and you can pipe many operators in to transform it and you can use switch map for the win if this is a legal use form of the switch map because you want to cancel out in the previous results exactly what else did we do in here that was interesting I know we want to teach them about an easy error to make and this is why we're gonna go to another example called error isolation watch watch watch my fingers won't leave my hands watch this I I want to see one I don't know why read one see film ID one Donna a new whole new hope okay dude three for me two three minutes and I'll do four for me okay I'm going to do four Oh movie not found oh that's not the movie but looking for it's not the movie we're looking for okay grab it for okay I'm going back to four wait wait what's happening there well I don't know it looks like one of them is working in when I'm isn't if I go back nothing it's still saying movie not found it doesn't it seems like it seems like no matter what I do that first one is not changing it looks like it's complete or something it's done it's completely complete and done and over it so we got to find out what's going on under there so let's do some little IR isolation here so this is kind of like where we were with Wikipedia there's our value changes we're doing a little 2-pound saying everybody with me we're just getting those film numbers the IDS boo-boo-boo-boo-boo and this is just like go get it yes you shouldn't put an HTTP call inside that should be in a service between our you can read short on time I don't know why but there's a right way in a wrong way to consume that here's the wrong way that many of us do so we're listening to our films Andy's and then we do the old switch map yeah still looks good to me then look at this at the same level of pipe I map the error I'm sorry I mapped the results I feel great it worked remember it worked for a while remember it worked for a while but the minute I did something wrong I caught it with a catch error and I made it happy right I'm never risk etched I still don't see the problem why did it die why did it die because there's a rule these are in our chance there are a few rules and one of the rules is if an error occurs the stream the upstream is dead a permanent above isn't gum it's gone so even though we caught it and made it nice the error still happened and what is upstream of this which map is upstream film IDs is upstream get movies is it all the way back it is no longer listening to our keystrokes this is a very hard error to TechEd you just sit there you think everything's great and suddenly it stops working and you don't know why it's not starting again so to catch our addition and subscribe on everything that's above exactly oh you're totally that's very useful well it might be useful but your that's not what we want what we want what we can clearly intended was that if we got an error we caught it and then said keep living and the way you do that is you say no I don't want to immediately after the switch map start doing stuff I got to go down a level I got to create another pipe an isolation level so I pipe in I do my map and my catch error here this actually makes a lot of sense because you are piping on the get really yeah you think it makes sense how many people here think that makes sense oh good that's yeah you notice uh my hands down all right I mean it makes sense it makes sense but it's not for humans but it's the way it is alright so you just you just got a no-win when you get an error and then everything starts stops working and it shouldn't think back to this moment and say error isolation because that's what we're doing we're isolating it here when thing when this observable dies it dies in an isolation sandbox where nobody can see it so when logic yeah I logic and it cut out of it comes a good value so the switch map never saw the bad value and therefore the old Mindi's never saw the bet nobody ever saw a bad value nobody ever saw it go wrong it keeps on rolling and that is why even though we're in an error state here and so the top will never work we're doing fine down below and I can even go for 404 again now it's that no problem because we're isolating the error each time it occurs alright so remember this one you'll remember it when you wonder why your amp is stopped working ok so fond says oops remember to isolate errors what about that router thing we should do around I wish you'd done the right thing now a router is the fourth and final of the angular AP is that add dyes stuff with observable and it's just again viewed all of us movies beautiful can I can I can we give him some applause for his CSS skills yeah a lot of beautiful UI yeah so this has a next and previous button as you can tell I'm gonna like you know not let you see that for a moment so we go next and next and we come to the end and in it because there we're not there yet so seven and then it goes to no movie and then it wraps around again okay previous all right so it's not the greatest UI in the world but you get the idea what's happening is oh and one of the key things is I want you to look up look up and I don't mean straight at the ceiling I want you to look at the address bar up here see that movies too we're using the router so when I click Next it's actually using the router to move these things along so you three if we refresh the thing we should end up on the same movie well I don't know what gets right shall we try how about the arcs it works all right so we're using router but we're not really going anywhere we're kind of living in the same component and just doing this all right so that's the what is that there used to be a hula we're doing a hula we're doing the look I bet that's for from before the 80s I think that's from your earth yes thank you so much my era so I believe this is it so here's the deal when it starts we're going to listen to two things we're gonna listen to route parameters and we're gonna listen to router advanced it's two stories let's start with the story we've been talking about which is the router parameters you get by the way you get in in the constructor you get an activated route activated route is a it tells you what's going on with the route you're on so that's like a snapshot thing no it's not a snapshot be very careful about that but it is an object that lets you examine in an observable way the route that you currently are on and one of its magnificent properties is per am map which tells you about the parameters that are in the route to you and that is observable it's an observable of parameters it's kind of a bag of stuff so naturally we do we put in the pipe and we do the map to transform it and we say params get me the ID that's cool we pass the ID to switch Matt right see I switch map well because we don't care right yeah and we have something to write again it's safe for us to use switch map because we're willing to discard the previous result if you are going clicking very very far right like as I click do I care how long you know what I'm interested in the latest one not the earlier ones so it's good and you will end up with one yeah so so there you go in other respects this is just like any other observable but it's sitting in the most like the forms thing and just like every other book all the thing we saw all right but there was something else that we were doing in here so this is where I bring it back and you watch as I go next like a whole bunch of stuff happened - oh wow alright like I got events of a scene it'll guide you out the route of thing I got events a lot of events why because one of the things you may want to do is you may want to watch the router at work right you because it's often the case that you want you know when the router does something you want to respond and so they conveniently put an observable that tells you every time the router does anything interesting which is why we get a flood of these things out and they only have one of these incidents and it's called observable but as you can see that every one of these is typed in some fashion a lot of them activation stop actually started mostly the most of the time you can tell when your guards are here by the way this is a great way to diagnose programmatically what your router is doing to you you can use to notify all the options there all kinds of things but what so what we want to show you is that it's as easy as get the router listen to its advanced subscribe and here we're just login it right of course you may have noticed that this time out of the subscribe I caught the result is router events subscription who even knew that there was a result I done didn't didn't know I never needed well apparently there's something to learn here ok the thing you learn too is that when you subscribe it to something that lives longer than you do and let's remember does this actually live longer I'll go back to here and they'll go back into the router ok that created a brand new instance of the router component the router component was destroyed right happy - dude robbed robbed I me put it back in riot so clearly the router component the router itself lives longer than that component if I if I didn't unsubscribe something Bad's gonna happen but you know this is a terrible way to explore what can bad happen so let's so let's just take advantage of what we know yeah okay the router is an API rat a parappa can app can change we can monitor route events and we somehow unsubscribed we're not sure why but we're getting an inkling so last latke here what's this memory Lakes thing because that's what we're worried about i-i-i Niek a lot of memory yeah yeah sorry you got you got a leak I mean like a goldfish I've always I have a three-second memory and after that it's gone that's what I've always said about you yeah I know so so let's clear the decks here and we have a handy-dandy memory leak example that sounds like click a like a bunch of time I'm gonna click it first you notice the time is going hey this is normal right well what let me click it off oh let's go no Larry it's still run right to killed it it should go let's do it a couple more times huh let's do that we're having fun with memory leak oh that's exactly what we wanted all right so hush your mouth child what come on you got we're gonna he's Dutch please forgive him okay so fortunate we'll go by walking with able yeah that's it just somebody called TSA all right all right so clearly we don't want to have this happen because over time what's happening is the company component is being retained because there's still a little necessarily but but there's some parts of it are being retained its not being garbage collected and it's continuing that you all different it did stall so something must be right yeah so let's do something that right about this okay all right let's show you take until I've clear this all right so it's doing a time or two right but now when I stop it is this the error isolation one oh no that one we want to go away okay here's taken till it starts up and it stops that's better do it again start it up that's just what my model teach me clean off to yourself destroyed you could see it completed its destroyed completed its destroyed start it up again we're on to the next one and I've neck we've actually numbered the components as they come in so you can see it's a brand new component all right that's the behavior you're looking for when the component is destroyed so debts to think we are looking for yes that is the they're annoyed we're looking for so what do we do to get that we're gonna like add take until and there are three steps the first step is use this thing called a subject we're working our way through the rxjs here we're bringing the zoo in but at least we're bringing it in as we need it right remember we told you learn it is you need it well here's where we're gonna need it okay we're good can you tell me something more about the subject I can but I'm nice to know about the subject subject well what is the subject the subject is well in this it it's the thing it has a lovely properties it's a thing that is both a observer and an observable now we know what an observable is we've a music a well you are using them all the time what is an observer it's a fancy term let me just put it this way the way you want to use it it's a way of putting something in to be observable all right it is both a because I don't want to get lost in the in the weeds here but when you need an observable that you can stuff things into you probably want to subject because it allows you to play both sides of the game listen provide out provide listen all right so that's why we're going to use it here we're taking we're defining a variable on destroy that is something that we can control that is also an observable so then we go to step two and and we create an NG ondestroy you know that is the life cycle event hook that gets fired when the component dies right you know that stuff so what we do in there is we take that object-- that we've got and we call next on it which sends a value we don't really care about the value so we didn't give it a value and so what that means is there as soon as we do that that subject which we're calling a notifier is going to emit something right so we have control when the thing is destroyed we can emit something doesn't matter what we can emit and now we're ready for step three here's our time service the time service was the thing that was clicking the time yeah that's just generating time stems yep well we're gonna pipe something on to it and it's our friend here take until this new operator and take until is kind of kind of fun wait works is like every operator it season it has an observable in an observable out just the same thing a step in this case kind of at least we tap I can look at it but it would take it till I can't look at it at all it's just going straight through but I am providing something here we know this to be an observable right we said it was in a subject and a subject is also an observable so it's an observable so we followed quite consistent we did not put an ass on that big barrel or we did he did forget the dollar we forgot the dollar he forgot to tell are we are not paid for this one we forgot the dollar all right so you got me there buddy we're gonna do live coding that's it that's all I can do okay thank you very much I'm here all week so this is an observable and went and and so the text the tech they take entails letting values fly through those timer values until it emits and as soon as it emits it says whoa we're done here and it tells the so there there is a second observable that's just sitting there yeah and after certain time you say whoa whoa stop exactly and then it stops well it does and here's how it does it okay tell me first it looks upstream the where it came from and says I'm Sun subscribing okay alright so it unsubscribes from the source and that my friends is why the time interval stops the timer stops because we unsubscribe and it's designed to stop when it unsubscribes so that's how we kill the timer all right then it does something that's really important which is downstream for everybody listening to it namely this thing it sends a complete it calls complete on the observable when you call complete on an observable it terminates when an observable terminates it lets go of any subscribers way that there was something something else that is like three parties well yes subscribe does take three parameters it takes the happy call the next channel that's happy report the time it takes the sad or the error channel and then it has a third one which will let you alert things when they're complete that's awesome and we actually saw over here when we click take until and when I do that notice there's the complete that came downstream and then the component was destroyed complete came down the end of the point was destroyed but these unsubscription happened and therefore no memory leak no memory leak so this pattern this take until pattern is the recommended way to do our component must subscribe and it has to subscribe to something that is going to live for a long time follow these one two threes of the take until and you'll be sure that you to unsubscribe properly when the component dies yeah this is what the style guys suggest you should do yeah there are other ways there is no wrong way as long as you do it now you know Xander I don't remember doing this take until in our earlier examples why do we not worry about this before we have an async pipe example it's ticking away but when I click stop let me do it again I'm gonna clear the console I'm gonna do async pipe there's the timer that ooh I still off those async thing don't you love that yeah all right notice it's destroyed no memory leak start it up again we're on to the third one no memory link it started up again goes to the fourth one no memory leak how can that be I I know you know I know let's share it with them that the thing is I was missing something there well we're just gonna have to miss it cuz we got to keep this show on the road okay let's go unless you're going to tell me what it was I miss well actually the last complete didn't fire oh right that's true notice let's see what does Anders going missing that we're gonna do a take until and you notice we had completed and then destroyed when I do the async pipe you'll notice that it we just get destroyed no no complete it so first of all let's show them that we're actually using the async pipe and let's explain to the kind folks at home what's going on yeah let's go over that by the way you can see no take until so one of the nice things about async pipe when we throw the observable up into the template and say async pipe you handle it is yes it subscribes mm-hmm but it also automatically unsubscribes when the component is destroyed so that we don't have to worry about it that is why we had no take until no we didn't have to worry about it because we let async pipe worry about it which keeps our code cleaner and this is another reason to safely use async pipe in your components now what Xander is pointing out here is that there's a subtle difference between what take until does yes and unsubscribing does and so i'll try and explain what that is you remember the take until its final act is to send complete it out that is why we have the that's why we saw a completed show up here because take until emits a completed but unsubscribing alone does not complete anything it just kills it it's just I'm not interested anymore I don't want nothing to do with you that's right wear it so so if your code should happen to come to depend on complete because you want to do something when the when the observable completes you can't just unsubscribe you'll need something like take and tell so you can get notified that it completed that's the point I think your minutes the point I was trying to make yeah well thank you everybody here is like but there you go already already all right so let's bring it on home we learned to so our first principle is this unsubscribe when you're in doubt if you don't know how the observable behaves unsubscribe when you're doing that and that you'll you know if you subscribe that's that's we're talking about you can use the take and tell pattern this is the one we're recommending for a component for unsubscribing rather than literally unsubscribe use alright so when you don't know what the observable does and you're in a component and you're subscribing to it used to take until pattern to close it down so you don't have a memory leak I want to dig in a little bit on the doubt a little bit on the dog who can stop you okay the thing is when are you in doubt basically if you're not creating the thing yourself if the if you're getting observable form or service you are you don't know if it's closing opening and subscribing you have no idea it can do anything so then you're in doubt and you need to unsubscribe to it use the take until for it or any other methods many of my customers just want their developers to assume that they are always in doubt so because it just makes for fewer bugs right so they just say I don't trust I don't trust myself I don't trust you that you really know or that somebody won't come along and change the behavior later on you because you knew at the time but it changed later so they have a policy that says if you subscribe you must have unsubscribe and if you are going to unsubscribe use the take it tell it never hurts to unsubscribe now async pipe takes care of itself and there was no subscribing our code so we know we're cool we're always been cool with async pipe yeah you don't need to understand prescribe them async pipe takes care of everything I what you know there's actually chance we could get through this okay we can't you're all right says no mildy stream does we're gonna do the my advice cool thing I wish I had the white suit I'm gonna get one of these if any of you haven't want to send me a white suit I'm all I'm happy I wanted to get some for this day basically but they're hard to find it I probably are all stained so so let's see what the multi stream does showing yeah one of the real values of rxjs where it really begins to shine is when you have a whole bunch of streams all going I think you need to zoom out a little bit either zoom out a little yeah good now so when you have a whole bunch of streams and you want there you want somehow unified and bring them together right this is one of the cool things about rxjs and the things that's hard with other ways of managing events because you've got event you know if you have a coordinate events all over the place it's hard and rxjs makes it comparatively easy so we've got an example here that does that what it does is it gets the films from the cloud it allows us to add movies here so there's Bob a new observer bill you know released in 1900 and but what it not only does it show Bob here but it asks behind the scenes that put it in local storage so if I close this down and bring it back Bob is still there even if you refresh the patient still be like there Carol and Ted and Alice which I think was in the 80s all right all right so now I've got three sources of movies I've got the ones I'm typing the ones that came from local storage and the ones that came from the cloud and I want to meld those all together how am I gonna do that and using observables you are going to compose them we are gonna compose them let's let's do that shall we so let's close this down and we're gonna go to all the thing it's not interesting okay so let's see those sources first of all here's cloud movies we've been doing it we go out to Star Wars world and we get our cloud movies and there's nothing dramatic here that's a stream we know a cloud movie stream I am shocked that you didn't put the dollar on the end there but I'm gonna let that go and then here we are in the local storage now local storage is a synchronous API in the browser it's not observable at all it's not even event based I how do I make how do I get local storage in unobservable how do I make it play well turns out you can roll your own observable you don't have to wait for Ben to do it so there's a thing called observable when I was already going on Twitter - Ben hey man yeah you want it you want a local storage I want the local storage up little tough luck buddy you're gonna have to write yourself how are they it looks like I need it that it does doesn't it so here we're creating an observable which by the way you can do new observable it's the same and you're gonna get this thing called an observer an observer is nothing more than the the thing that we're using for subscribe right it has annexed an error and a complete some combination thereof who cares it's the thing we would do and subscribe but for technical reasons called an observer and we say if the browser supports local storage then we can get the item out of local storage deserialize it and pump it into this observer that we've got here they came in remember it again to make it clear if you had that remember we have the SUBSCRIBE and we have the next and the error and the complete so we know an observer has those methods because that's the way it works so every time we get something out of local storage we can call next and we're essentially pushing those values what if we didn't have anything in look in store oh you're you're orange all right suppose local storage is empty yeah that might happen well we'll send an empty array down that's a good idea okay and then oh look at this we know this completes because we said so all right you complete and so what we have here is kind of like HTTP it's kind of like rolling HTTP GET for isolated story but for local browser storage all right we just made our own awesome you can make your own so now we got two streams right cloud may have clouds we have two local local storage and now we create our third one we saw the subject a minute ago we know about that so that as the new movies come in they're going and they're probably going to come in through this ad movie thing where they're gonna come in and we're gonna call this thing so so they're coming in and and we're going to we're gonna pipe that observable through something and this is how we're gonna learn a new operator here scan basically what happens is you've got new movies coming in we want to build up an array during the session of the movies you enter all right so the first time we put a new movie in alright well it's current well we did Carol antenna now we're doing a lot of those will tell Sally we'll do Jim okay every time I do this right a new movie is being requested its streaming into the service yeah we're pumping a new one in yep well what we want to do is accumulate those right in an array that gets longer and longer and longer is that observable keep sending values in new ones all right and that's what we're gonna use scan for scan is an accumulator it's it starts with an empty array and called movies and then every time you get a new movie in this is not this by the way is just straight array stuff it's gonna add the new movies to the kit to the array so what's gonna happen every time I type something scan is just going to keep building up that array for me all right so this is cool we've got three streams one from the cloud we rolled our own observer of the local storage and we are using scan to build up an array of new movies that the user is typing right now now we got to bring them all together yeah how do we bring them all together but by the way what's the star trade thing oh I wanted to make sure that it starts with an empty array oh that's when it has nothing which is kind of like what we did earlier when we did this right all right so I've got three streams now what I want to do is I want to take those three streams and I want to pull them together and merge them all together right so I have one stream of all the movies well we got cloud movies that's cool we gots localstorage movies that's cool we got new movies that's cool they're both all three are cool these things finish but new movies is always changing right yeah that keeps everybody nights I get a new array with the new movie in it because that's what the scan did so this has got to stay alive so what I do is I'm using we're using something called combine latest and what combine latest says is that's great I got these three things coming in if yeah you know I'm gonna take the latest value of all three again they did it again I'm gonna take the latest value of all three if any one of them changes all right I update that one and then I put them together again if a morning the first one had changed I put them together again whichever one changes I'm gonna take that latest value combine them all together and that is what you see right here if cloud changes or local changes or new movies changes put the new array out of them don't you love the new JavaScript syntax this is amazing to read I thought we did something we made this sort better why did we do this back up why we have a sort for anyway we sorted it okay so that and we're out of time the Creator the last one so for our final yes thank you very much for our final giant Johnson moment you learned about that you learned about observable you learned about skin you didn't learn about this guy so for sending people I'm glad to not tell about expanding P fortunately we will have these resources and this sample is yours to play with because we know it was a lot and we will add even more online and github there will be like 15 or 16 different examples and the rxjs Love Boat has left the building thank you very much you

Channel: ng-conf

Views: 27,795

Rating: 4.7302504 out of 5

Keywords:

Id: q--U25yPTrA

Length: 53min 0sec (3180 seconds)

Published: Thu Apr 19 2018

Reddit Comments

[u/EleventyTwatWaffles]

Wish they had a chance to cover the last slide :/