Mastering the Subject: Communication Options in RxJS | Dan Wahlin

[Music] well alright I'm excited to be here I'm kind of bummed it's the last day of ng-conf I mean that means Monday we go back to real life I know exactly right all right so we're gonna talk about scenarios where how many have a component at a deeper level component at a higher like way higher level and you have to talk or how many have a dashboard scenario and you have siblings they don't know about each other but you have to talk all right this comes up a lot state management is one option here that you could do but we're gonna talk about one that I think is a lot easier and sometimes more applicable it just really depends on your scenario we're gonna talk about mastering the subject all right so first off let's talk about kind of the problem here we're gonna say that given we have a space-themed you actually been stationed remotely but on the moon and I don't know how your git commits are gonna be there that might be a little questionable but we're gonna have some git commits maybe that run and we'll have our ng-conf code fly down but rather if you're on earth or Mars or wherever you're still gonna have the state management problem or this communication I'm going to call it problem more of a messaging problem so what we're going to talk about here is how do components communicate when they don't actually know about each other so for example you might have this type of scenario here where we're doing a container presentation pattern we have a more deeply nested will say component who knows where it is in the overall structure of the screen and now I need that component to somehow notify the navbar up here that something's about to change well one way we could handle this is probably not the best way but we could do an output event to an output event to an input and that could go really crazy anybody done this before yeah output to an output to an output and you're just like there's gotta be a better way right to do this and you can and that's kind of what we're going to talk about here so moving along if we could do an input to that that's great but do I really need the app component to be involved probably not I'm gonna argue and we probably don't want that type of scenario now another scenario is what if you have a service and when something changes there you want a message parts of your app what could you do there well again you potentially could use a state management solution but I'm gonna argue that's not appropriate unless you need to store some state in the actual data store that we may have so what we're gonna talk about is a different approach that you can actually take here and we're gonna talk about rxjs subjects or mastering the subject if you will all right so first off you've now been promoted you get to go to the good old Mars now we'll hope Tesla or one of the Blue Origin or one of those other things have come up with a solution therefore this I think you're get commits get a little slower so you're gonna have more time for coffee I suspect but you still have this communication problem I can't help you with the satellite part but I can't help you with the angular part on services or components so we're going to talk about four main subjects here first one is just called subject and we'll talk about what that is we're gonna talk about behavior subject a little bit here and then we're also going to talk about replay subject and finally we're gonna briefly get into async subject now some of you probably use these before some of you probably haven't I'm gonna specially speak to those that haven't in this initial part and then we're gonna talk about some patterns we could follow so subject this is a way that I have some data and we call it the subject and I would like all of you potentially to be able to subscribe to the data but you're only going to get the data after you subscribed so anything that happened before you hooked up it's not gonna matter you won't get it so it kind of looks like this we have component a we have component B and let's say component a has subscribed well what will happen as data flows in like you would expect from the subject now the subject could be in a service for example this is what we're going to look at now let's say component B subscribes a little bit later well they're not going to get the previous data of course because with a subject you only get the data after you subscribe and that's kind of kind of how it works all right so that's the first one now the next one we're going to look at is a behavior subject so what if you've subscribed and you know you're cool with getting the the data that comes in the future but you also want data that may be the last piece of data that went out to everyone okay very very useful maybe some customers or invoices have already been shown somewhere else you would like to just automatically get that data well we can do that with a behavior subject so a behavior subject looks like this we're going to subscribe now multiple pieces of data might flow down to component a here that you see now component B eventually subscribes let's say it's two minutes later this component now comes on the screen through some mechanism they now need the last piece of data that was sent to component a or any others so what we're gonna do there is subscribe and now with behavior subject you'll first off get that last piece of data and then any future pieces of data alright so very useful this is my favorite one is the one I use the most actually all right now the next one up is actually a type of behavior subject but more specialized in effect behavior subject kind of in sheep's clothing is rieflin this is where multiple pieces of data have gone out and now you want to get to that data alright and work with it so you want to replay kind of either everything or maybe just a subset of what happened you can control that with a replay subject so with the replay subject would look like this several pieces of data now are going to come out to component a so we'll let those kind of flow down here all right there we go now component B is going to subscribe and what they're going to get is everything that's happened in this case plus any future data so this is a great way that if you have some components down here and up here something changed you want to catch these up because they just loaded maybe they load through like a lazy loaded route or something like that then we could take care of this and replay all the data up to that point now really as I mentioned this is a behavior subject but it's more specialized the behavior subject uses this we could say just replays one whereas this could replay whatever you tell it to replay okay now the last one is what if you have a stream of data but you only care about the last value in the stream you want the one that was emitted last the freshest you could say data well we can do that with an async subject and so I'm gonna kind of simulate some data going it's just gonna go off into lala land here let me go ahead and subscribe and now the data that we're gonna kind of pretend is now flowing somewhere but when the last piece of data comes which will be the three in this case you'll get that and then that means the async subject has completed all right it's done so this would be I just want the last piece now I personally don't use this one as much but it totally depends on the scenario and that's kind of why we're going through these there's not a right or wrong way there's a right tool for the right job way that she'd want to do all right so before we move on to this let me show you an example just really quickly and I'll have a link at the end for the code here all right let me go full screen here so you're gonna see a subject to behave your subject or replay and then async and what's gonna happen is when I hit the start button here the subject is going to wait a second or two and then it's gonna start we're gonna subscribe okay now the others are not going yet so you're gonna see the behavior subject then goes a few seconds later then the replay subject follows that a little bit later so I just have a little timer going and then finally the async subject is going to wait till that stream completes and you'll get the last value let me show you kind of what it would look like here so when we start it you'll notice the subject service is now started now the subjects going to start getting data there okay and you'll just see some numbers kind of flowing in now the behavior subject just launched notice it immediately got the last one that was emitted okay very cool you get that last item now replay subject got everything and then finally acing subject just completed now the others will just keep going from here on out whereas replay subject you're done you got that last or I'm sorry ASIC subject you're done you got that last value and that's kind of what these would look like now we'll come back to this in just a bit here let's talk about some of these other techniques we could do now to make this work so now we've talked about the subjects what do you do with the subjects well you might have heard of service with the subject or subjects service or however you want to call it we're going to talk about some different communication techniques where we can use these to do something whatever that may be to send a message so for example we would like to send some data well I'm going to talk about an event bus and how you could use that and the pros and cons we're also going to talk about an observable service pros and cons will kind of go that route now the event bus could also be used for the dash board snare anybody have a dashboard where you never know what widgets are going to be on there but sometimes they have to communicate with each other pretty common right when the user can pick whatever it is they want to pick for the widgets well we can do that with this event bus so an event bus would be great for scenarios where component a component B component Z they have no idea about each other all right very loosely coupled and I'm going to send events around messages around so that we can communicate and I want to emphasize again that you know if you say well yeah damn but I need to store the message in like a state store okay well then you can probably go with one of your state store options this is more for just I just need the message but I don't need to store the data in the store okay and this is what we call the mediator pattern it's typically what we call a middleman pattern man-in-the-middle all right now we could also have another one we're going to talk about called an observable service now this would be good maybe have an inventory service and let's say you have WebSockets pushing into it well how do you know when the data comes into the service if you're these components let's say over here you're the components that need to subscribe to the service way over here how do you know well we can use subjects to do this we're gonna go through these in just a sec here so first off let's talk about the event bus now this is a very loosely coupled way to communicate and there's pros and cons to this I don't think it's appropriate for every scenario but I think there are some scenarios where it works great so first off we can create an event bus thanks to John popper for the fabulous animation by the way he's pretty good at some of that stuff so we could create an event bus here and this is going to define a subject now subject remember you only get the data after you subscribe all right now the difference here is I don't want to just send out any data I want to do it event based I have a customer selected inventory changed order deleted you know whatever it is that you want to do well the first thing I'm going to do is we could define a knee mitt and I just made this name up you can call it whatever you want a course and what I'm gonna do is this is how we would send data using the subject now notice though I'm passing an event omit event I'm gonna show you that next slide or two here it's a very simple class I wrote that takes an event name and it takes the data so you could have a customer selected or deleted whatever it may be alright so that next is going to be really really important here as we work with this now of course we also need this this handles maybe this crowd over here wants to send data but you over here you want to receive data right the event must is just in the middle here so the way we can do that is through something like this now this is kind of cool because you can use rxjs here to say alright I'm gonna pipe the subject here and whatever event is passed in the on that you see now there's different ways you could pass the event here I chose an enum has anybody prefer magic strings if you do we need to have a talk but you could use whatever you want but I chose an enum - just so I don't have typos because I'm pretty good at typos so this on here what its gonna do is you'll pass me the event you want to subscribe to and I'm gonna filter down based on that event name to any that are emitted the top one out of the subject alright pretty cool now this is where you need to make a decision notice I'm actually subscribing here okay the reason is that if you're sending data you're receiving data you don't have to over here do anything except for say on customer selective which I'll show you next give me the data all you have to do is unsubscribe that's it you don't have to do a subscribe and you know pipe stuff but you may say no I don't want to do that I'm just gonna return the actual observable itself I'm gonna make them subscribe that would be an option this is to keep it extremely simple though on both sides so to send data using the event bus we're gonna do something like this we're going to inject it first off typical angular way to do it and then notice down in our code here and select customer see that events dot customer selected well there's my enum but again if you're a magic string person go for it but I'm gonna say I only want to submit data for customer selected and then here's my data so I'm using that event bus to e men you can see now on the other side so that B will say you over here now for the people over here you need a way to subscribe to through the event bus in a loosely coupled way because you don't even know them by the way you're just magically getting this data well we can do that by injecting it and then notice in my ng on an it I'm going to say hey event bus on this event get me the data and do something with it whatever that is now that be of course up to you now the big thing here is you do get a subscription returned I prefer to use something which John talked about this on Wednesday called sub sink from our good buddy Ward belt super easy super lightweight and this will let me easily subscribe or unsubscribe from multiple observables there's different ways you can use it I chose to use the sink property okay so that kind of covers you can omit you can subscribe but you can over here or have as many events as you want and over here you can now filter down to I only want customer selected order completed inventory added you know whatever it is now that sounds pretty cool on the surface but does anybody done an app like this where they may be abused this concept you had like ten thousand events and you never know where data is coming from all right so there's pros and cons to this it's very loosely coupled that works awesome but you also need to keep in mind that unless you added data here that instead of just getting the customer maybe you also get info about the sender then you could do that too now that would be an option but still you got to keep that in mind from a maintenance standpoint in my opinion alright now the last main one we're gonna cover is an observable service now the difference here is with an event bus I want someone over here to communicate with someone over here but you never meet alright it's very very loosely coupled with the observable service what we're gonna do is I have a service like an inventory service we'll say or a customer service and when data changes in that I'd like to notify other parts of my app now this again would be one of those cases where you have to evaluate is this data I want to store okay in that case you might go with an TRX in jrx data I use something called observable store you know whatever it may be but if you just want to send messages but you don't care about storing the data then this is a great way to go it's very simple all right so let's jump in so first off you notice up top I've defined a behavior subject why well because if you subscribe to this which I'll show you in a moment you want to get the last piece of data we're assuming so if you missed out on the previous minute of data and only one thing was sin you'll be able to get to it super cool now notice I'm not exposing the subject though directly I'm calling as observable here if you expose the subject directly which you could do by the way and it would work whoever subscribes or hooks into this well guess what they have to do they have to know the whole subject API they're gonna get kind of overwhelmed by stuff they don't need and they could start emitting things not a good idea because now you're really confused on where data's coming from in your application now finally we do exactly what you saw earlier we're now going to take our subject and we're to call next on it and that's going to send out our product very simple now the difference here between the eventbus is you're gonna see we're gonna inject this and we're going to subscribe to it so this not only sends the data but it's also the source of the message wherever that message came from alright so very very simple though just a few lines of code you can get something like this going and now you have to choose do I want subject do I want async subject replay subject you know whatever it is whatever is best for your particular scenario all right so moving on here let's wrap up this part and how do you subscribe well this is just back to normal you know anyone who subscribed httpclient or something like that could do it now we would inject the inventory service into our target it could be another service it could be a component it's totally up to you on what you'd like to do there and then we simply subscribe to that inventory changed observable and we get the data and if in this case if you'd prefer to use like the async pipe you know that'd be an option as well I'm kind of showing the unsubscribe part but you get the idea here and I would of course have to have sub sink up top couldn't fit it on the slide alright so those are two patterns that you can follow so let's review here real quick so subjects allow us to send data anywhere in our app doesn't matter how deep how shallow we can send data anywhere you just need to pick the appropriate subject and then we just discussed two patterns that you could actually use to make this happen all right it's I'm telling you if you haven't done this before it's immensely powerful and super simple so if you feel like you're overwhelmed by complexity right now with whatever scenario it's a very simple way using one of these patterns to actually go in and get data from point A to point B no matter how deeply nested now I want to go back to if you're using inputs and outputs where appropriate this doesn't replace that of course okay but if you have a really deep hierarchy or components that are at different levels then you want to be really careful about you know input input input or output output output whatever it is all right now I have like two seconds left so I'm going to mention one more thing here actually a little bonus content I don't know if I'd have time to cover it but oh no we're not nice I'm gonna mention that power point decided to crash let me see it real quick if I can open that back up and we'll just jump to it real quick here all right gotta love it all right so let's go to here so this is actually taking this to a final level if you not only want to do what we just talked about but you also want a store you want state management you can do that it's very simple to do this is actually what I use and a lot of the companies now that I work with are using this so it's called observable store it's a very simple project that allows you to leverage subjects but it has a store behind the scenes to set and get state and it tracks history of the state changes and you can lock that out and do all kinds of fun stuff so if you're interested you can read more about it I'll give you a link here my clicker seems to have a range issue you know if you've noticed but this is the main goals of it single source of truth immutable data change notifications of the store track state history all the stuff you normally want with state management very simple and this kind of shows what you do you just use services and then you can extend an observable store and guess what's in that observable store subjects they were using subjects actually so more info there if you're interested well now I am officially out of time so thank you so much for listening and good luck with mastering the subject [Applause] [Music] you

Channel: ng-conf

Views: 42,398

Rating: 4.9314699 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming, ngconf 2019

Id: _q-HL9YX_pk

Length: 22min 17sec (1337 seconds)

Published: Wed May 08 2019