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

With the JSON data loaded, Joe creates and "entryToLI" function that will take the entry data and output HTML code. This code is placed on the page as the list of video.

Get Unlimited Access Now

Joe Nelson: So, we could do, the only thing they give in when we call these results or something, or just JSON. We can get the entries, but they call entries out of it. Let's just say get the entries. We really want that the URLs of each video, as we were going along.

So feed, entry. And for each of these, you're going to pull out ID, t.
Joe Nelson: Okay, well let's do it.
Speaker 2: One other thing, somebody said this makes him want to learn Haskell and I'm like, yeah. Everybody was yeah.
Joe Nelson: Yay.
Speaker 2: But you can't just go to work tomorrow and be like, let's use Haskell for our next project.

They'll be like, okay, well, we might as well just go bankrupt right now, because how many barriers is there to learning Haskell is there? But this is cool because you can mix this with your normal day to day stuff, and get really good and learn it. When we go to Haskell this is, we're writing basically Haskell code right there.

Joe Nelson: This is verbose Haskell.
Speaker 2: Yeah, verbose Haskell.
Joe Nelson: So I can't do dot. I have to say chain.the, it's long.
Speaker 2: All the same types, all the same laws, all the same constructs.
Joe Nelson: There's no dupe logs to just go down the monads real easily.
Speaker 2: Yeah.

Joe Nelson: Haskell's like the spirit of this, but written in this much space.
Joe Nelson: Okay. Get off my high horse and write some code. I'm going to do something that maps over. I guess we got to get the entries and plug some stuff out. What do you want to call this thing?

VideoURLs, and it takes the, or it just takes JSON. Then it goes to a bunch of URLs. We'll see if this is more than we can chew with this one.
Joe Nelson: Okay, so we want to get compose. Get in reverse order T. Over this one of them left a map again, because entry's an array, and an array is just a as we know.

I'm going to write it in reverse, because I'm thinking I'll just be using pipe. So in reverse, you have to get your good feed. And when we have feed, we're going to get entries. I think our entry here.
Speaker 2: Underscore.get.
Joe Nelson: Thanks.
Speaker 2: You're at manual JSON.
Joe Nelson: This is just great.

Speaker 3: Hey, hey, I'm warning.
Joe Nelson: Okay. We got that, and we're going to map over this because it's an array. And it's going to be another compose. It's kind of nasty.
Speaker 2: Yeah, it'll pull it out anyway, just to do it.
Joe Nelson: Yeah, okay-
Speaker 2: Just write a function there and just be like what are we having get the?

Joe Nelson: It's going to be called getURL? Get entry URL?
Speaker 2: I think we did this, before we did entryToLi right there. We could do URLs here and then In turn URLs. Yeah, let's do that way. No because before we hit that problem, the entry had all this data on it.

And we just wanted to use a normal function right there and get it all out. We don't want to like lose stuff. No we can do that with the URL.
Joe Nelson: I just want the URL, ultimately.
Speaker 2: But you want the title in the LI.
Joe Nelson: You're right about the title too.

Speaker 2: That's great. I appreciate it. Little secret knowledge, we've built this before as a test to make sure we weren't going to be embarrassed.
Joe Nelson: And we're still embarrassed.
Speaker 2: It's still embarrassing. Stupid YouTube baby. What kind of response is that? This is the most ridiculous response I've ever seen.

I want to know who's responsible for $t.
Joe Nelson: Okay. All right. So, we'll get it eventually, but this will be curated, just those things in it, the URL and the.
Speaker 2: What we did last time was we just turned it directly in a ratio, because it was really convenient to make a dom element with the title as the HTML, I mean.

Joe Nelson: So rather than take this thing, sanitize it so that it only has what we want, and then take that sanitized thing to make our HTML, we could just go straight from the whole thing to HTML format, the stuff that we need. Okay.
Speaker 2: Probably after we get these results, which is probably the last step before we should probably start wrapping it up, I think.

Unless we want to go for the player, but it's already five.
Joe Nelson: Okay.
Speaker 2: We could probably do it.
Joe Nelson: Or what we could do is finish this last thought. Jump to the last commit, start examining things along the way and see it in action, because you gotta see it happening.

Speaker 2: Yes, you've been building it up all this time.
Joe Nelson: Yeah, okay, so we want to do entryToLi, right?
Speaker 2: Yeah. Somebody is very unsatisfied.
Joe Nelson: Uh-oh.
Speaker 2: It's because I didn't get to I think.
Speaker 5: I never.
Speaker 5: But we'll talk about later.
Joe Nelson: Okay.
Joe Nelson: Great, for I think function will have an entry.

And an entry will be one of these things which are cool, which will have an idea, great, great, great, and a title. So let's make, sorry, what do you thinking? I probably have to write an actual function.
Speaker 2: Yeah, just write a function that just makes the jQuery element.

We did this before, and it was like, this is too much trouble. It took the entry-
Joe Nelson: I feel like I don't have free will. When I do a problem twice, I do it the same way.
Joe Nelson: The same hesitation.
Speaker 2: I don't know. It's a little different.

But we want to do the LI with the, we used the JQuery constructor, because we had problems, the data thing? I see, you're just going to do, okay.
Joe Nelson: Yeah, you know what I'm going to do? That's a much better idea. That's a very much better idea. We're going to make-
Joe Nelson: HTML.

Wait a second, so you make this right? And then we add stuff to it?
Speaker 2: Or you could just give it an object
Joe Nelson: Nice, that's so nice.
Speaker 2: You do text and data.
Joe Nelson: elt.id.ot?
Speaker 2: Yeah.
Joe Nelson: Yes. Okay. And also, and text goes to alt.title.T. Well, so much for our composable stuff.

Okay. Maybe we should, all right. So now it's right here, our video, the Lis. Wait.
Joe Nelson: What was this before the URLs? So we have, what's coming through right now? It's a stream of results of actual API result. We want to find the right spot enough through it, and then make HTML after that.

Speaker 2: They're worried about us making an Li here. Yeah. It's just easier, we don't have, we're not dealing with handlebars, we're not going to bring handlebars. For one Li, this whole project, or a data bindings or something.
Joe Nelson: Yeah, another question. I was bringing it up before, is this in pure?

Making this thing? But in a way, it's just kind of hanging out in memory, the way it knew whatever object it would be. It's not attached to anything. It doesn't change anything. It's just hanging out waiting to be applied.
Speaker 2: Yeah, it's still cool.
Joe Nelson: And it's not HTML anymore.

Speaker 2: I think you need strings around that first property. Type data id.
Joe Nelson: Because of dash. All right, I want to get to another visible thing. Brain is freezing.
Speaker 2: Why not just log the Lis instead of logging the Lis that come out? Why don't we just call some HTML with them, and we'll just to get a list of the YouTube?

Joe Nelson: Down here?
Speaker 2: The student log is the errors, so the other, the right side of where it's going to be a success function, which is just basically set HTML with our results to. I think the HTML is lower. It's capital H.
Joe Nelson: Can I have to run IO here?

Speaker 2: No, we didn't put that in IO. Mainly because it's the end of the line, there's no need to be pure at this point. So, I mean, you're going through all these types. Everything above our whole op is pure, and then we finally get our future back. Why would we put in an IO and just take it right back out?

That's silly, so we want to put it in IO. We certainly can. And then the next person can take up and extend it, but we don't plan on doing that at this point which are in here.
Joe Nelson: Okay. So, set in H, okay, so we need a new stream at this point, a stream of allies stay here.

Speaker 2: Getting the JSON from a search stream. And then. So we want to map over the search streams
Joe Nelson: Compose will be composing.
Speaker 2: You guys are champs. Thanks for
Joe Nelson: Indeed. Hardcore. Okay.
Speaker 2: So entry.li.
Joe Nelson: Yeah.
Speaker 2: And you're going to map over the search stream, or compose it with the search stream.

Joe Nelson: Yup.
Speaker 2: Switch our search stream to our LI stream, we'll go and see what happens.
Joe Nelson: I have high hopes.
Speaker 2: Yeah.
Joe Nelson: Wait. My god, really?
Speaker 2: What is it not? What is our element there?
Speaker 6: Text doesn't need to be in quotes?
Joe Nelson: No, it's saying just like I can't call $t undefined, so this ID, alt ID must be undefined.

Speaker 2: What's, what are we calling? Yes, it was this one, this is a funny situation. So, what's happening in search is returning a center of the future that we're mapping over, search stream. I'm sorry, it's returning as it is an event stream, and then it's going to return us a future.

And that future returns us an array. That's three functors deep. So we do map, map, map. Let's see what happens.
Joe Nelson: There's even more actually, because it's returning us the thing that has feed, entry, whatever. We haven't even pulled that out.
Speaker 2: We haven't, yeah.
Joe Nelson: It's deep in there.

Speaker 2: So, once you do map, let's do result to LI, and then we'll do that entryToLi, or resultToHTML.
Joe Nelson: Wait, result to-
Speaker 2: Switch the entryToLi, and just make it resultToHTML.
Joe Nelson: Entry, okay. So make this resultToHTML. We don't have a resultToHTML, do we?
Speaker 2: Yeah, we'll just make that.

We're just going to basically be, okay, we have a future here. We're going to map over the future and-
Joe Nelson: What I feel like doing is at this point going to this-
Speaker 2: Yeah.
Joe Nelson: And just showing the difs and commenting briefly on what happened in each dif.
Speaker 2: Yeah.

Joe Nelson: Because you can see the flavor, and the rest is just us debugging.
Speaker 2: Yeah, that's right. Get there.
Joe Nelson: I like that, so I'll do that.
Speaker 2: We get to see the pain of us trying to open up types, that's the same pain that's trying to compose callbacks and callbacks.

Joe Nelson: Yeah.
Speaker 2: Not really.
Joe Nelson: I'm having to debug, nothing's, normally gets tied to something, say that's wrong, you can't even do that, don't even try running it. But at this point.
Speaker 2: So, systems are going to stash.
Joe Nelson: Okay, so front blank slate to create search in that stream.

I'll log in, that's kind of one of the first things we did. Okay, we had to get IO stuff like we did before. We made our listen like we did before. Yeah. Okay. This is easy. We already did this stuff. That's in a different file, was a cool one.

Transform event stream of keyups to that of values, we did that too.
Speaker 2: Can you just zoom to the end and watch around and look at it for a second?
Joe Nelson: Fine, fine.
Joe Nelson: I'm fine and stuff.
Speaker 5: Yeah, we probably should walk through the final bold.
Speaker 2: Yeah.

Joe Nelson: Things work. Yeah.
Joe Nelson: File animal.
Speaker 2: Did we ever commit the last change we made?
Joe Nelson: I thought so. No.
Speaker 2: That's why.
Joe Nelson: Render video search results.
Speaker 5: A lot of zeros there.
Joe Nelson: This should be it. Let's debug it, and this will be our last bit.

Speaker 2: Okay.
Joe Nelson: Actually there's, I want to see what kind of we thought hadn't changed. So we got to get data, and a last. A lot. Okay, let's open it up.
Speaker 2: It's going to look different, because every time it's-
Joe Nelson: Slightly different words.
Speaker 2: Yeah.
Joe Nelson: Okay. Okay.

Speaker 2: Yeah, it is. All right. The only thing we did extra pretty much was that we changed fork to our, we just gave it its success callback down there, which probably would be better and take it to at the callback. There's a lot baked into the helper.
Joe Nelson: I want to try it on Canary.

I remember one time that-
Speaker 2: Yeah, that's right. It was the new one, it was all-
Joe Nelson: There was a security thing Chrome was trying to do to be helpful, and it wasn't. Or I guess it is helpful, but not to us.
Joe Nelson: Yeah.
Joe Nelson: Please play the animal video.

Please work. Man.
Joe Nelson: It's right here. It's just too small, it wrapped.
Speaker 2: Yeah.
Joe Nelson: And the final payoff.
Joe Nelson: This is what functional programming does to you.
Joe Nelson: Yeah, okay.
Speaker 2: Man.

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