3.2 Using Composition

In the previous lesson, we talked about our functional approach for creating DOM objects. And we talked about the idea of composition. And there are two types. There's the compose, which reads from right to left, which looks weird. Then there's the pipe which reads from left to right. Now of course compose and pipe don't exist in JavaScript. It would be nice if they did, but they don't. So we have to write them ourselves, or we could rely upon a third party to give us that capability. And that's what we're going to do so that we don't get off into the weeds of implementing these things. I just want to use these things. Now there are many libraries that give us functional utilities. But Ramda is one that is built specifically for functional programming. There is Lodash, which is also very popular. And there is a functional library for Lodash, but it was kind of tacked on at the end of things. That doesn't necessarily mean that it's bad. It's not, people use it all the time. But Ramda was designed for functional programming. So yeah, we'll use it. And there's a lot of functions that we can use to make our lives a whole lot easier. They implement a lot. And all you have to do is just do a search form. So if you wanted to look at the pipe documentation, it's right there. If you wanted to look at compose, it's right there as well. So this is what we are going to do. And I'm going to pull this in via a CDN. And we'll just copy that and paste it into our HTML file. And I'm gonna put it right above where the list.js definition is. So there we go. We have Ramda and in order to use these functions, all we need to do is use the R object. And then we call these as methods. So we would have compose or a pipe as well. So let's first of all write a function that we can use to create any HTML element. And for this I'm going to use the new lambda syntax or arrow functions because this is a very simple function and we can write it all on one line. Let's call this elem because it's short and sweet. It's also kind of clear as to what this is going to do. We'll have our tag name and then we will simply just return the result of calling createElement passing in the tag. And there we go. So we should be able to just create our elements calling the elem function passing in div for a div element. And then later on we can append that to the body to make sure that that actually worked. So let's go ahead and have that set up. Let's also get rid of all of this code that does not work so that we don't run into any issues there. Okay, so we want to build this div element. And we're going to use the compose method here. So we will call compose. Now, compose is going to return a function. And we want to pass whatever it is that we want to work with. So in this particular case that's going to be our div element. So is going to take this div element and it's going to pass it all of the functions that we specify whenever we call compose. And whenever it's done, it's going to return whatever the final function returns, which will be our div element because we will make sure that all of our little builder functions will return an element. So we want to pass function objects to compose. So that means we would have a function called addClass. And this will need to return another function. In fact, we looked at something like this, didn't we? Let's go and look at our scratch. If we look at first class maybe, yes. Whenever we created this greet function, it was kind of a two step process. Greet was just a generic function something to set up or partially apply. So that if we wanted to create a specialized function for saying howdy. We called greet, we passed in howdy that gave us a function that we could then use to say howdy all the time. We could do the same thing for hello. So we can use this same concept to create these types of functions, so that addClass will actually accept the class name. And this will return a function that accepts the element. And then element will be used to set the classList. We'll call add, pass in className, and then we will return the element. So like that, we're actually going to take a different approach here, but I want to make this work. So we're going to call addClass. We're going to add the bg-light class just so that we could see something other than the white background. Let's also add some padding as well. And let's do p-2, that might be too small, but we will see. So if everything is written okay, this should work. If we look at elements. And here yes, we have a div elements with a class of p-2 and bg-light. Now, notice though the order in which these classes appear, p-2 is first, bg-light is last. That is different than how we typed it, but remember that we are composing here. This goes in reverse order. It reads from right to left. So it's calling this addClass with the class of p-2 first then it's taking the result of that function passing it to the next addClass, which is then bg-light. So this is working, this is great. But this is rather tedious because we also need a function for appending children. And I don't know about you. I don't wanna have to keep writing a function that's going to return a function. Instead I just wanna write a function that has the node and has the element so that we can just straight up and use those objects. So that we would append child, we pass a node, and then return element. And we can actually do that that uses a concept called currying. And we will look at that in the next lesson.