3.4 Writing a Functional Web App

I know I said this at the beginning of the previous lesson, but we really are off to a very good start. We can easily create content using code that's easy to read and follow and that is a huge, huge thing. So now we just need to start focusing on the application itself, and making sure that all of the nuts and bolts are in place, so that whenever we finally add in that click event listener, the things are just going to, well, click in the place. But first I want to organize our code a little bit because we have quite a few functions and these are more helper functions than anything else. Of course, they are being used by the application, but I want to break those out into a separate file, so that we have all of our helper functions which really, they're not really helper functions, it's more DOM stuff, but we'll just call it helper stuff. And then we will have our main application code inside of list.js. Then of course, we do need to reference helpers inside of our HTML file. But once that's done, let's make sure everything works, looks like it does. All right, so we need some way of starting our application. So let's have a function called app, and we will call app to start the whole thing. Now in order for our application to work, we need some data to work with. So we need some initial state. So really what we could do is pass in an array that will, for right now contain a couple of items so that we can actually see what it's going to look like in the browser, and then we can add in all of the event stuff. So this is the first message, then we'll have a second message. So that's going to be our initial state. And then we also need the output. Where do we want this stuff to go? And I guess we could just get the element object itself. Because we have append and all of those functions available for us. So we could just provide the element of where to put our messages and then let the application do all of that work. So let's write a helper function called getElem. And we need the ID and this is simply going to return getElementById. But it will give us a much shorter way of doing that. So we will call getElem, we will pass in, not that, but was it message-list? I guess we'll look at the HTML and see, yes, message-list. So of course we need to add those parameters here. So we will have our state and then we will have our output. So our state is nothing more than an array, and we want to take that array and we want to create these div elements for each of those messages. So since we have an array, we can use the map method, and then we can simply work with each content and each index, and we wants to create a message passing in the content and the index. The reason why I'm going to use the index because this would give us a perfect thing to use for this attribute. So let's change the attribute name to index, then we will use index as the value. So that's the idea, but we also want to build these messages and just make it easy to provide that to the output. So what we could do is essentially return append. We can prime up some calls to append, we could pass in the message, and yeah, that should work. So let's do this. We will have const, we'll call this appendFunctions, and then we will use pipe in this case. The reason why we're going to use pipe is because remember that pipe reads from left to right, as opposed to compose which is right to left. Well, our data is coming in as left to right. So it makes sense to use pipe in this case. So we're going to use pipe. We will spread out the append functions, and of course we need to supply the output for those append functions. That should work. So there we go. That worked, it's time to buy a lottery ticket because that worked the first time, and that's wonderful. But let's do this, Llet's add some more padding. Let's also change the background color. I'm drawing a blank as to what is available. Let's see what primary looks like. No, I guess let's go with warning, that's gonna look ugly, but we can at least see it. Okay, so that's working, that's great. However, you know what, let's look at our elements. And here's our message list and we are appending each div element one at a time, because that is essentially what we've done. We have iterated over our state and we are appending each one of these div elements individually. It doesn't look like it, but that's essentially what's happening. So if we wants to be more efficient, what we need to do is before we append anything to the document, we need to append these individual div elements to a container div so that we just append once and that's it. So let's create a function that we'll just call view, and this is gonna work with the state. We don't need the output here. We are going to be doing a lot of what we've done here because we still want to build these append functions, we still want to pipe everything. But instead of going to output, what we will do is create a new div element. That will be our container, we can return there. So that then, all we really need to do is call append. We will call view, passing in state, and then output. So let's take a look at what that looks like. We have the same result, at least visually in the browser. But if we look at the markup, we have our message list, followed by our div element that is our container, and then our individual messages. So that's great. Now that we know that that works, let's get rid of our messages here. And let's go back. Let's look at the console. We do get an error, pipe requires at least one argument. Okay, so here's what we could do. We could create our element and then we can check to see if we have anything as far as state is concerned. And if so, then we will go through this whole stuff, if not, then we will just return our element that we created. So let's first of all change this. Let's use an arrow function here, because I think that that might be a little bit easier to read, because there's no curly braces, there's no return statement, there's less parentheses, and we'll try to do this all in line. It might look ugly, but we'll just have to see. So we're not gonna have this append functions variable, instead we're just gonna in line that and that looks halfway decent, okay? That will be fine. So now what we'll do is we will return, we will check the state's length, if it's greater than zero then we will go through all of this stuff. But if it's not, then we will just simply return the element. That way we only call pipe if we have data to work with. That error goes away, and we're good to go. So in the next lesson, we can start focusing on our events, really we just need one, we need the click event. But we also need to grab the information from the input element so that we can add that to the state.