Deborah Kurata "RxJS Action and Data Streams: A Love Story" l Angular International Women's Day 2020

bra for her talk I love Debora in the community because Deborah you're always like a very sort of stable steady supportive presence and you know obviously you've done so much work in terms of educating the community and you know that's just been a really really awesome thing that we you know we all love and appreciate you know every time we talk about angular it's like oh yeah Deborah's the best teacher ever oh yeah yes thank you so much for doing that and you know all all the work you've done I mean you were the first person that really taught me I think that well you taught me forms yeah and so you know back in those days and you know the fact that you're so willing to be you know reach out to the community and help community members is really what makes the ink of a community so special and awesome and it's what I found so special about the angular community so thank you for doing that thank you for being here now next up we're gonna go ahead and Deborah I've added you to the screen and you can get started anytime you like okay our extraction and data streams full of story how do you react to actions and your angular applications would you consider using our extremes what do I actually mean by actions in this context well basically any user interaction with the application any actions or events that occur within the application like clicking a button user typing in text into a text box and so on my name is Debra Kurata I'm a software developer and plural site author and I just want to take a moment during this incredible and stressful time may you each be the light in your family in your group of friends and in your community let's get started so this session is I'm reacting to actions with rxjs using data and action streams so we probably should start off by defining what those are you've probably worked with data streams so you might not have actually called it that data stream is basically the stream that is created when you issue an HTTP GET request so if you've done any angular of any amount you've probably issued an HTTP GET request and when you do it automatically creates an observable for you and provides that to you and that's what I'm calling a data stream now you've noticed that I'm representing it on a marble diagram where the marble is the response from the HTTP GET request which is an array of products I only have the name in there but you can imagine it's got all the data in there and then the vertical line to the right of it is a marker that indicates that it's complete the interesting thing about data streams is that they are all one and done what I mean by that is they emit just one time and then they complete and that's it so when I'm done you missed the one response and command complete so if you request one product it returns that one product and the response completes if you want you know a select star here all of the products from the endpoint you still get all of them as one omission in an array which is what we have here action streams on the other hand are more alive hence the word action there they are full of action and life action streams basically depict any of the actions and the application so the user clicks a button and every single time they click that button you're going to get any mission in that stream or the user moves the mouse and every single time they move the mouse you're going to get any mission on this in the stream or in our example the user clicks on a product so they clicked on the product with an ID of 42 that is emitted into the stream that 42 and they clicked on the product with an ID of 15 that ID of 15 is emitted into the stream so that's our action stream to help us better picture this we can kind of think through the sample application so here we've got our list of products on the left and we've got our product detail there on the right so our data stream is going to be bound to our product list and it shows all of our products our action then we will emit an action every time a user clicks one of those products will react to the action in the detail page and display the detail so how do we implement this let's start with a data stream angular is all about typescript typescript is all about type safety so the first thing that we always do is define a structure of our data so that we can strongly type it so here I've got my interface for my product entity all of its different properties here now our classic pattern for retrieving data is to create a service here is my product service and in that service we have a method get products and it returns our observable of product array when a component or another piece of the application subscribes to the result of this method call it will issue the HTTP GET request so it issues the request at some later point in time we receive the HTTP response and angular automatically takes that response and maps it into the structure that we specified in the generic parameter of our get so our HTTP GET generic parameter product array so it's going to map that response into a product array and read and omit it into the string it will then show up on our UI or wherever we've found it but let's think for a moment if we took this exact same code this exact same HTTP GET and instead defined it as a variable we had it declared instead of a procedure so here is our declarative pattern for reactive data so it's the exact same code but instead of having it inside a method call we're just going to assign it to a variable so we've got our products dollar stream and the convention is to append a dollar sign when we're going to be working with a variable that is going to be an observable that kind of helps us easily recognize when products would be the product array and products dollar would be the observable of the array so that then basically is our data stream so we've got it declared here well what does that do then for the component we then also declare a variable there again products dollar and we set it equal to the value from the service and because we're working with observable streams we can define a pipeline of actions that we want to have occur once we receive an e mission what about the UI then well because we are defining an observable we use the async pipe so products dollar pipe async as products and what the async pipe does for us is automatically subscribe and unsubscribe so we don't have to deal with any of that mess we don't have to do take a while or take until or remember which one we were supposed to use or any of that we can instead facing pipe it it will subscribe it will unsubscribe and when an item is emitted its emitted into the variable we've defined in the as Clause so when our products dollar stream emits that array of products it will emit it into the product variable and we can then use that within the context there in the template okay now you might be wondering why why would you want to do this what are some benefits of using this declarative approach for your data stream so first of all this is our data stream here's our HTTP GET and there is a result so think question then why why do we want to do this one thing that gives us is improve change detection when we're binding in the template using an async pipe we can use the uncursed change detection which more clearly defines when to do change detection instead of the default change detection which might occur too often so it can improve your performance by doing change detection only really when it needs to another reason is we can leverage the rxjs operators there are well over a hundred rxjs operators that we can leverage so by declaring these streams we can actually leverage those we can compose streams frequently our user interface for any real application has more than one set of data on it we might have multiple HTTP endpoints that we have to get data from and combine that before we display it in the UI that's really easy to do with our streams and lastly the one that we're going to be focusing on in this session is you can very easily react to user actions so instead of having to write procedures that when this happens then do this it all just works like magic all right so that's our data stream what about our action stream how do we go ahead and and that well as I mentioned when we we don't ever create our data streams they're created for us automatically when we issue an HTTP GET request but our action streams we have to create those ourselves we do that with a subject or behavior subject a subject and behavior subject are a special type of observable that are multicast a subject and behavior subject behaves as an observer meaning it has next error incomplete methods on it next we'll omit an item into the stream error errors out the stream complete completes the stream but it also behaves as an observable so we can actually access the observable part of that stream notice the pattern that we're using here we use private to declare our subject and frequently I'll do that within a service what that does is it ensures that only the service can work with that subject only the service can emit items into the stream can error out the stream can complete the stream that ensures that accidentally some other external components or other service can't mess with our stream then we define a public property product selected action dollar dollar because again it's an observable that represents kind of the read-only part of our observable stream and that's the part that our components or other services can subscribe to okay what is the difference then between a subject and a behavior subject well the subject just emits the user clicks the user clicked the user clicked a behavior subject on the other hand retains the last value so why is that important well if you have any subscribers coming late to the game with a subject they will only get the next amended value with the behavior subject they we'll get the last amended value and then each next emitted value where that's important we'll see in a few moments a behavior subject then since it always has this concept of giving you a value when you subscribe it has a default value which we define in its constructor argument in my case I've got a 1 in there that's an example okay how do we then emit an action well we would define a method and again if my subject is encapsulated within a service I would have this method publicly available in a service and anywhere in the application that wants to say hey the user picked another product we emit that product ID into the stream using the next method so that's our action stream the user clicks on the product with an ID of 42 the action in the UI it calls this change selected product it emits that ID into the stream the user clicks on a different product of an ID of 15 it again calls change selected product and emits 15 into the stream so we've defined our data stream that defines our list of products there on the Left we've defined action so that we know which products that the user clicked now what we need to look at is how we react to those changes how does the product detail actually react to the fact that it receives notification that the user clicked on product 42 how does it deal with that if it's only getting the 42 how is it getting the rest of the data it needs to go into the array and look it up so how do we take care of that code that's where our data stream meets our action stream we do that with the combined latest so always to find another stream selected product dollar and we're calling combined latest so combined latest isn't rxjs creation function that combines multiple streams into a new stream it uses the latest emitted values of each of its input streams and we'll talk more about that in a second one of the cool things is excuse me that it will wait for each input stream to emit at least once before it starts emitting now one of the common questions that I get is I need to do X but I need it to wait before I can do X doing something like combine latest is a great way to deal with that because it will wait for your products to come in here I'm combining our product stream that's our data stream with our product selected action stream which is our excuse me which is our action stream so we don't want this to execute instant until we have the products luckily for us it will just wait automatically it'll wait till it receives the products it will continue to wait until it receives that first emission from our action stream and this is where it's important whether we use a behavior subject or a subject because if we use a subject this will wait until the first time the user picks something and causes that action to happen if we use a behavior subject the second stream will be met right away and then it just waits for the products to come back from the back end server when it combines these streams when it receives the emission from the data stream and it receives an emission from the action stream it then emits an array of values in order one for each input stream now those words are difficult to parse so I put it on as a picture here so what combined latest emits is a so that's an array where the first element is the emission from the first stream which is our data stream so that's our array of products the second element of the array is the emitted value from the second stream which is our selected Product ID so that's what combined latest emits for us okay so what are we going to do with these combined streams well we're going to map them we want to have some kind of transformation basically what we want to do is we want to look up the selected Product ID in that list of products so we can to return the selected product as one product that the user selected but what is that weird syntax what does that do that's basically a raid destructuring if this was just an array variable a in my little example there then we would have to actually reference our elements using a race syntax so you would have a sub 0 a sub 1 and somehow you need to remember that a 0 represented the array of products and a 1 represented the selected product ID and that's kind of confusing so what array destructuring lets you do is give a name to each array element a variable name so our first array element we're going to call products our second array element we're going to call selected product ID so we can more easily work with those without having to use the array syntax then inside our map inside our transformation here what we're going to do is use the find method on the products that if provided to us and look up the ones that match that particular ID and that is what is emitted from our selected product dollar string and if the detail page subscribed to the selected product dollar in its template bang it will immediately show that ID in the page by product in the page very cool stuff all right so thanks there it is the other really cool thing about all of this is it will reacts acute the pipeline on every emission so our data stream as we said units only once that's never been allayed again it just gives us the data and then completes but our data stream the user picked one of the products what it will do is combine latest with our data stream and our action stream and it emits this array with our products on the 42 you notice the user then takes a different one it reacts Acutes it's pipelines the combined latest will be execute with the last emitted value from each stream well our data stream is only going to emit one so we'll just keep getting that every time and that's what we want right we want that list so we can pull off the one that they picked seems like magic so it will read X acute this pipeline refined it and automatically display the other one so you don't have to be writing procedural code if this happens then this undo that this will just automatically every time a new item is emitted it will automatically re-emit the correct product to display on the detail page all right so our steps define a data stream again we don't have to actually create the stream we just define it by issuing an HTTP GET request create an action stream those we do need to create with a subject or behavior subject we emit a value every time an action occurs and we combine the action and data streams with that let's look at another example here's some one that's a little bit more complex it's got more stuff going on and you can imagine what the code would be like to try to respond to all of these things the user can type in a filter by they can use previous and next to go through the pages they can show the results two per page three four page five per page and again I only have a small amount of data in my sample app in a real app it might be five ten and twenty five or five twenty five and fifty doesn't matter what the numbers are there per page but the idea is that the can change that they can change what page they're on they can change their filter and you want the screen to adjust automatically whenever that happens so how do we implement that well the imperative technique would be we would have some kind of method right and we pass it the list of products and pass it the filter by string and it would return the filtered list of products and that would give us the filter part or if we were going to have it done on the back end you know because if you have thousands and thousands of products you're not going to bring them all down and filter them on the client you would want to issue an HTTP GET and pass the filter there and get back the filtered set of products so how are we going to do this when we're using a declarative approach because we can't pass things in that's one of the most common questions that I get when talking about this declarative approach if you're declaring a variable you can't pass things to it so how do you deal with that our data stream plus our action stream so here our data stream is this dot all products dollars so that's all of our products then we're defining a subject and we're going to use a behavior subject here we'll talk about why in a moment and so we have our I should of the private keyword on their private filter subject and our filter action as observable and what we're going to do is use combine latest to pass in data what that does is it gives us access to both sets of information so it will give us our data stream and it will give us our filtered action now here is a prime example of when you would want to use behavior subject because if we are going to bind to filtered products when if we want the user to be able to see that list of product immediately when the page comes up before they necessarily types of filter subject we need that filter action between it right away otherwise filtering products won't be met so that's why we use a behavior subject and just pass it an empty filter action our map then again uses array D structuring will perform the filtering and display the entire list because our filter is an empty string okay so that's the filter part so that will take care of filtering but what about all that other stuff that's on there we can create action streams for those as well so here's the page size we've got page size subject that's also a behavior subjects that's five and it's action and again we're going to define a combined latest and pass all of these in now notice that first stream they're filtered products that's our stream from here that's our filtered product stream so one of the other nice things about doing this way it this way is that we can combine these streams in different ways and in separate steps so we don't have to have one massive combined latest with all the complexity of the code performing the filter and doing the page size because we can take that one stream and combine it again with some more so here we're combining it with what current page that we're on and the page size action whether it's five per page ten per page 15 per page whatever it is and then we are mapping that using slice to display the appropriate set of information okay so this is the different set of code that we would use if we wanted to do this on the server so this is the technique that we would use if we download all the data first because we're going to work with a small enough set of data that that makes sense otherwise we pass parameters in to our HTTP GET and again this is our passing parameters by using combine latest so notice we don't have a data in this case because we're going to be passing all of this to the back-end server so we have our action we have our current page we have our page size and that's how we're passing the data then we can do our switch map and we've got our array D structuring so we can name those things nice variables and we define our parameters for our HTTP GET okay everything that we just saw here regarding these streams for paging and such this all came from Erin frost so I want to thank him for I'm showing me these techniques I just want to give him kudos for showing this the first time I saw it wasn't a presentation he did in angular meetup in Colorado that was really great so I stole part of his example and wanted to include it in this talk to really give you the sense or how to pass data into these things all right so data stream and action stream so our data stream like for example our products one-and-done we have an action stream which was for our current page we have another action stream for our page size we have another one for our filter but I only had a room for two here you can combine them it will emit the most recent value from each stream once each stream emits if the user then goes next to go to the next page it reads the most recent emission from each stream sore but set of products r2 and r5 and if the user then changes to a page size of 10 again it emits the most recent value array the 2 and the 10 bottom-line data stream plus action stream is low there are some links this is my github and my Twitter so I have a sample application with the pagination in that github repo and thank you all very much thank you so much Deborah there's tons of questions in the chat so I don't know i mean we have a few minutes if you want to answer any where am I looking for them right one side you'll see comments and you can just click on convert it's actually an Indian stream yard so on the right hand side you'll see common old live comments there we go I was looking at the wrong tab alright so yes Aaron frost does rock higher lets me love that pattern my latest awesome presentation thank you so much I'm looking for questions well I guess we don't have that many questions I thought we did but um well I guess the question I saw was with the declarative approach how do you prevent your code from getting cluttered but that might be a that would be a longer one your quote from getting cluttered that's a good question well because of the way that you can merge these streams all at once you can definitely put them in different services so you don't need to have them all in the same service because the streams themselves are defined as public properties so you could have a service that just knows how to deal with your pagination for example and another service that knows how to deal with your product data assuming that you know you're doing your pagination on the client side so you can break these up because you're dealing with those streams in a declarative way and because they're public and services you can organize them as into smaller segments and still merge them all together so that makes it really easy to keep it from getting all clogged up and and messy because I don't like method code either did you see any other questions in here I think that was the only one but you know thank you everybody will be up for the last slide again yeah yes I think yeah thank you so much Debra for joining us and you know you can find our on Twitter at Deborah Kurata which is on this slide right here on Deborah's always you're always like willing to chat and help people out so feel free to reach out there and Deborah will let you go and again thank you so much for joining us Thank You Tracy thanks for putting on this event I appreciate it yes have a good day

Channel: This Dot Media

Views: 783

Rating: 5 out of 5

Keywords: Javascript, International Women’s Day, Angular, Web Development, Engineering, Software, Code, This Dot, This Dot Labs

Id: OKZBHuYa-wc

Length: 31min 44sec (1904 seconds)

Published: Mon Aug 31 2020