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

Joe first sets up an event stream that will connect to the DOM element and listen for an event when a key is pressed.

Get Unlimited Access Now

Joe Nelson: I think we should probably start. There's all kinds of things we could do, like doing the API calls and stuff. But it might be easiest to start by making it so when I type it into this box, we can just log it. And we can see it on the console.

See that something's happening. So, what's cool about this pairing bit is that I don't always have all these things at the tip of my tongue, like exactly what these events stream is called bacon dot from event stream or something. So, I'll be discussing it and you and Brian are going to be like, yeah, try this and so we're going to learn the thought process.

So I'm trying to think, we could start with pure and impure things. A pure thing would be just attaching an event stream to something, you're not really running it yet it's just there if you ever wanted it, so it's still pure. So say like val maybe.
Student 1: We going to get a hold of that text field though, and that's going to be-

Student 1: Yeah. We should first grab the search I think.
Joe Nelson: Okay. So we can say get DOM or something. And what I like to do for my own sanity in a language of strong typing, it will dot your eyes and cross your tees. You're just trying to do something that makes no sense.

But I had comments for myself in JavaScript because I was really confused. So I'll say getDom, what does it do? It's going to take a selector, I guess it's just a string, and it's going to to go to an IO of a DOM like element. And this is all just kind of like pseudo code.

Student 1: Really helpful documentation, thoiugh.
Joe Nelson: Yeah. So here's a function.
Joe Nelson: Actually I wonder if we need that? If we could just take, because I've included jQuery, so I can be like to IO on the jQuery things. I can be dollar dot to IO.
Student 1: Nice.
Joe Nelson: That's an IO.

Student 1: Done.
Joe Nelson: Done, done and done. Cool, now we can get things IOs. So we want another thing it's going to attach an event stream. So there's going to be different kinds of streams we can get. We could maybe call it a click stream. And you give the click stream, what it is that you're going to get the clicks from.

So it's going to be kind of similar. We want to get like the search text. I think right now.
Student 1: Are we going to start the-
Joe Nelson: I'm thinking I just the events like something happened some DOM thing, I said click but I meant typing in the press.
Student 1: I see.

Joe Nelson: The press. Yeah. That's what four hours of asleep will do to you. So let's get a key press. Var key press stream. Cool and that's also, let's put our docs first, I like to think of it that way.
Student 3: What is this documentation thing you keep talking about?

Student 2: It was hard to write, it should be hard to read.
Joe Nelson: Okay, so key press stream. That's going to take, once again, just a string of selector and it's going to go to an event stream. I guess I'll call it DomEvent. Like I said, that's kind of imaginary, but it's enough to suggest to me.

Wait actually. It's probably going to be an IO. Now let's do it this way. This doesn't take a stream, it takes an already gotten IO thing, because if I was like, find the DOM thing here. I'd have to be inside IO too and I don't like to be inside all those things I can help it.

So this will be a DOM, piece of DOM. Okay DOM, or element maybe.
Joe Nelson: Okay now, wait, the way Bacon's event stream works, the order of its arguments, like the order of everything in this world, are kind of awkward for carrying. So we can make our own wrapper for it.

I could call it listen. And what would be a good way? We know the type, so the thing that we always think we're trying to, when we want to make the order for querying we want the things that we know to come first in the things that we don't know to come next.

So, I say what do I know? I know that the event type that I want. What I don't know is the the DOM, the element that we're going to apply it to. Okay, so, that will be probably, let's see, bacon dot event stream from or something.
Student 1: Bacon dot from event target.

Joe Nelson: And it's going to be the elements and the type. Now I gotta return it.
Joe Nelson: Probably semi-colon, okay.
Student 1: There's a useful utility called flip that works.
Joe Nelson: Do we have it?
Student 1: For this exact thing.
Joe Nelson: Do we have it?
Student 1: No, we want to wrap this in query as well?

Joe Nelson: Is flip query? So I could do flip of-
Student 1: I don't think flip query's the function, no. So you probably want to just leave it and query it.
Joe Nelson: I could query flip.
Student 1: I don't think we should be messing with flip right now. I just think it's a cool thing to know.

Joe Nelson: Okay. So now we can listen to things. Now our key press stream, this isn't bad.
Student 2: Didn't you say you wanted to do flip?
Student 1: Yeah, you just got flip up there.
Student 1: I think we should query it, though.
Joe Nelson: You're totally right. I'm so used to things being auto queried, it's just like, hey.

Student 1: Usually the rule of thumb for me is, if I ever have more than one argument, I just query it, why not?
Joe Nelson: This guy actually probably doesn't even, you don't have to bind the glue variables here. It's probably just a lesson of click at this point.
Joe Nelson: Yeah, why am I thinking about the clicks in the licks?

We need to think of the key, which is the best? Key down will be weird things like controls and shifts so probably a key up. And our key press, I don't know, let's try key up. Okay cool, now you've got a stream. So in our impure stuff, let's do something.

Let's see we want to find the element and kind of compose it in here and make it log, I wish we had a handy log, cool. The commit I started with has all this good stuff, compose map log for, okay, so let's think through it.
Student 1: Said HTML's not 2IOed but that's fine.

Joe Nelson: Okay, so it's going to be a compose. The final thing will be a log, but it'll probably like a map of log if we're going to be inside of stuff. And we're going to be doing, right, we're going to get the, wait a second. Is map going to work with event stream just like anything will?

I don't have to be on event or anything it's just map. Like, any functor?
Student 1: You want to run IO because- Well let's go ahead and get the DOM and then figure out what we're dealing with.
Joe Nelson: Okay.
Student 1: because that'll be an IO. And then, yeah if you log that, it'll just be the search.

If you map log that'll be an IO of whatever log return.
Joe Nelson: I wanted to get a key press stream.
Student 1: Okay.
Joe Nelson: Of that stuff. So we find it, we get the stream, and now what I'm wondering is if the map is going to get recalled on the events in the stream, because it's a functor like any other functor.

Student 1: Well I think first things first, is we need to map key press stream over get DOM. because get DOM's an IO.
Joe Nelson: Yeah, yeah you're right. Gotta get inside.
Student 1: And now we have an IO of an event stream DOM event.
Joe Nelson: No.
Student 1: So now we have to map map log.

Actually I'm sorry. We don't have to map, yeah yeah. Map map log.
Joe Nelson: I don't remember if we were able to move that in our final thing, or if we had the nasty map maps hanging out.
Student 1: Well at this point we were impure, and so the composed is kind of silly.

because we have our data at this point. We have our search, right? So, why are we going through all the trouble of trying to point free, when we have our points. So, I think we just run stuff. So, I would just get DOM dot map, key press stream.

Joe Nelson: Dot map
Student 1: Okay, so-
Joe Nelson: That strain. Another one.
Student 1: Then we'll run IO. So that give us, that'll actually get the search thing and then give us a key press stream. So, after runIO, just do .onValue.
Joe Nelson: That's what I was wondering. Whether I could have done theoretically, have done map here or will only on value work because the way the library's written?

Student 1: No map will just keep returning pure streams until you call on value. Nothing will ever happen until.
Joe Nelson: Let's see what
Student 1: You know what? We gotta do that extend function here. Remember we hit that last time we tried this? We built this before, you guys, secretly.

Joe Nelson: Yeah we can jump to the It's all going to be fine.
Student 1: But at the very extend the, IO extend function, bring an IO extender.
Joe Nelson: Yeah, yeah. Yeah, yeah, yeah. We want IO, we're going to have to ask for it.
Student 1: Yeah. We extend functions to call to IO at the end, because it's a pain in the butt with arguments otherwise.

Joe Nelson: Not fun. Now at least fun, just punching. Okay.
Student 1: That should do it.
Joe Nelson: Nice, okay, now let's go to the console. So, now you get events coming through. So, I like to think of it as, you get a stream of one kind, you could intercept it before anything happened, just purely, before anything has happened.

And make a derivative stream of another kind. So it's like, cool, we got this. What if our stream was now the actual key that was pressed by grabbing that out of there. So lets see, how do we find that? I select the event.something or other?
Student 1: KeyCode.
Joe Nelson: Is it event.keyCode?

Student 1: It's right there.
Joe Nelson: Or just keyCode? No, I want the actual deal if possible.
Student 1: I think we should get the target value, because we want the whole search value of the search box.
Joe Nelson: Yeah, that's true.
Student 1: Do stream of whatever's in the search at the time event happened.

So targeted.
Joe Nelson: There's a lot and then okay Nice. So we can get that.

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