The full video and many others like it are all available as part of our Frontend Masters subscription.

Brian Lonsdorf

Brian Lonsdorf has taught several workshops and training courses on functional programming with javascript. He'a a regular speaker at conferences and helps organize/host FP events around the Bay Area.

Brian Lonsdorf

Hardcore Functional JS

Now that we have a key pressed stream, Joe sets up a stream that will read the value from the input field. Once he has the value, he can tie that in with the YouTube API.

Get Unlimited Access Now

Audience 1: So we've got a key press stream, we can make a new stream that's based off of it. So I just want to point out that bottom line's a little gnarly because you have an IO kicked off. And then it returns an event stream which we're going to subscribe to, right?

But that's okay, because what that does, everything above that line that starts our app, that actually runs our app, is going to pretty much return that type. And it's going to be pure and easy to work with and lots of fun. But that kickoff line's a little crazy because it's like, hey, here's all the stuff we're honest about that's going to happen in our site, or in our app.

And now you have to deal with it, and open it up and run it, and make sure that this all comes out. But the benefits of working in your app, like that peer part, it's awesome.
Joe Nelson: Yeah between pure and impure it's really nice, we're writing a lot of checks so we got to cash in on anything here really fully pull it out.

So let's make another stream, which is the value stream, I guess. Value stream will go from, I guess down again, to the event stream of strain. And that would be var valueStream = it's going to be based off a key press string, but we're going to map it to it, I guess would be my feeling, and extract some things from the target.

Audience 1: Yeah, definitely want to get the target and the values, I know that.
Joe Nelson: Let's see, it was the value, and then you had to get the target first.
Joe Nelson: And that was off of key press stream.
Audience 1: We're already giving it that key press stream? I see what you're saying.

You're going to use that then, I see.
Joe Nelson: I was going to make a new stream, and then just replace in our final line.
Audience 1: Got it. I just like the sound of my voice.
Joe Nelson: That's fine. Well, your voice is probably right here. Cannot get property value of undefined.

We could put a log in here. See what kind of steps come through.
Audience 1: Value stream.
Joe Nelson: Or is it events target?
Audience 1: Yeah.
Joe Nelson: I don't think it. Yeah put a log, let's see what happens. It looks like it's
Audience 1: We're not doing anything. There's just a syntax error or something.

Let's see. We get the event, which returns us an io, we call back the value stream. So key press stream is going to get our search.
Audience 2: We're letting the map the other way. They're just Ws. That's right.
Audience 1: So you gotta map map, which-
Joe Nelson: Actually compose I can map the composition, couldn't I?

Audience 1: Yeah, let's stick with map map now, though. See, it's kind of a cool demonstration to be like, laws.
Joe Nelson: Okay, fine. Let's see if, before I even get laws, if we don't break the law.
Audience 1: Breaking the law.
Joe Nelson: Breaking the law. So, it's a whole new string that's all clear.

You just change it out. Okay, now let's use the logs.
Audience 1: So, we don't need to map map. Because it's always going to work like that. I would alias that to a function. It's kind of weird to have it compose stuff in there. Maybe not, I don't know. You need an extra parameter.

Joe Nelson: Do I? See what this maps to.
Audience 1: You got your open map, open compose.
Joe Nelson: Yeah, totally, I see. Map compose and then up here for map.
Audience 1: Yeah, usually I would just pull that out. You know, like a little helper that says like target value or something?

But I think it's totally legit to be in line.
Joe Nelson: Okay, cool, so we're able to get values. Now we should, for each value we get, kick off a search. This is quite a junk. What should happen first? You know what we should do? We should, for each one we get, build up the URL that we're going need to.

So we can have a URL stream. So the things that like not for each thing I type it's going to correspond to something or some api call I would make. So you can say like a URL stream, and once again it's it seems like I guess we're just carrying through the event stream.

I'll say URL even though it's just a string, just to remind me.
Joe Nelson: Okay, alright I gave myself a note because I didn't remember exactly what YouTube takes so-
Audience 1: Mims is complaining that this is hard to read. I would suggest moving the inner composition into an actual composition, so it actually reads better.

Joe Nelson: So take this compose(map map out of here?
Audience 1: Yeah, the inner compose. Like I would just compose map, just let compose just let value get target, would be a function of like-
Joe Nelson: We could call it, yeah the function could go from dom event Yeah value. To value.

We should call it, like, event value or something?
Audience 1: Sure.
Joe Nelson: Strings, I guess they're going to be strings.
Joe Nelson: Wait, actually.
Joe Nelson: I'll leave that, because we'll map that thing.
Audience 1: I think usually rule of thumb is you want to call map at the caller. You don't want to force some weird type into the function.

Joe Nelson: Yeah, totally. I mean the whole point of part one was like, you make fewer things like that they take a journey somewhere so.
Audience 1: Into the map or the journey to the factor. Is anybody like totally lost right now? Or are you guys kind of following? Semi? All right!

We did our job!
Audience 2: We're following but we're dropping bread crumbs.
Joe Nelson: Alright.
Audience 1: Okay.
Joe Nelson: And the repository will be there. We're just in the there even though I'm not doing it commit by commit. That does, you can look at the diffs between them.
Audience 1: Yeah we have a different-looking project on the, we just kind of made things earlier just to make sure it works.

Joe Nelson: Okay, for a URL stream, alright. Okay. And so we need to see what is it that these search URLs look like. They look like that.
Audience 1: Yeah.
Joe Nelson: Cool. This one. I don't know if it matters to be point phrased, just kind of a string thing, and a j query thing, and so I can say.

Audience 1: Can we all get crazy with monoides, but I don't want to.
Joe Nelson: Yeah. We could say search for term.
Joe Nelson: Or term URL. And that takes a term, which is a string, and gives it over to URL.
Joe Nelson: So I was promising to get rid of names and there are plenty of names in here.

But at least they're not, maybe they are of a different sort, but they're not like a very lowest level.
Audience 1: We're are gluing together primitives to make our application-specific DSL that we're just kind of putting together down at the bottom.
Joe Nelson: Yeah.
Joe Nelson: So return this if you look it's like q= that.

And there's this extra alt=json, so there's like a little helper we can use for that, which plus. You give it a map of like q goes to term and alt goes to json. And it makes a query string out of it.
Joe Nelson: What is?
Multiple: What is
Joe Nelson: Yeah, I don't know what that word was.

Okay, cool, so now we got term URL. Now our urlStream is going to map over the original, but just turn it into that I suppose. So I compose. Are we inside of Monad? We're going to have to map again.
Audience 1: We're going to get it down, we're good.

Joe Nelson: Okay, I'm going to be mapping over the value stream. So now I have to begin now like it's a new stream.
Audience 1: Yeah, so you're going to map, wait,
Joe Nelson: Term urlvalueStream, and then do a URL stream.
Joe Nelson: Cool

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now