20 RXJS Operators in 20 minutes | Mike Brocchi & John Niedzwiecki

[Music] we'll take care of that so my name is Mike Brockie I am an engineer at ultimate software formerly worked on the angular team on the angular CLI primarily and I'm John as wiki I work for Disney streaming services and before you ask no I cannot get you into Star Wars land early I don't have that kind of poll it's true I've asked but today we're here to talk to you about UFOs unidentified forgettable operators I know but before we get started we need to issue a little bit of a warning I'm a dad and I'm a dad so for the next 10 20 minutes however long we're up here we're not sure there's gonna be dad jokes and if you don't like dad jokes the door exits or in the back or cover your ears it's fine but I want to start with the question we introduced who we are my my first question is who's this I know not you not me no I'm asking that but I know anyone incentives cookies anyone I can't see Han so I'm assuming nobody has their hand off a little bit of help anyone no pictures of his friends no no maybe some grand dance who was that I heard it yes get up here you get your cookies I didn't expect that to happen I'll deliver so you can explain so this is as mentioned Michael counts picture the moon he didn't sing fly me to the moon I was gonna even sing that but since the answer came out you don't get that so he was the third member of the Apollo 11 team he got all the way to the moon but didn't get to go down he flew the lunar command module and an orbit while Neil and Buzz went down to the earth so he's a little more forgotten maybe a little more unknown but he's definitely not unimportant especially if your name is Neil or Buzz he was very important otherwise they would be permanent residents right now so he was there so they could come back so the important thing is you know he's you know not unimportant we might actually be able to call him the UFA an unforgettable unidentified astronaut could go that way I mean these are the jokes people I mean that's all we've really got we gave you a warning so this is just you know more of the same yeah what we are here to talk about is 20 operators in 20 minutes where'd you burn through a few of them but that's okay we'll get through 20 okay that's that sounds like a lot yeah well there's a lot of operators in the rxjs library anybody happen to know how many there are got nothing but no snow by but no I told you no more answers for you 114 now but close I heard 104 yes there are actually 104 operators I'm gonna toss these down you pass them back out thank you so there are actually 104 operators in rxjs right now that does not count any of the static create methods so of from from event from fetch not included just the pipeable operators 104 so what we did is we decided to comb through the entire repo find these the operators and figure out which ones people may not be using on an everyday basis to find things that can add to your experience as you're creating observables and streams of data within your applications and we found some really interesting things and a whole lot of interesting gifts so hopefully you find it interesting and we're gonna move forward like I'm open I know I know yeah okay I'd you a perfect place to start with you do okay come on we can you and I even promised this this would be my only my one and only Space Jam joke okay one more but that one's it that will be the last one okay so you know how to kick this off then yes I know how to start with start with what start with come on a bit what are you gonna start with I'm gonna start with start with Costello we like the groom's it's okay so start with what starts with allows you to is to kick off your observable allows you to put something right at the very front of it so it can be very useful for asynchronous data to put maybe some C data in there some dummy data you know about dummies right unfortunately so you can start with some dummy data or whatever you want to put at the beginning of your your data there and allows you to kind of just insert that in there so space seem we got to start with a rocket launch I know ng-conf did it first they started the whole thing with their rocket launch but we had to have one too next operator we're gonna start with is pluck or continue with not start with out thank you pluck isn't an operator it's very similar to map but it has a very specific purpose it allows you to go in and grab a specific property off of values that are being emitted we had fun with gifts I promise hopefully you do as well but it's not only just finding a specific property but you can pass in multiple parameters to be able to find nested properties but still you only get one value out now my favorite one is pairwise and the reason why is because you can take pairwise and it's a perfect way to pair a sloth with this fluffy fluffy toy okay maybe it's not what the operators actually for we lost our presentation but what para is actually for is it omits the previous value and the current value is an array as you can see in those speaker notes there so you get the current value and the next value and you can use them to develop use that so anytime you need to know what the previous value was you can take those and now you don't have to store it and have it it comes with it for you so you can use it to build a nice little thing here like you see this min and Max how they interact this is a little example you know built with the pairwise operator built by a ruggedly handsome man who's a developer and you know might be standing right here thank you I'll take my $10 now I'll pay you later I gave away my third cookies so retry when you're familiar if you may be familiar with the retry operator we can specify how many times you want to retry a failure retry whities kind of gives you a little bit bonus on top of that you can get an observable of the errors so that you can decide how more granularly you want to handle your errors to retry them and by the way retry as a bonus operator doesn't count as part of the 20 so when something goes wrong you know you want to retry I have trouble with slide advancement so John helps me so I retry when Mike forgets to skip I retry so next one we talk about is zip so there's a lot of good operators that are used for combining multiple observables and zip is one of those so what it allows you to do is take a little buzzer bowles and group them together but you get all of the emissions at once so when everyone here has the color they throw it up in the air once everybody is thrown the color once they've all admitted you get the list of those and it pairs them together so you get the first ones and then the second ones I wanted to demonstrate it right here with all of you and hand out color packets but then it was messy and there's safety and all they sold me that wasn't a good idea yeah that's really bright the colors not the packet idea yeah I'm telling you that's all we've got these jokes so group by next operator is allows you to specify a grouping criteria to get your values grouped together as an organized output so you like to be organized organize your values as they come through using the group by operator describe subscribe on is a good one that allows you to kind of add some configuration so it allows you to add a scheduler so when an observer subscribes your observable it'll get the scheduler with it so it allows you to control you know the time of how it's going to go you know if it's gonna be a synchronous how it's all gonna work you know you can do some crazy things with it but anything a scheduler can do you can insert here so to really understand this one you got to really look at what schedules can give you glad we got through that one quickly because I was trying to get dizzy that's why I look that way yeah throttle time Thrall time allows you to specify a period of time to pause values coming through the observable stream to slow things down right but you can specify an interval how II wanted to wait and then after that window is up it'll emit the next bell or the latest value yeah sometimes you got throat just slow things down absolutely probably not now so timestamp so timestamp is another good time relating one and it allows you to specify get the time when you get something so when an observable emits instead of just giving you the value it takes that value and inserts it with an object and that object will have what the value is and when it happened which is now you got another value now and now so you can use the now clock all the time all the time is another time-based operator of course there's the name time in it and what it allows you to do is specify a time window to pause getting values emitted and when that window is up it will actually emit the latest value from the observable that sounds a lot like throttle time I know it doesn't there's a subtle difference between the two with throttle time going back to that when the timer expires it doesn't restart the timer the timer will restart upon the next emit coming through the observable streams whereas with audit time that timer will reset as soon as the timer expires so it's a more fluid consistent thing like these pancakes falling across the street that explanation took a lot of time it did speaking of time we're running a little bit behind so let's bump this up to ludicrous speed look it's not a race but we're gonna talk about races let's talk about the race operator so another one allows you to take your group of server balls but only get the one that emits first and all the rest get it ignored so if you're using the race operator if you're not first you're last next operator is skip no you can't skip we need to go through all the operators they've paid for this conference you get to get them everything but I can't get the operator no you can't skip the Opera okay so the skipper operator allows you to specify a certain number of emissions that you want to skip so you pass in three it'll skip the first three values and then proceed to emit everything that comes across after that well let it play again nope I'm going over skip one love it so that's nice but I like to skip until so skip until allows you to get a little bit more there so you're gonna skip things are going to keep skipping and things until no another observable emits and that observable tells you to stop it and you stop skipping and you now allow the variables in so you you're controlled by a second observable on when you stop skipping skip while is another way to skip a certain number but you're not specifying in number you're specifying a function that allows you to specify I want to skip while this is still true so if it goes to false then it will stop skipping and then you can start to get the values that are coming through that's that's pretty negative of you Mike I know I like to be more positive I'm a positive person so I'm gonna go with take Wow okay so works like skip well but you allow everything in you're taking those values in until that predicate is false so then when that predicate is false we say sorry now we're closing up shop so it's just the reverse everything comes in then you stop it next up tap I know I know a lot of you may be using tap but I like to think of tap as the unicorn operator I was thinking of the second ng-conf by the way tap is a little bit different than all the other operators because with all the operators anything that you're passing into with the functions that you're passing in you want them to be pure same input gives the same output no side effects taps the exact opposite this is the place where you're supposed to do your side effects if you need to set a value coming out of your stream if you're not doing it in your subscribe but you want to set another value externally with some sort of side effects that you do the other way to refer to tap in my opinion and I've heard a lot of people say this it's it's the console blog operator you have no idea what's going on your stream and you need to figure out what's going on throw tap in there use console.log and find out and use it to debug your operations so let's let's break it down a little bit let's reduce things a little bit so we're talk about reduce so what reduce does is allows you to give it an observable and then all of the values are going to get taken down and reduced via the function to one value when it completes and then that'll get emitted to you so now you can reduce everything down you don't have to track it you don't have to use a library that starts with the underscore character and a dot you can just do it directly on your observable itself ignore elements not sure about the use case here but there's a particular state that processes with ignore elements what it does is anything that gets emitted it doesn't care about it's not going to let it through the only thing that comes through if you're using ignore elements is if your observable or word at or if were to complete so that's the only thing that's going to happen so if you were expecting values that continue to come through with ignore elements it's not gonna happen you'll just know if your observable errors or completes you'll join us oh I was ignoring your elements I was I was being an example I don't do a good job yeah what well played thank you for helping me with the explanation so let's get small now let's look at this tiny details so mim-mim does probably what you're gonna get so you take your observable you get all the values that are emitted and when it completes it gives you the smallest one so again you don't need to track this durable can do this for you so we're gonna get the smallest one pay attention those small details Mike the small little things yeah little things mattered yeah the one thing I'm noticing is photos not there I miss Pluto who doesn't plant it right here for me always I agree I don't make things easy so going with the absolute opposite of men so same thing when you're observable completes when the values are through it will give you the maximum value so just like men except here instead of returning Pluto it'll return Jupiter that that was very big of you I can I try so that's 20 operators it is we did 20 already in less than 20 minutes so let's give them a bonus so we're gonna end with and with so and with it's our bookend I'm start with so it allows you to put something in your observable and I made it just before it would complete so since we had our spaceship take off the proper thing we should do is have that rocket also now land but that's you know the idea of in with is it's the reverse of start with so axle ken's and that's a good way to end with the operators however we've gone through this entire conference I have yet to see lost or not anywhere and in the I figure we need to end with lost or not lost when it's my favorite so he has to be here absolutely so what we've done is we've just gone through 21 22 if he can't share operators in a lot less than 20 minutes to be able to just give you some insight and some ideas to go out and explore other operators I don't know a lot of us just happen to stick with map filter and switch map and maybe a few others but explore the other 100 plus operators that are out there and see what you can do to increase your use of ArcGIS within your applications to make it more reactive so maybe some of those sound like they fit a use case that you something you're doing that you can now do with arts yes so if you do that you don't look into them deeper if none of those really fit we only did 21 of 104 so go read some more of them you know find ones that might be useful to you if you have them you know find them look them up play with some code ask us some question no don't ask us questions ask been some questions he's here don't ask us but you know use that if you're only using one more operating yet it's one more operator than the time before but if you only took away one thing from this presentation Michael Collins also you may have noticed as we went through the slides there were some pictures in there I'm not an artist I'm suit artist okay but actually all the artworks that you saw on there was actually from our kids we had here kids color pictures and draw pictures and we want to give a shout out to them so thank you to our kids for providing some artwork so thank you for coming to our talk my name is Mike Brockie and I'm Johnny's wiki enjoy the rest of the conference thank you [Applause] [Music] you

Channel: ng-conf

Views: 30,567

Rating: 4.2969699 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: ak3MvMn8u18

Length: 16min 13sec (973 seconds)

Published: Mon May 06 2019