Making Our Views DRY

[MUSIC] 0:00 There's often a lot of repetition in dynamic or even static websites. 0:04 A lots of the head tags contain the same stuff and the footers are the same too. 0:09 We're going to use a principle called DRY, or Don't Repeat Yourself. 0:14 There's no need to have this duplication in multiple files. 0:18 We'll split up our HTML into unique parts and 0:22 we'll add placeholders for dynamic information. 0:25 This will form the templates for our dynamic site. 0:28 Okay. So 0:32 we've got our design files here in the design folder. 0:32 We'll take a look at each one individually. 0:36 And then see what common patterns we can pull out. 0:38 And we'll extract them and put them into a views folder. 0:42 So let's just quickly create that folder now. 0:46 [BLANK_AUDIO] 0:48 And let's take a look at our error page. 0:53 And as you can see at the top here there's some CSS embedded, 0:57 then there's the body, and then there's the error. 1:01 Then there's this search form, and then body in HTML. 1:05 In the index, we've got the same header again 1:10 the image with the search, and this footer here. 1:17 And with the profile, we've got all the embedded CSS, as well. 1:23 And there's a new div called profile with information in it and the bottom. 1:30 So the commonality between all three is that they've got this same header 1:35 of html head. 1:40 All this stuff here, all the way up to the top of the body. 1:44 So, we'll extract all of that into a header.html. 1:49 So let's do New File. 1:56 Header.html. 1:59 And I just copied all that from the top of the other page and pasted it in. 2:04 Save. 2:09 Now let's create the footer. 2:11 So New File, footer.html. 2:14 And in this one we want just the body and the html. 2:22 And just ignore the red because that's just saying that we don't have an opening 2:34 and closing, we'll be dynamically generating this from these pages. 2:37 We're gonna put the header at the top and the footer at the bottom, 2:41 so when it gets sent to the client it will be valid html. 2:44 Now, let's look at some of the parts which are common in both places. 2:49 If we look at the error, we've got this image here, which is the search image. 2:54 And we've got this form here. 3:01 So, we could extract that out and call that search, 3:04 because we already have that here on the home page. 3:07 So, we can just copy all that, and 3:12 then create a new file called search.html. 3:16 [BLANK_AUDIO] 3:22 And make sure it's in the views folder. 3:26 And paste in the image. 3:30 So you can hover over the image to see what it is. 3:33 And you can see that, that's the form and it posts to the home route, which is cool. 3:36 And that's it. 3:42 Let's take a look at the error page again. 3:44 And we have this one error message here, this div, so 3:48 we could extract that into its own HTML file as well, so 3:51 let's call it error.html. 3:56 And we just paste that in. 4:04 And the only thing that we're missing now is the profile page, 4:07 so if we look at the top of the profile page, 4:10 we've got the header and then we've got the profile information. 4:14 So let's just go from that div, the profile div to the end of the profile div, 4:18 because the body and HTML are the footer. 4:23 And we can copy that. 4:26 Create a New File, profile.html. 4:28 Here's the n. 4:33 Save it. 4:37 And, I think that's it when we come to our views, we've kept our views dry and cool. 4:39 That's it. 4:46 What we need to do now is we need to generify or make generic the profile page. 4:47 Cuz at the moment its got an image of Waldo, we want a picture of the username, 4:54 so we can just swap out this with anything that we want. 4:59 We can put in maybe two squiggly brackets, so that when we search 5:04 through this later on in our code, we can just swap out with whatever we want. 5:10 So we can call this avatarUrl, 5:15 just like what we did in our router, if you remember. 5:17 In the home not the home route, 5:23 the user route we had avatarurl, username but it's in javacriptPoints. 5:26 So let's keep to that same standard that we did before. 5:30 So in here we can put username. 5:35 [BLANK_AUDIO] 5:37 In here we can put badges. 5:42 [BLANK_AUDIO] 5:44 In here we can do javascriptPoints. 5:49 [BLANK_AUDIO] 5:52 And the error. 6:00 It can be also a number of reasons why there's an error. 6:03 There could be a parsing error, there could be a not found, etc. 6:05 We can change this with to whatever we want. 6:09 So let's just do errorMessage. 6:12 Like that. 6:17 Cool. So what we've done is, 6:19 we've gone through all of our designs. 6:21 We've found the common parts. 6:23 We've extracted them, into their own separate, 6:26 distinct view files, which we're gonna read in later on. 6:29