Complex features made easy with RxJS

so this is a talk called complex features made easy I'll put that in quotes with RCS I know that a lot of you here probably aren't angular developers how many people here have used or heard of rxjs before about used ArcGIS I said heard of alright so your you might feel a little bit during this talk like I feel in traffic here in India I'm gonna go through some features I'm gonna go through very quickly my expectation is not that everyone's gonna walk out of here going oh I know how to implement everything just like Ben did with arcs yes my my intention here is that you get excited about RCS and its features and see some of the more powerful things you can do with it so again everything I'm going to show you is easy if you know arts yes uh as he said I am Ben Lesh I am an engineer at Google I am the rxjs project lead and I'm also on the angular team at Google so what is arcs yes for those of you that did not raise your hands before don't order it is and maybe this might help some of you that already think you know what it is I'm gonna give you a very quick primer not gonna go in a lot of depth there's there's a lot of other ways that or a lot of other people who have done that before including myself but observables I'm gonna mention there's a lot observables are the primary thing the main focus of RCS observables are a primitive type and what they do is they give you zero too many values and they push those values to you over time they are cancelable in that you can tell it to stop sending you values and they're lazy meaning they don't do anything until you subscribe to them so they're lazy in a way that a function is lazy like if you have a function function doesn't do anything until you call it observables do not do anything until you subscribe so this is what subscribing to an observable looks like you have an observable you call subscribe on it and then you generally give it one callback that says oh every time this nexts of value at me it emits a value I want to call this function and do something with it in this case I'm just logging there are many ways to call subscribe you can also provide a secondary argument for if there's an error and this means this the observable is going to stop in error okay and finally this is a complete so this is just saying oh the observables don't send any values and it was done successfully don't worry about it but generally speaking most people only ever call it with the one honestly sometimes you can also call it with an observer which is just an object with these three methods on it they're named like next errand complete one interesting thing about this is the cancellation aspect of it so observables give you this really ergonomic way to try to cancel and say I don't want you to send me these values anymore I want you to stop and what it is is it returns a subscription from the SUBSCRIBE call and later on you can call unsubscribe and that will that notifies the the producer inside of that observable to stop sending values up through the observable so observables push values zero values or an infinite number of values over like an immediate amount of time or any amount of time and it'll they also will either complete successfully then notify you of that or they'll notify that there's been an error and stop in any case that it'll tear down every any resource that's underneath the hood but that's what a durables are about and the important part about this for for the talk today is observables are really collections of pushed events or values so any anything that you can imagine an array or a WebSocket or whatever can be now treated as a collection in this shape of an observable and collections are very interesting because then you get into things like category theory and whatever in monads and end up functors in Yatta Yatta those are horrible words that don't really explain anything kind of well to anybody I'm sorry to any mathematicians that think they're wonderful words in the crowd you can beat me up later but really what that means is collections collections of anything they can be filtered which means narrowed down to smaller collections of the same type or transformed into new collections of the same type or they can be joined with other collections into a new collection or they can be split apart into different collections others just lots of different things are flattened flattened it would be like if you have an array of arrays you can make it just into an array right so these are various things you can do with collections and it's not a property of an array it's not a property of observables it's a property of having a collection of things you have a collection of apples you can make a collection of apple pies right like it's just a property of collections so the most common collection that we deal with every day is a race so we have these arrays and with an array I can say here's my array of numbers I'm going to filter it down to all the numbers that are greater than four I'm going to double those those numbers and then this reduce down here is going to sum it together so that's kind of reducing it down into a single value and I end up with 52 I can do exactly the same thing with our X you'll notice that I'm not not chaining what I call dot chaining here not filter dot map dot reduce in our X 6 and above we're doing pipe chaining it's the exact same concept it's just functional there's a lot of advantages to that I'm not going to get into that too much here but what you need to know is it takes the source observable and then passes it to the filter and returns an observable then pass it to the map and returns observable and to reduce and so on we have the same exact sort of operations with observable that we have with array but observables have a little bit more than that because arrays you can go over synchronously but they're not asynchronous observables can do a synchronous things which means there's this temporal element this element of time and because there's an element of time we can do things like debounce them or throttle them or you can say combine the latest value from this with the latest value of this other one right just depending on when they arrived in time here's an example of something you might do with observables this is a basic drag-and-drop so here everything that you see with a dollar sign in this case that's a that's a thing I lovingly dubbed finish notation after my friend Andre Stults who lives in Finland who kind of started popularizing this but every variable you see with a dollar sign is an observable and what we've got here is I'm making an observable of drag and drops from an observable of mouse downs and I'm saying every time there's a mouse down I want to map it to an observable of mouse movements and I want to take all of this mouse movements until the observable of mouse ups emits one value and I know that's how this works because I know it exhaust map and take until do these are just part of rx Jess here's another thing so just exhaust mapped just to kind of help see what it does we're actually going to this would be a button worse you say oh I don't want this someone to hit the Save button too many times and accidentally post data more than once and so people disable it or whatever this is another way you could disable it you could just say okay so every time there's a safe click I'm going to map it into my post which isn't observable and then I'm going to use exhaust map on it what exhaust map says is wait for that observable to finish before you allow any other map before you allow it to map to any other observable and subscribe to that so it's going to map to that one wait for it to be done before it allows another one to go through no matter how many times you you click the Save button so a throttled autosuggest so this is another one's called autocomplete or look-ahead search or something like that this is a kind of idiom attic example in rx there's a lot of demos and tutorials that show this but what you have is an observable of text input so these are changes to like a text box on your screen and we're saying we want to debounce those by 500 milliseconds which means if someone changes it then wait a full 500 milliseconds before you allow it to pass if they change it again before that 500 milliseconds drop the previous value save the current value wait a full 500 milliseconds before word to pass before it gets through so it's just a way of you know preventing you from spamming the server with requests and then after that we're gonna switch map that to our get and switch map is a little different in that if that get takes a long time and another before it responds and another search is requested it's going to unsubscribe from that one and subscribe to the new one that it maps to so it's it's kind of the opposite of exhaust map but the point of all this is composing asynchronous things is really what Arceus is good at it's it's it's the wheelhouse and that's kind of what we want to get into here RCS just so all of you know can be used anywhere I worked at Netflix prior to Google at Netflix I did not use angular I'm on the angular team now Google of course I use angular at Netflix I used RCS with node I use RCS and react and I use RCS with ember I can tell you factually anywhere that can run JavaScript can run rx Jess so again this is gonna be an angular app that I'm showing I'm on the angular team I think I'd be doing my team a disservice if I showed you a react app right but I'm gonna be updating features in an angular app and I'll try to give some context as far as react because I know there's some react developers here as well so remember that I said before observer observables require subscription in angular we've got a really nice feature called pipe pacing so you're gonna see that a little bit and what this does is it's part of the template and it says hey when this when this component mounts I want you to subscribe to that observable and every value it necks out I want you to place in the template right here just bind it out and then when the component unmount or is destroyed it's going to unsubscribe for you automatically so you don't have to manage that subscription so it's a very nice feature for reactive programming as far as angular goes and if you have something like this where there's like an if statement around it so based on some boolean it's gonna show or hide or remove this part of the template it'll actually subscribe when it's shown and unsubscribe when it's hidden it'll do all that for you so that's a nice feature in angular if you ever want to see a talk on angular bait or rxjs basics because I didn't really get into it in depth here I did a talk already you can watch a much chubbier version of me give the talk I'm I'm big and in that video and and it goes into more detail about what rxjs does internally so here's the app that we're gonna update it's just this randomly generated news data and just this dumb news feed up and all it does right now is you load it up it shows you the news if you wanted to see the news again you'd have to refresh it basically there's not even really a refresh button you just have to refresh the webpage so one of the features we want to add is like an auto refresh so like on some interval have the data refresh itself for you so you don't have to do that and then the other one I want to add that's more exciting is dragged down to reload so if any of you have ever used like Twitter before and you're on and you have to the drag down in order to reload you drag far enough then if you don't drag far enough and you let go then it goes back up to the top but if you drag far enough then a spinner and when the spinner goes away and animates back whenever you're done loading there's lots of interfaces like that that's what we're gonna add to this so the basic structure of our existing app there's really only two pieces there's a new speed service which is just a class that has has an observable on it that gets data for us and we have a latest news component which is what's displaying the data so the latest news component looks like this I've got just to kind of focus on I don't need all the imports up there I'm gonna focus on this what I've got here is I've got this property at news dollar sign it's an observable of the actual news and you'll see it's an observable of arrays of news objects that's coming in and then I'm also injecting the news feed service down here so angular has dependency injection it's going to provide this news feed service as a as a private property and the news feed service is actually what's providing the news observable so our news observable is actually coming from the service at this point here's what the template looks like so you'll see up there kind of like in the fourth line down I've got that pipe a sink and I'm type a Singh out that news property so that's going to get that news array out and then I'm using ng four to kind of loop over that array of news whenever it comes out and just find it out the title and you know whatever the string is and the timestamp and those sorts of things so the news feed service right now looks like this it's I'm providing the HTTP client and then all I've got in here is just a property with an observable on it now that alone is kind of weird two people are used to promises promises you generally have a method that returns a promise the reason you have a method that returns a promise is because what you really wanted is a lazy promise and promises are eager they are not lazy so you have to wrap them in it and in a method and return them in observables case they don't do anything until we subscribe so wrapping it in a function is just pointless it's not going to do anything for us in this case so this is an observable that when you subscribe to it will perform a get to get our news feed it'll get the JSON out of it it's got a catch error that just kind of logs the air to the console and forgets it and I'm also sharing it so if I have multiple subscribers to this it shares the one HTTP request amongst multiple subscribers until that HTTP request is done so we don't spam the server a whole bunch but again this is just a basic feed that's all that's all we needed to create this basic feed was that bit of code so far let's add the update interval feature because that's the easiest one but it is gonna require us to refactor some things so the first thing that we're going to need to refactor is this is the newsfeed service so the newsfeed service look like this before we just had a property on it that was our observable of news arrays right and I'm actually going to rename that to load News it's the same thing I just renamed it to load News and then I'm gonna add another property that's a behavior subject called refresh and the point of this is every time I next into this this behavior such a behavior subject is both an observer and an observable so you can subscribe to it like an observable and when you next to value into it I'm going to map that to load news up above and that becomes my new news dollar sign so that news dollar sign is still providing the data that I am that I need for my view but it's coming from every time I next into this behavior subject and then one of the properties of behavior subject is the first time you subscribe to it it gives you whatever the previous value it was in this case I'm initializing it with no because I don't really care what the value is but this will get us to where we were before already but just now there's a way to trigger it to reload news data and then we've got to go and we have to update our latest news component so I'm gonna add a refresh timer so this timer function here comes from our CAS and what this says is have a timer that starts at 0 milliseconds and then goes once every 30 seconds so every 30,000 milliseconds and what I want to do is have that trigger the the reload of the news somehow so how do we do that well we know that we want the news to be the property like the news feed news to be that news property we're gonna have to add something that that takes that refresh timer and next into our refresh behavior subject so I'm going to add an ng on in it if you are a react user this is roughly the equivalent of component did mount and inside of there I'm going to subscribe to my refresh timer and pass to it that behave you're subject because it's got the same shape it's an observer an observer so it's got a next method on it and every time the refresh timer emits it's going to call next on that refresh which loops back into our newsfeed service and triggers news to emit which we've got on here as a property and is being bound out to their view the other thing we need to do is we need to actually track the subscription so I'm adding since since I said this doesn't scription equals here I need to add the subscription otherwise type script will be unhappy and then finally I need to add this ng ondestroy so this is the this is the react equivalent of component will unmount right so this this is saying so whenever this goes to unmount or destroy I want to call unsubscribe in the subscription so that'll stop that interval from ticking over and over and over again you don't want that you don't want to leave that running in the background it's a memory leak so again just to just to kind of go over and that where the subscription part is this is I have a whole slide specifically for this because this is a very common pattern when you need to subscribe to something if this will react it would look basically the same only it would be a component did mount and component will unmount instead of on an it non destroy pretty much identical so that's it just to recap what we did so far and then I'm going to show it working we we used to behavior subject in our newsfeed service so we kind of refactored our newsfeed service to reactively trigger that reload and then we also we also used a timer in order like on our component and have that you have that timer next into the refresh the behavior subject that we put on our service and then we manage our subscription and on an it and on destroy and here's it working now I upgraded it two to three seconds so you can see it otherwise we'd have to wait for half a minute that would be really a boring talk on my part I could dance or something but yeah so it so it's updating now that's what we wanted so just a few things you notice we didn't touch the template at all right the template we just renamed some things it's probably why we had to do that right but mostly we just kind of did the small refactor and we kind of worked backwards and that's a little hard to see in this case because it was it was a small addition but we kind of worked backwards through what we needed starting at the template let's work on our pulldown to reload feature and this one's much more exciting because it's much more complicated so here's why it's complicated you have to start when user touch starts and you have to accommodate for the fact that the user could touch like twice right you also have to track their downward pull with some sort of icon if they release before they get down to where the reload starts you need to animate it back on its own so there's an animation you have to deal with if you get it down to where the reload starts you need to trigger a reload right so then they have to deal with whenever the the HTTP starts and ends and then you also have to animate it back whenever it's done so there's there's a lot going on here there's three different user-provided events touchstart touchmove and touch end you have to worry about when the Ajax request starts and when it completes and you also have to worry about animations so I'm going to add a touch drag to load component and this the whole purpose of this component is it's going to control that that icon that you're going to see in the screen and it's also going to handle dealing with all the user interactions as well as dispatching events to whatever parent component owns it so the compare the parent component knows oh I should refresh data or whatever I'm going to do when it's dragged past a certain point it also needs to have some sort of mechanism to start spinning if while during the loads all the loads going on I mean so we need to refactor our latest news component and that means we have to include our touch to drag touch - touch drag to load component in the template and we also need to wire up the event - next into that that refresh on our news feed service so here's here basic class back in class for our touch strike the load component what I've done here is I have this refresh event so in angular we need to find an event you say it has this output and you give it an event emitter and that means that in the template someone combined to refresh and pass a method to it that can be called the template looks like this this is just HTML right now I'm not doing anything dynamic with with angular this is so I've got an outer div here that positions it left to right 50% and then I've got an inner div that's going to be responsible for translating the the icon down up and down it's got an offset of negative 35 pixels because I've got a 70 pixel diameter circle that I'm going to use I'm gonna use two circles one kind of offset inside of the other one and then my SVG tag here you notice I've got transform transform rotate zero degrees that seems pointless it's I have it here because that's what I'm gonna use to update the rotation when it's loading and with my latest news component HTML now what I need to do is I just need to add my touch drag to refresh component and you see I'm wiring up that refresh event that output that I showed you earlier to just nexts on that refresh behavior suffix now it's actually all wired up I don't need to do anything else so as soon as a refresh event comes out of my new component it's going to call next on my refresh behavior subject which we know triggers the news reload and we'll update our view but right now we haven't wired any of that up we just put it on the screen and we can see it's up there that's my icon it's just hanging out out there at the top not doing anything else but we know it's working so let's go back and change our touch drag to load components template a bit to make it dynamic so I'm going to have transform the style of that that second div there to move it up and down that's gonna I'm gonna have an observable called transform positions that I'm gonna pipe out with the pipe async there I'm going to bind to it I'm also going to by them to transform rotates on the second one to deal with the rotation part of it and when we go and we actually look at the component now I put in the minimal thing I need to do just to get it to work and that is basic just took the text right out of that style tag and I'm saying I have an observable of that text right in both cases and this is the minimal thing I need to do to just have it render but I'd really like to deal with numbers and not strings so I'm going to make my transform positions actually derive from another one called positions that's just an observable of 0 and then I map it and I'm just using string templates here to get the same sort of string out of that so now if I change 0 to something else it'll change the rotation or the position rather and I do the same thing for rotation so if I change you know that's 0 and rotates is something else it's going to change the rotation of the icon so it still looks exactly the same I didn't do anything again I'm working my way backwards I'm just providing so now I have observables controlling these things at least but we need to make these observables come from something more interesting so we've got a slight tweak to this to move the marker off-screen I told you the the diameter of the circle is 70 so we're gonna add negative so we're gonna subtract 70 from the position so it moves off the screen because we want to live up there the whole time we want it to just come down when you pull and now let's make touch drags actually affect the position so remember before I showed you drag and drop with the mouse down we're gonna use these exact same pattern only with touch and it looks like this we're saying from event which is a method from rx so anytime there's a document touch start make that we have this observable of touch star it's the same for touch moves and touch end and now I'm gonna say for every touch start I want to map into touch movements and take those until the touch ends so now I basically have this observable of touch movements such movement event objects really and I can just include that in my component class like so and what I want to do is I want to make my positions actually derive from touch drag so what I can do is I can just do that I can just say ok there and we're gonna map Y minus 70 there's a there's a problem with this because that is an observable of touch events right and I can't sir I can't subtract a touch event or 70 from a touch event that doesn't make any sense that's not a number right so I need to get numbers out of that and I can do that with a simple mapping up here where I'm saying okay well just take the current touch visit y-position and subtract the the start y position from it so I get like an offset of so now I have this observable of numbers for the offset of how far I've dragged my finger and just to kind of just focused in on that a little bit I got rid of some of the craft so you can see it the other thing I'm adding in here is I'm saying I want to start the position with zero down there the bottom I've added that start with and that's just to make sure it starts off the screen I don't want it to start in some other random spot so now when I drag it follows my drag at the very least that gray dot there's is my drag right so that's that's not too bad that it's that at least is doing that but it's not the full feature right so let's make it animate home when we let go that's kind of the next incremental step to making this work so I have a whole talk in rxjs animations I won't get into that here the basic idea is that I get an animation or I get an observable of animation frames and I do a little math with the offset of when it started in the current the current date time to try to figure out like how far it's gonna go along and I do some math to be able to tween between two numbers over a certain duration so tweening meaning like if I start at zero and go to ten over two seconds then like it one second I get the value five and you know it one and a half seconds I'll get the value seven point five and so on so it kind of does that for a get an observable of numbers the short version is I have this animation service that has a tween method on it to which I give a start number and an end number in a duration and it gives me an observable of those of numbers between the start and the end over that duration on animation frame so now what I want to do I'm gonna go back to my my touch drags my positions here as I want to focus on touch drags because that's where I'm gonna update this because really at the end like when I get done with the touch moves that's when I want to play that animation so when I let go with my finger like right after touch end there that's where I want that to happen so what I can do is I can first of all I'm going to add a property on here called move homes is a move home animation that if I subscribe to it it's gonna it's gonna animate home or in theory and I'm just saying tween between the current position which I've added of private property 4 and 0 in 0.2 seconds and then what I'm gonna do is I'm gonna concatenate my touch movements with move home and what concatenate means is play the first observable till it's done and then play the next observable so what I'm saying is do the touch movements until touch ends and then run my animation so we've got a little problem though we need to update the whatever the current position is in some way there's a bit of state we need to track so I've added this tap and what tap does is just say tap into the observable right here get the current value and do something with it so the side-effect I'm doing is I'm just updating that underscore POS and there's another little problem here in that whenever that move home observables created POS is zero so it's always going to animate between zero and zero and that doesn't make any sense so we need to have it delayed or deferred a bit and there's handy enough there's a method in rxjs called defer which basically says here's an observable that when you subscribe to it executes this function and then subscribes to the observable it returns so now we should see it be able to see it move home as soon as I let go which is pretty fun by itself honestly when you're playing with it but we want it to load right so let's make it refresh the feed if we get far enough so we go back to our touch drags here because we're gonna need to do something with this because it depends on how far you've dragged right so what I'm gonna do is I'm going to add another tap down here at the bottom where I'm saying okay if Y happens to be greater than half of the inner height so if I drag it more than half way then I want you to call emit on refresh so refresh if you remember is the name of our event on this component and when you call emit it emits a value out to the template where we bound out refresh to update it to call next on that subject it calls next on the subject which triggers the the news feed to reload so this should be all that's really required with the exception of we don't want it doing that over and over and over again right because tap is that's going to fire for every single time Y is greater than the the inner window height so I'm just going to how to take while right after it says but only take this while y is less than or equal to half the window height right so as soon as you go over that once it's going to trigger that emit and then it's gonna the whole observables going to stop so now you can pull it down a little bit in animates back where you pulled it down far enough and voila we've got it it actually loads reloads the data but then it gets stuck there there's not what we want after it reloads the day we want it to animate back so let's have it go home after a little load after the loads finished and some of that works already done we already have a move home animation observable right so what we're gonna do here is now I'm going to focus on position so we're not going to deal with touch drags anymore I'm gonna go back down here to positions and I need to have the positions actually update from more than just touch strikes because no one's touching at this point whenever whenever the load finishes you're done touching the screen it's it needs to something else needs to trigger that so I'm gonna have this move home after load observable and what I'm gonna do is say hey whenever I get news back from load news remember I was sharing that before that's the actual HTTP request the shared HTTP request when that comes back I'm going to map that into my move home animation and I'm gonna wait for that animation to complete before I allow it to happen again that's what exhaust map does and then I need to take move home after load and touch drags and combine them in some way to update positions and what I'm gonna do there is I'm gonna say I'm going to concatenate these two together so I'm saying take touch drags and whenever touch drags is done then start move the move home after load observable that's going to wait until those load news is done and then it's going to play the animation and that also means I need to have positions up like position updates feed into positions so now we've got it and it works but it only works one time it's kind of a bummer it was really exciting when it worked the first time but he wanted to work more than once and it's actually a really easy fix so what happened here is concat as I stated before plays an observable til it ends and then it plays the next observable till it ends and then it ends right so everything we just wrote happened one time and then it's done so we need to happen have it happened more than once and so then we just add repeat on there and that's that is a feature of RCS and this is because observables are lazy you can simply subscribe to them again when they're done that's all repeat does internally and as soon as we do that it works as soon as a they we can do it more than once and it's it's fine but it's boring because it doesn't spin right what would be what would be driving through the streets of India without honking we need we need some spinning to make this more exciting let's make this sucker spin all right so we've got we're gonna go back to our rotate so we've kind of forgotten about this for now because we're dealing with the position but we'll go back to rotate we want to update rotates to not be an observable of zero we want it to be something more exciting so we can do animations and we can tween between 0 and 360 degrees over the course of half a second and that's gonna make it go around once but we want it to go around over and over again so guess what we're gonna use our friend repeat and now it's gonna spin infinitely so we can check it out just cuz it's fun yeah it's spinning it always spins probably better that way honestly but I'll leave it like that we only want it to spin while it's loading so here's what we're gonna do to make it spin only while it's loading I'm actually going to say whenever someone calls next on refresh I'm also going to have it map into my animation of spinning so as soon as someone calls next on refresh it's going to start spinning and then the other thing is I gotta have it stopped whenever the the news data comes in so I just say take until news feed load news so load news fires when the the data resolves right when it comes back from the server and then the other thing I'm going to add here is end with 0 and end with zero is just because if it's spinning around like this and the data comes back well it's down kind of crooked then it's going to be stuck there until the next time it starts spinning again so I just wanted to jump back to zero so it's it's in a nice clean spot and that's it our feature is added so it seems like a lot because I've been standing up here talking and my mouth's getting dry and people are looking bored or looking like what is this guy talking about it's crazy but yeah so that's that's the entire feature and the reason the reason I went over this is is because again we're coordinating user events data load animations I really wish I had time to get into the animation side of it cuz it's really exciting you get to use math and do nerdy geometry things which is fun but the most important thing is that entire behavior even though I stood up here and talked about it for a while to explain all of it it was only about 50 lines of code like the whole thing and to end and i roughly guarantee you that if you were trying to do that imperative ly it would be a lot more code than that and it would be buggy and there would be they wouldn't get the deterministic memory management that you get out of rxjs and with the guaranteed tear downs and everything so that's one of the reasons I like this this particular example so in summary uh arch this is best used for coordinating events if you're just clicking a button and loading data please don't use rxjs I I write the library I love people that use it don't use RCS for everything you don't need RCS for your hello world app that's crazy whenever you're working on it try to work backwards so provide the observable that makes it work first and then figure out where you need to get those pieces from and combine those observables to make that observable and so on and so forth just kind of work your way back if you ever need to create an observable dynamically this is a weird thing that comes up and angular developers ask me about this sometimes it's like oh you know I had this situation where I had this observable and I thought I was creating it like properly but I need to create it on the fly there's this cool method called deferred that I think is underused in in rx and there's also this pattern with repeat so it's it's harder to see in here but basically if you compose a whole observable you think I don't ever want this to end I really like it like and then there's some sort of terminal thing like it loads data and it's done and you want it to you want it to come back out you've got to take while it stops or something you can just repeat and guess what the whole process starts over again it's fine so take while repeats an interesting pattern that was visible in here and then the other thing you want to do is try to factor out your observables into other things so for example I had that I had one property that was like transform rotate and another one that was called rotates right and another one for move home like don't just make one big observable that it is just like a giant thing think of RCS as a domain-specific language for dealing with events if you have one giant observable chain it's like the same thing as writing a giant function and we all know that's bad at least I hope most of us know that's bad right so you can break it apart into smaller pieces into smaller observables and it also makes it easier to test so that's it I'm open for questions the the repository for this is is available here at the bottom and you're welcome to go check it out you can find me on Twitter at Ben Lesh [Applause]

Channel: Hasgeek TV

Views: 41,850

Rating: 4.9588609 out of 5

Keywords: hasgeek, RxJS, Angular, polling, update, animation, strategy, feature, HTTP, UX, application, user, event

Id: B-nFj2o03i8

Length: 36min 12sec (2172 seconds)

Published: Tue Oct 30 2018