Operators

[00:00:00]
>> Making streams is fine and good, and we've done some stuff with those streams. We have manipulated the DOM, predominantly, we've occasionally logged to the console but as these events come through the ability to do stuff with them. I think where we start to find the power of ArcGIS.

[00:00:20]
So, really when we talk about operators, we gonna talk about this as effectively a story in three parts. Part one,we just gonna talk about some of the basic data manipulation operator, right. These are not dissimilar from what you might be familiar with like in lodash or even on the Array prototype.

[00:00:41]
Harkens back to the very beginning of this when I said what I quoted from the ArcGIS documentation that RX js is like lodash for events. Well, yeah, that also means that like some of the methods like lodash has are common for ArcGIS as well. We'll start with these, a lot of them like will seem somewhat familiar or at least intuitive.

[00:01:02]
But what I want you to pay attention to as we go through is the syntax. The syntax could be slightly different than when you might be used to on array, you can kind of chain the methods as you go through. The concept is the same, but the syntax is going to look slightly different.

[00:01:20]
And for a very good reason they'll kinda explain along the way. So we will kind of start with this kind of Fibonacci sequence right here. Right now this one as we kind of like the question we had earlier was like this one will go on forever. So if you were to just subscribe to this you would lock up the main thread and bad things would happen, right?

[00:01:44]
But so you would have to do something like this you'd have to say like, cool. I want a Fibonacci sequence of a certain number of iterations and then stop, right? But again, the promise of like RX js is that we can take these streams and we can choose as the consumer, when we want to start and when we want to stop.

[00:02:03]
Right, we don't need the interval at the time is defined to know when to stop counting. We'll stop counting when we say we're gonna stop counting. We kind of like take that control in our own hands at this point. So every observable on top of everything else has this thing called a pipe method.

[00:02:23]
And a pipe method takes one or more operators right, and those operators kind of run through one after the other. And each one will manipulate the values that come through and pass it along to the next one. So similar to method chaining, also similar to usually the pipe or chain in lodash in a lot of like functional programming libraries.

[00:02:47]
There is some version of this where you can kind of just pick a value and keep moving it along the way, manipulating it over time. Where RxJS gets interesting with this is not only can you double a number, which is what we're gonna start with and stuff along those lines.

[00:03:02]
But you could also say like, cool, I wanna space these out over time. Or I want to only take every nth value, or if they're slam the rage clicking on that button wait until they chill out a little bit. And then we'll go respond with requests in a reasonable fashion before we slam our own API, right?

[00:03:23]
And all of those kinds of things giving us the ability to kind of control the flow. So we'll start with some of the basic kind of just operators for manipulating the data. Eventually we are going to move into some of the ones where we kind of manipulate time a little bit and have rules based on kind of the time space continuum or what we want to do.

[00:03:41]
And finally, we'll look at some of the ones that allow us to kind of take multiple streams and kind of to combine and control them as we go along. So, we'll start to play around with this in a second, but if we look we have this one called take, right?

[00:03:58]
And take is, take will solve that initial problem that we had earlier, right? Where we had an infinite generator that was gonna spit out values forever, right? It can still be its infinite self. We're just basically saying, I'm gonna take ten values from you. I'm gonna unsubscribe, right?

[00:04:18]
After that we're done here I'm going home, right? And so you can now you don't have to have all that logic in the generator itself. But you can have it in whatever is consuming it can choose how many values it wants and you kind of begin to manipulate so on and so forth.

[00:04:38]
Cool the other one its friend is skipped. Skip will skip the first number of values this one is dangerous or Fibonacci sequence because it is infinite so you gotta be careful. We have other ones like take while and skip while which will very much act like a filter factor Function where they'll go through.

[00:04:54]
And they will take all the values up until you hit 200 or skip for a while and then take four so we don't have the infinite problem. And you can see we can chain them. Where it becomes a little bit different is and we'll look at pop quiz a second, but I want to like the slides a little bit bigger.

[00:05:11]
So when I look at the syntax here, is instead of method chaining, right. You kind of pass them all in as individual functions, right. And even if it doesn't take any arguments, you still call it as a function. That's mostly to keep the syntax and the kind of API contract the same.

[00:05:29]
The reason for this is by breaking all the operators out into their own functions then you can import one at a time you can use tree shaking in your bundling tools right.
>> Is this is pipe then and arcs function it will take in repertory many does that or is it one of those weird like FP functions.

[00:05:48]
Cuz it has like a definition for one input and 2 and 3, and 4, where you max out eventually.
>> I haven't looked at the types to see where this ends, like the JavaScript implementation of itself, the JavaScript implementation of it, like well allow for an arguments whether.

[00:06:06]
If anyone's who's tried to like type a function that takes an unknown amount of arguments as saying that the types are usually just more and more types, right? And if you're using this with TypeScript, each one if you return a different value the next one has to be able to receive it right.

[00:06:25]
So like you start out with that initial value in this case from the Fibonacci sequence it would be a number right if you map it into a string and then you try to do a number thing with it. Type script will get very angry with you and type script will assume when you subscribe, you're getting whatever the last thing outta that pipe was.

[00:06:45]
But the actual type definition, my gut says I've looked at L Dash's, where it is simply. Here's a type with one argument. Here's two, here's three, here's four.
>> I just looked and it goes from one to nine. So you can put up to nine.
>> You can put up to nine before TypeScript gives up on you but the JavaScript implementation you should be able to have effectively an infinite number.

[00:07:07]
I think the only color I'll add to that question is nine in a row like past that, like just probably recently stopped at nine, right? That's to say you won't have things where you then you have child observables so on and so forth. But like after nine, you can probably you can also break stuff out into functions you have lots of options.

[00:07:26]
All right, so a pop quiz. This will never admit It. Does anyone know why?
>> There's no consumer, it's
>> It's got console all consuming it costs a lot of data right down there. Effectively, in this case, we will skip value.
>> We're not mapping then, we're not materializing any of the values, we're just filtering them.

[00:07:45]
>> We're filtering into a situation when nothing makes it out alive.
>> Yeah.
>> Right? We're skipping values that are under 100 and we're only taking values, but because it's a pipe you like both of those things like there are numbers between 101 and 499, right?
>> But only they basically nothing will make it out into the next one right so you have to be very careful that your pipe every value pass the next and without a set of rules and all run in parallel.

[00:08:15]
It's each stage only lets a certain number of values through.
>> Cool. All right, there are over 100 operators. Some of them are deprecated, some of them are just variations on the theme, we're not going to talk about all 100 of them.
>> We're gonna talk a little bit of some of the common ones and some of them I will just sprinkle in as we are building things right.

[00:08:41]
But we can kind of see some of them as we kind of go through so we've got that filter, filter does exactly what it does with arrays. It filters them based on the function. So in this case only even numbers will be allowed through. Map who doesn't love a good map?

[00:09:06]
Possibly midway through this workshop, you'll hate map for reasons that we will talk about later. Some people who have a little experience of smiling and nodding, the rest of you will will arrive at that station together. Map will go through the values and do some transformation to them.

[00:09:23]
This works great for regular values. I will just kind of give a little bit of a spoiler it becomes problematic when I heard you like observables, so I put observables in your observables. And that's where we're gonna have to deal with some of that, but we're not totally there yet.

[00:09:39]
It's got a little cousin called Map To, which just maps it to a value. Map To basically as effectively if you took whatever value wasn't returned the same string no matter what mapped it. Cool. Reduce is well, there's two that are kind of similar, right? Reduce and scan.

[00:10:01]
I want to point out the difference between the two of them we'll look at scan next. Reduce will basically be like an array reduce very much so where you will only get the final value when it's all done, right. So it works through all the numbers in this case it's totaling them up.

[00:10:19]
It will add them all in place and then give you the final value. Scan, scan will actually give you every time it runs that reduce function, it will emit the value and pass it through. Right so if you want every kind of piece as you go through every value is omitted you'll get it all on the way reduce will only give you the final result.

[00:10:44]
So the reason that I point this out is scan is usually what you want but your brain a lot of times because of arrays we'll think about reduce. So I'm like stopping for a minute and pausing to be like now you probably want scan even if you're thinking reduce in this case.

[00:11:02]
Scan can theoretically you can take an infinite range. You can scan through it, but then you take four, so on and so forth. One final one, which is everyone's best friend is tap. We said before the pipe, one value to the next value, so on and so forth.

[00:11:23]
Right tap allows you to kind of have a side effect for a second and return the same value you received, why is this useful? Because if you don't have tap here's what you're gonna do, you're gonna, map where you console log the value and then return the same value again.

[00:11:39]
You don't need to live like that, you can just use tap and you can console log the value. It's also useful for side effects that you want to do because again, you will or subscribe will only get that final thing that comes out. It will not get any of the intermediary values, right?

[00:11:55]
Yeah.
>> Am I understanding correctly that top is essentially a convenience function where it takes in value operates on it and returns that same value.
>> Yeah.
>> Yeah, okay.
>> Exactly, it's like I wanna do other stuff, but I don't actually wanna change this value in any way, shape, or form.

[00:12:11]
Keep it going through. I just want to, again, console logging alone is worth taps, weight, and gold even though it's code and doesn't have a weight and gold. But yeah tab is useful for, want to do something a side effect of some sorts. Great because this pipe is in functional programming like it's a pure set of pure functions tab allows you to have a side effect.

[00:12:32]
That could be console logging. It could be manipulating the DOM. It could be anything, anything all you need to do that's not gonna be the final value can happen in a tap.