3.1 Introducing Composition

Our project is going to be relatively simple, especially if we were just taking a normal JavaScript approach. And it would be dead simple if we were using a UI library. But since we are taking a functional approach, it's going to require us to rethink. Because functional programming is a completely different paradigm than what we are used to which is object oriented today and the dom is nothing object oriented. So when it comes to working with the dom we really have to think about how we want to do that using functions, because it's just not something that we are used to. So our project is simple, we will enter a message into the textbox click on the Add message button, and then it will display a list of those message. I mean, it's nothing really difficult but since we are using functional programming, then we just need to think about these things. And I also want to point out that I've taken the liberty of doing some cleaning and some setup. So all of the JavaScript files that we've created this far I put inside of a folder called scratch inside of a j s folder, just to still have those there, but they're kind of out of the way. I've gone ahead and added the markup, which isn't spectacular. I mean, there's three elements we need to be aware of the message text, the message button, and then the message list. And that's it. I also created the list.js file that's going to contain the majority of our JavaScript. And of course, all of this is already available in the code download. Just look for a folder that says project start, and this exact setup is there. Now, I should also point out that if we did want to use a UI library, React and Svelte are very good for functional programing, and I thought about taking that approach, but it just makes it way too easy. So, this way we get to some practice and we get to learn some concepts simply because we are working with the raw Dom. Now Vue js is a wonderful library, but it isn't quite there as far as the features, or I should say the functional features that are already present in React and Svelte but it's getting there. Now there are two things that we need to tackle here. First of all is handling the click event on our button. The second is generating content. And our message list is going to be a div element that contains multiple div elements that will have the message in them. So let's start with that, let's generate some content first. Because if we can't generate content well, then we don't need to be doing this at all. And so let's first of all think about how we might approach this with objects. So we of course have the built in Dom API which we will definitely have to use to create our elements and all of that stuff. But I like to have a wrapper API, something that makes it a whole lot easier to create and work with the objects tat I need to. So if I were taking an object oriented approach, I would have something like this I would have a constructor function called lm, thent I can pass in the type of element that I wanted to create. And this would be a wrapper object it would wrap around the Dom object. And I would have methods that I would use that would manipulate that Dom object. So if I wanted to add a class, all I would have to do is call a method called add class, and then pass in the CSS class that I would want. But then I would want this add class method to return this lm object that I'm working with, because then I could chain multiple method calls, making my code a lot easier to read. So in this case I would add in another class. And then if I wanted to append some content, I might have an append method. And then I would pass in another wrapper object that would wrap around some other kind of DOM node like a text node. I would specify the content to display and that would build my element. And really, there's nothing new here. We've been doing this for a very long time. Now in functional programming, we don't really work with methods or anything like that we work with functions, but we have the logical equivalent in what's called composition. We can compose functions to work with the same data so that one function is called after another function that's called after another function so that it ultimately looks like this. We would start with our add class. And of course, we would pass in the class name and then the elem object. This ad class would return an Elem object so that we could use that to pass to another call to add class. And since this returns an Elem objects, we could use that to pass to our append function. So that it would look something like this. And yes, this looks horrible. I mean, I don't know about you, but my eyes start to glaze over, there's a lot of commas, there's a lot of parentheses. And trying to figure out how all this works is, well it can be a little challenging. So instead in functional programming when we want to compose a lot of functions together we would use a function called compose. And the purpose of this function is to create another function that we would pass our elem objects to. And behind the scenes the compose function will take this Elem object. It will pass it to the Add class function for the CSS class. It will then pass it to the next add class function, and then it would pass it to append. So it wouldn't necessarily look exactly like this, but this is the general idea. Now as far as reading this is concerned, it looks like it's being done in reverse order. So a composition actually reads from right to left. We start with the element, we pass it to add class, we pass it to add class again, and then we pass it to a pin. But there's another type of composition called pipe. And it's essentially the same thing, but it's in a more logical approach if you ask me at least when it comes to reading is concerned. So once again, we would have our elem object, but then it will be passed like this. We'd start with the addClass, followed by addClass, followed by append. And so in this project we are going to be using both of these compositions. We will use pipe in one place we will use compose and another just so that you can see how they are used. And so now that you know how we are going to approach that particular problem, we will implement it in the next lesson.