Sequencing Streams with switchMap

[00:00:00]
>> We can use streams to sequence other streams. And so we can use a stream to trigger a stream and to shut down a stream. This is an important concept. It's very applicable to the DOM. But it is also when you start thinking about sequencing, like asynchronous communication between servers, this is also important.

[00:00:24]
So let's look at this code right here and let's segment it. So what I'm describing is drag and drop. So when you think of drag and drop, what are kind of the three main points of that? So mouse down, mouse move, mouse up, down, over up. And so these are the events that we need to capture.

[00:00:49]
So the first thing we're gonna do is we're going to define two streams down and move. And so, for down, it's pretty simple. We simply say, capture the mouse down event, start a string. For our move this is a little bit more intense because we're having to capture to some offset.

[00:01:16]
And so you'll notice here ironically that we have this dollar parentheses. What is that? Well, it's jQuery, like when you're calculating offset from an L like a relative offset, like if I click on this particular point, what is the offset to its parent object, and not the entire window?

[00:01:40]
So for me, the best tool that I found for that is jQuery. jQuery was very good at DOM selection. And those particular things when it veered off into everything else, that's when I think jQuery did a Fonzie and jumped the shark. But all we're doing here is we're taking the mouse event and converting it into an x, y coordinate.

[00:02:06]
And now, this is where it gets interesting. So we're saying down and then we're hitting the switch map. So we know what map does. It takes one thing and it turns it into another. So what do we think switch map does? Well, it essentially maps its output by switching to a new stream.

[00:02:33]
So what is going into the rest of the stream underneath a switch map, what is the stream that we're dealing with? It's this. So how this works is we're saying on the downstream start the stream but then immediately switch to the mouse stream. Until you have your upstream.

[00:03:11]
And so this is a really elegant way to sequence and communicate a very natural interaction down stream switch to the move stream until and upstream. And so in one line of code or two lines of code, we've done a really good job of capturing and sequencing this stream of user events as it pertains to drag and drop, which looks like this right here.

[00:03:49]
Pretty simple. [SOUND] We're able to just drag it around until I let the mouse up and down the Stream starting. So you can see here even it's kinda jumping on my mouse a bit. Well, I have to fiddle with kinda that offset. But I think we had this idea that when my mouse is down and I'm dragging it's cool the minute I went up the stream stop.

[00:04:12]
So down, switch to move until up.