Hardcore Functional Programming in JavaScript Demo Part 1

Transcript from the "Demo Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:00]
>> 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. [LAUGH] And we can see it on the console.

[00:00:15] 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 gonna be like, yeah, try this and so we're going to learn the thought process.

[00:00:35] 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 gonna get a hold of that text field though, and that's gonna be-

[00:00:54]
>> Joe Nelson: [INAUDIBLE]
>> 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.

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

[00:01:27]
>> 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, cuz 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. [LAUGH]
>> Joe Nelson: That's an IO.

[00:01:47]
>> Student 1: [LAUGH] 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 gonna 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.

[00:02:07] So it's going to be kind of similar. We wanna get like the search text. I think right now.
>> Student 1: Are we gonna 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.

[00:02:24]
>> 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?

[00:02:47]
>> Multiple: [LAUGH]
>> Student 2: It was hard to write, it should be hard to read. [LAUGH]
>> Joe Nelson: Okay, so key press stream. That's gonna take, once again, just a string of selector and it's gonna 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.

[00:03:08] Wait actually. It's probably gonna 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.

[00:03:24] 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.

[00:03:46] 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 wanna 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.

[00:04:03] 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.

[00:04:28]
>> Joe Nelson: And it's gonna 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 wanna wrap this in query as well?

[00:04:45]
>> 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 wanna 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.

[00:04:59]
>> 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.
>> [INAUDIBLE]
>> 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.

[00:05:24]
>> 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.
>> [INAUDIBLE]

[00:05:42]
>> 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.

[00:05:58] So in our impure stuff, let's do something. Let's see we wanna 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.

[00:06:19]
>> Student 1: Said HTML's not 2IOed but that's fine.
>> Joe Nelson: Okay, so it's gonna be a compose. The final thing will be a log, but it'll probably like a map of log if we're gonna be inside of stuff. And we're gonna be doing, right, we're gonna get the, wait a second.

[00:06:41] Is map gonna 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 wanna run IO because- Well let's go ahead and get the DOM and then figure out what we're dealing with.
>> Joe Nelson: Okay.

[00:07:05]
>> Student 1: Cuz 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 gonna get recalled on the events in the stream, because it's a functor like any other functor.

[00:07:33]
>> Student 1: Well I think first things first, is we need to map key press stream over get DOM. Cuz 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: [INAUDIBLE] So now we have to map map log.

[00:07:52] 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.

[00:08:08] Cuz 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.

[00:08:30]
>> 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?

[00:08:58]
>> Student 1: No map will just keep returning pure streams until you call on value. Nothing will ever happen until [INAUDIBLE].
>> Joe Nelson: Let's see what [INAUDIBLE]
>> 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.

[00:09:18]
>> Joe Nelson: Yeah we can jump to the [INAUDIBLE] It's all gonna be fine.
>> Student 1: [CROSSTALK] But at the very [INAUDIBLE] extend the, IO extend function, bring an IO extender.
>> Joe Nelson: Yeah, yeah. Yeah, yeah, yeah. We want IO, we're gonna 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.

[00:09:38]
>> Joe Nelson: Not fun. Now at least [INAUDIBLE] 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.

[00:10:01] 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?

[00:10:20]
>> 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: [CROSSTALK] Yeah, that's true.
>> Student 1: Do stream of whatever's in the search at the time event happened.

[00:10:37] So [INAUDIBLE] targeted.
>> Joe Nelson: There's a lot and then okay [CROSSTALK] Nice. So we can get that.