Hardcore Functional Programming in JavaScript Project Setup

Transcript from the "Project Setup" Lesson

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

[00:00:04]
>> Joe Nelson: Okay everybody, Internet, people here. We heard all about the laws. We heard all about the categories. It's gonna be a different style now. We're doing the demo. First thing, just a couple of slides, and we'll get into it. First thing, congratulations. In a way, you're pioneers, because although these techniques are well-known in other languages, especially Haskell, bringing them into JavaScript is a new thing.

[00:00:33] And that's why you saw all the imports in the JSBins and things, because we're cobbling together at the ecosystem of what we need, and things were only getting better. So if we use this stuff for real, our input is gonna go to make those libraries better. Use these things, send them for requests, send them issues, because only like shaking the rocks that you polish, and it's got to be good.

[00:00:56] And so what we're using in particular, I just wanted to mention so that if you do like boiling it down, so if you wanna try your own stuff, you can pull these in. Of course, ramda. baconjs is doing the stream stuff. It's gonna handle making the streams when you click and type in stuff.

[00:01:14] fantasyland is a spec. It just says that, yeah, when you're making functors, etc., etc. You could use certain nicknames and stuff, but you should be using these names so that it all works. In particular, we're pulling the IO functor out of fantasy IO, there's an implementation. Our own Dr Boolean here made it something that wraps up some of the fantasyland stuff so it's easy to do pointfree-like composition on.

[00:01:40] And we're using some stuff from folktale, a lot of these things. If you look at folktale versus ramda versus whatever like this large overlapping, they're all trying to do the same thing. But I think that in my opinion, at least from what I've seen, ramda is the best for most of it, and the others are good for throwing in some stuff around and doesn't really have yet, like some of these funky type stuff.

[00:02:04]
>> Speaker 2: You might even say the bottom three are about the part two of class in the top.
>> Joe Nelson: Yeah.
>> Speaker 2: You've got the function level and then you've got the functor object level and stuff.
>> Joe Nelson: Yeah, that makes sense. I guess it's part two thing aligned that way.

[00:02:19] Another thing, which I didn't put, this is the last slide. But we're gonna go through an example that I've put on my GitHub, which is at begriffs/immutube. So github.com/begriffs/immutube. So the great thing about this is that I've already run through it, and I have commits at each point.

[00:02:42] [CROSSTALK]
>> Speaker 3: Can you go back to that? [CROSSTALK]
>> Joe Nelson: This chat. Okay, so let's do it. When you look at immutube, actually, master is some earlier stuff, and the branch that I'm on is live code. And I'm eventually gonna merge it into master when we think it's all cool.

[00:03:10] So what I think I should probably do in live code is I'll have one tab open with some of these commits. If we have to get rid of them, if we get stumped, we could just be like yep, next one, we'll be fine. So I'll leave that open as a tab.

[00:03:26]
>> Joe Nelson: And I'll check out blank slate.
>> Joe Nelson: Okay, we're at the blank slate, and we'll just work from here. Let's see if I have some vims and crap going. I should probably close some of that, okay. So there's some stuff. There's actually some crud in here you don't have to look at from previous experiments.

[00:03:53] This was originally gonna be a very different app, and we decided on something a little more self-contained. So index is gonna load some stuff cool where the real action happens. Well, this also isn't made. No, this isn't the main loads of stuff we need like with power and crap.

[00:04:09] So we pull all the libraries together and eventually runs our app, and our app is just inside our app JS. So this is where the good stuff happens. I'll start up the thing and show you what the interface looks like, and we'll discuss what we want this thing to do.

[00:04:24] So go back to my terminal. Let's see. It's already running. There's a lot of tabs going on, okay.
>> Joe Nelson: Okay, just to make sure we're all reset. So I go to a localhost:8000, and there's a lonely input box. And I type into it and nothing happens. Yeah, we need the sad trombone.

[00:05:01] Here we have it. Let's look at what the page is made out of, cuz this is the stuff we're gonna be attaching to. We have our input, it's called search. We have a UL with nothing in it, results, and then another spot that's just hanging out waiting called player.

[00:05:14] So the end goal of this example is you type in the box. And as you're live typing, it's bringing up YouTube search results of videos that match your stuff. And when you click one of the results, it brings up a YouTube player on the right.
>> Speaker 4: Daniel B is asking if there's a server side to the downloader, or if it's all just front end stuff.

[00:05:32]
>> Joe Nelson: It's all just front end. The reason I started a server was just so that when I made crossed, I made a requests, I wasn't at file calling colon versus HTTP caller colon, Chrome freaks out security wise about that. So I'm just running index HTML through like.
>> Speaker 4: PHP to, it doesn't matter what server is running, it's just.

[00:05:53]
>> Joe Nelson: Yeah. Just something that serves it. And the readme of the project it says, how to clone it down, how to install the dependencies, and how to run this little server, so you can be up and running the same way.