1 00:00:02,370 --> 00:00:05,680 Now, EJS is really, really useful here 2 00:00:05,680 --> 00:00:09,150 since it allows us to generate dynamic content. 3 00:00:09,150 --> 00:00:10,860 And that is one of the main reasons 4 00:00:10,860 --> 00:00:13,223 for using server-side code, as you learned. 5 00:00:14,340 --> 00:00:16,110 Now, there is another kind of use 6 00:00:16,110 --> 00:00:19,090 we can get out of that templating engine. 7 00:00:19,090 --> 00:00:21,670 Even besides this dynamic content, 8 00:00:21,670 --> 00:00:25,640 we can use this templating engine that we have installed 9 00:00:25,640 --> 00:00:29,830 to make our life as a developer a bit easier. 10 00:00:29,830 --> 00:00:32,900 In all our HTML files, 11 00:00:32,900 --> 00:00:35,040 or now EJS files, 12 00:00:35,040 --> 00:00:39,200 we have that shared header and aside part here. 13 00:00:39,200 --> 00:00:43,270 It's the same in every file, and that was annoying before 14 00:00:43,270 --> 00:00:47,180 when we had to change all these links in all the files. 15 00:00:47,180 --> 00:00:50,440 You wanna avoid something like this as a developer 16 00:00:50,440 --> 00:00:53,240 because whenever you duplicate code 17 00:00:53,240 --> 00:00:55,920 across different functions or files, 18 00:00:55,920 --> 00:00:58,610 it means that any change to that code 19 00:00:58,610 --> 00:01:02,070 needs a lot of adjustments in a lot of places, 20 00:01:02,070 --> 00:01:05,019 as you saw here at the example of these links 21 00:01:05,019 --> 00:01:06,363 which we had to adjust. 22 00:01:07,200 --> 00:01:10,540 Now, EJS has a feature called includes 23 00:01:10,540 --> 00:01:13,750 that helps us deal with that problem. 24 00:01:13,750 --> 00:01:15,750 Now, what is an include? 25 00:01:15,750 --> 00:01:20,300 An include is basically another EJS file 26 00:01:20,300 --> 00:01:23,640 that contains a part of a page 27 00:01:23,640 --> 00:01:27,290 which you then potentially can use on multiple pages. 28 00:01:27,290 --> 00:01:31,920 And you can use includes to split your big HTML files 29 00:01:31,920 --> 00:01:35,143 into smaller, more manageable pieces. 30 00:01:36,350 --> 00:01:40,150 For this, I'll add a new subfolder in the views folder, 31 00:01:40,150 --> 00:01:43,363 and that is the includes folder here for me. 32 00:01:44,660 --> 00:01:46,370 Now, in this includes folder, 33 00:01:46,370 --> 00:01:50,490 we can, for example, add a header.ejs file. 34 00:01:50,490 --> 00:01:55,080 And my idea now is that I grab my header here 35 00:01:55,080 --> 00:01:58,403 from any of the other EJS files, 36 00:01:59,360 --> 00:02:01,763 and I cut this header, 37 00:02:02,900 --> 00:02:04,670 this header HTML code, 38 00:02:04,670 --> 00:02:06,673 and add it in header.ejs. 39 00:02:08,539 --> 00:02:11,820 Now, this is not a complete HTML page 40 00:02:11,820 --> 00:02:14,723 but only a part of an HTML page. 41 00:02:15,860 --> 00:02:17,520 And in about.ejs, 42 00:02:17,520 --> 00:02:22,370 we can now include this partial that we created here. 43 00:02:22,370 --> 00:02:26,550 In about.ejs, in the place where we wanna have the header, 44 00:02:26,550 --> 00:02:30,380 we can use another special syntax offered by EJS, 45 00:02:30,380 --> 00:02:34,740 and that is smaller than, percentage sign, dash, 46 00:02:34,740 --> 00:02:37,333 and then also the closing tag without a dash. 47 00:02:38,230 --> 00:02:41,710 The dash is another EJS syntax, 48 00:02:41,710 --> 00:02:43,070 which we haven't seen before, 49 00:02:43,070 --> 00:02:48,070 which we use whenever we wanna render some HTML content. 50 00:02:49,410 --> 00:02:52,140 Because by default, and that's important, 51 00:02:52,140 --> 00:02:55,670 if we output something as we did it before 52 00:02:55,670 --> 00:02:57,750 with that equal sign, 53 00:02:57,750 --> 00:03:01,420 then EJS will take the value stored in there 54 00:03:01,420 --> 00:03:03,683 and output it as raw text. 55 00:03:04,660 --> 00:03:07,390 So even if I did share a restaurant 56 00:03:07,390 --> 00:03:12,040 where I tried to be tricky and add some HTML code here, 57 00:03:12,040 --> 00:03:14,380 once we output that description, 58 00:03:14,380 --> 00:03:16,260 it would be output as raw text. 59 00:03:16,260 --> 00:03:21,040 It would not be interpreted as HTML by EJS. 60 00:03:21,040 --> 00:03:23,570 This is also security mechanism 61 00:03:23,570 --> 00:03:27,590 so that for pages with user-generated content, 62 00:03:27,590 --> 00:03:32,590 your users can't start injecting HTML pieces into your page. 63 00:03:33,142 --> 00:03:37,540 That could become dangerous as soon as they start injecting 64 00:03:37,540 --> 00:03:41,270 images that load other parts of other sites 65 00:03:41,270 --> 00:03:44,373 or as soon as they start injecting scripts. 66 00:03:45,400 --> 00:03:48,120 That's why the equal sign does something 67 00:03:48,120 --> 00:03:50,300 which is called escaping. 68 00:03:50,300 --> 00:03:54,050 It escapes that value that it outputs, 69 00:03:54,050 --> 00:03:57,223 which means it translates it into raw text. 70 00:03:58,210 --> 00:04:02,450 That's useful for outputting such user-generated content. 71 00:04:02,450 --> 00:04:06,680 It's not useful for including some HTML code 72 00:04:06,680 --> 00:04:09,200 that we store in a different file. 73 00:04:09,200 --> 00:04:11,480 There, instead, we wanna use the minus 74 00:04:11,480 --> 00:04:14,010 which does not escape that content 75 00:04:14,010 --> 00:04:18,470 but which instead will actually treat HTML code 76 00:04:18,470 --> 00:04:21,423 as HTML code instead of raw text. 77 00:04:22,440 --> 00:04:25,800 And we need that because we'll now use a special function 78 00:04:25,800 --> 00:04:28,000 that is provided by EJS, 79 00:04:28,000 --> 00:04:30,103 and that's the include function. 80 00:04:31,240 --> 00:04:35,160 The include function allows us to specify a path 81 00:04:35,160 --> 00:04:37,510 to a different EJS file, 82 00:04:37,510 --> 00:04:41,160 and EJS will then parse that file as well 83 00:04:41,160 --> 00:04:45,380 and get the HTML content generated by that file. 84 00:04:45,380 --> 00:04:49,880 And because of that EJS tag with the dash here that we use, 85 00:04:49,880 --> 00:04:53,600 that HTML content will then be injected 86 00:04:53,600 --> 00:04:58,600 and treated as HTML content in this overall HTML page. 87 00:04:59,690 --> 00:05:02,580 Therefore, you now need to pass a value to include, 88 00:05:02,580 --> 00:05:03,870 which should be a string, 89 00:05:03,870 --> 00:05:07,590 which is the path to the file that should be included. 90 00:05:07,590 --> 00:05:10,840 And by default, you can use a relative path here 91 00:05:10,840 --> 00:05:12,720 seen from the template file 92 00:05:12,720 --> 00:05:14,740 in which you are using this function, 93 00:05:14,740 --> 00:05:19,000 so in this case, seen relative from about.ejs, 94 00:05:19,000 --> 00:05:24,000 and that could be includes/header here, 95 00:05:24,430 --> 00:05:26,243 again, without the extension. 96 00:05:27,880 --> 00:05:31,130 As a second value, you could also pass in 97 00:05:31,130 --> 00:05:36,130 an object with extra values for that path, for that file, 98 00:05:36,150 --> 00:05:40,040 just as we do it in app.js when we called render. 99 00:05:40,040 --> 00:05:42,940 There, we can also pass in an object with data 100 00:05:42,940 --> 00:05:45,420 that is available in the template. 101 00:05:45,420 --> 00:05:47,920 If you need such data in the included file, 102 00:05:47,920 --> 00:05:52,090 you can pass such data to the include like this as well. 103 00:05:52,090 --> 00:05:55,540 But here the header has no dynamic content, 104 00:05:55,540 --> 00:05:58,750 hence I don't need to pass any dynamic data to it, 105 00:05:58,750 --> 00:06:01,143 and hence I can just include it like this. 106 00:06:02,120 --> 00:06:04,410 And with that, if we save this, 107 00:06:04,410 --> 00:06:07,560 if we now go to the About page, it still works, 108 00:06:07,560 --> 00:06:10,370 and we still have the header with the navigation here. 109 00:06:10,370 --> 00:06:13,920 And if we inspect this, we also see no real difference 110 00:06:13,920 --> 00:06:16,000 compared to the other files, 111 00:06:16,000 --> 00:06:19,290 but this header actually was included 112 00:06:19,290 --> 00:06:21,733 with help of this include function. 113 00:06:23,110 --> 00:06:25,470 And, of course, now I wanna do the same 114 00:06:25,470 --> 00:06:28,210 with the header in all the other files 115 00:06:28,210 --> 00:06:31,898 and also for this side drawer. 116 00:06:31,898 --> 00:06:34,590 Definitely feel free to do this on your own first 117 00:06:34,590 --> 00:06:36,200 as a practice. 118 00:06:36,200 --> 00:06:39,380 In a couple of seconds, which I give you to pause the video, 119 00:06:39,380 --> 00:06:40,530 we'll do that together. 120 00:06:43,880 --> 00:06:48,020 So were you successful? Let's now do that together. 121 00:06:48,020 --> 00:06:49,700 And I'll start with the header. 122 00:06:49,700 --> 00:06:52,130 Of course, that should be fairly straightforward. 123 00:06:52,130 --> 00:06:54,750 We just copy this include code from about. 124 00:06:54,750 --> 00:06:57,190 And then in all the other EJS files, 125 00:06:57,190 --> 00:07:00,193 we replace this header code with this include, 126 00:07:01,050 --> 00:07:03,680 also here in index 127 00:07:04,792 --> 00:07:09,230 and in recommend, of course, as well. 128 00:07:09,230 --> 00:07:13,294 So here I also replace that. 129 00:07:13,294 --> 00:07:17,343 And then in restaurants.ejs, I also wanna replace that, 130 00:07:19,780 --> 00:07:20,613 like this. 131 00:07:21,700 --> 00:07:25,040 Now I also wanted to do the same for the side drawer. 132 00:07:25,040 --> 00:07:27,670 We could have included it in the header partial, 133 00:07:27,670 --> 00:07:31,150 but I will create a separate includable file, 134 00:07:31,150 --> 00:07:33,990 copy the aside from any EJS files 135 00:07:33,990 --> 00:07:35,800 since it's always the same, 136 00:07:35,800 --> 00:07:40,800 and then add a side-drawer.ejs file in this includes folder, 137 00:07:41,170 --> 00:07:45,880 store the content here, and then start including this 138 00:07:45,880 --> 00:07:48,530 simply by copying this include code 139 00:07:48,530 --> 00:07:50,600 and replacing aside with it. 140 00:07:50,600 --> 00:07:55,220 Now we just need to include the side-drawer here. 141 00:07:55,220 --> 00:07:57,480 And then we can, again, repeat that 142 00:07:57,480 --> 00:08:00,490 in all the different EJS files 143 00:08:00,490 --> 00:08:03,683 so that we include that in all those files. 144 00:08:07,010 --> 00:08:09,423 So let's do this. 145 00:08:12,930 --> 00:08:15,930 And with that, we already reduced the amount of code 146 00:08:15,930 --> 00:08:18,330 in all those files quite a bit. 147 00:08:18,330 --> 00:08:21,930 And that is something you wanna strive for as a developer 148 00:08:21,930 --> 00:08:24,860 because the bigger your web projects get, 149 00:08:24,860 --> 00:08:27,950 the more complex your HTML code will get. 150 00:08:27,950 --> 00:08:28,900 And if you then have 151 00:08:28,900 --> 00:08:32,559 small, reusable, includable files like this, 152 00:08:32,559 --> 00:08:36,650 you don't just avoid a bunch of copy and pasting, 153 00:08:36,650 --> 00:08:39,110 but you also have more manageable files 154 00:08:39,110 --> 00:08:42,260 where you will be quicker to find 155 00:08:42,260 --> 00:08:45,280 the exact code you now need to work on. 156 00:08:45,280 --> 00:08:46,850 So splitting your code like this 157 00:08:46,850 --> 00:08:50,150 does not just avoid unnecessary duplication. 158 00:08:50,150 --> 00:08:53,380 It can also make structuring your project 159 00:08:53,380 --> 00:08:56,283 and working on your HTML code easier. 160 00:08:57,530 --> 00:09:00,060 Keep in mind that we did, for example, also split 161 00:09:00,060 --> 00:09:01,640 our style files. 162 00:09:01,640 --> 00:09:04,930 For HTML, we had no such mechanism before. 163 00:09:04,930 --> 00:09:08,080 Now, with the templating engine, we do have it. 164 00:09:08,080 --> 00:09:11,823 So extra maintainability is another benefit here. 165 00:09:12,880 --> 00:09:16,150 And speaking of that, there are more parts we can include. 166 00:09:16,150 --> 00:09:21,150 For example, the head section here is also pretty similar. 167 00:09:21,480 --> 00:09:25,160 There are some page-specific imports, 168 00:09:25,160 --> 00:09:27,920 some page-specific CSS imports, 169 00:09:27,920 --> 00:09:30,780 but there also is a lot of shared content, 170 00:09:30,780 --> 00:09:35,003 and therefore I'll add an include here, head.ejs. 171 00:09:35,980 --> 00:09:37,960 And then from about.ejs, 172 00:09:37,960 --> 00:09:41,060 I'll take all the content from the head section here, 173 00:09:41,060 --> 00:09:45,003 cut it, and add it in head.ejs. 174 00:09:46,080 --> 00:09:48,910 This might look strange because we got some metadata now 175 00:09:48,910 --> 00:09:52,790 in a file without the head wrapper around it. 176 00:09:52,790 --> 00:09:55,880 But keep in mind that ultimately this will be injected 177 00:09:55,880 --> 00:09:57,510 between the head tags again 178 00:09:58,610 --> 00:10:02,220 because now here in about, I can include head, 179 00:10:02,220 --> 00:10:05,253 not header but head here in the head section. 180 00:10:06,591 --> 00:10:10,960 I can do this in the other files as well, so I'll copy that, 181 00:10:10,960 --> 00:10:15,960 and in confirm.ejs, I'll do the same, like this. 182 00:10:17,210 --> 00:10:19,260 In index.ejs, I'll also do that, 183 00:10:19,260 --> 00:10:23,080 but there, I also got a page-specific CSS file, 184 00:10:23,080 --> 00:10:26,410 and therefore I'll leave that specific file here 185 00:10:26,410 --> 00:10:30,143 and just replace the other parts with that included head. 186 00:10:31,410 --> 00:10:34,830 And that's how we can then still have page-specific styles 187 00:10:34,830 --> 00:10:37,803 merged with that main head 188 00:10:37,803 --> 00:10:40,053 that is the same for all the pages. 189 00:10:41,110 --> 00:10:43,200 It's the same for recommend.ejs. 190 00:10:43,200 --> 00:10:47,570 I do have this page-specific CSS file which I'll keep, 191 00:10:47,570 --> 00:10:51,490 but I will replace the other content here 192 00:10:51,490 --> 00:10:54,410 and do the same for restaurants.ejs. 193 00:10:54,410 --> 00:10:56,140 Keep the specific file 194 00:10:56,140 --> 00:11:00,723 and replace the other parts here like that. 195 00:11:02,650 --> 00:11:05,960 Again, if we save this, it still works. 196 00:11:05,960 --> 00:11:08,100 The styles still are there. 197 00:11:08,100 --> 00:11:12,230 We also got no error here in the Network or in this Console, 198 00:11:12,230 --> 00:11:15,720 and we can also still open that mobile menu, 199 00:11:15,720 --> 00:11:20,720 but now we got more code reusage and leaner EJS files. 200 00:11:23,010 --> 00:11:26,670 There is one last piece of code that I'd like to include, 201 00:11:26,670 --> 00:11:29,540 and that is actually my restaurant-item. 202 00:11:29,540 --> 00:11:31,940 I only use that in one file, 203 00:11:31,940 --> 00:11:34,520 so I don't wanna turn this into an include 204 00:11:34,520 --> 00:11:37,310 to avoid code duplication. 205 00:11:37,310 --> 00:11:39,690 But I wanna turn it into an include 206 00:11:39,690 --> 00:11:42,780 to make this restaurants.ejs file even leaner 207 00:11:42,780 --> 00:11:44,930 and therefore more manageable 208 00:11:44,930 --> 00:11:47,440 and at the same time to make this restaurant-item 209 00:11:47,440 --> 00:11:49,990 leaner and easier to find. 210 00:11:49,990 --> 00:11:54,680 And therefore, I'll cut this list item from restaurants.ejs, 211 00:11:54,680 --> 00:11:58,620 and in includes I'll add a subfolder restaurants 212 00:11:58,620 --> 00:12:00,400 just to make it clear that there 213 00:12:00,400 --> 00:12:05,400 I have some specific includes for a specific page. 214 00:12:05,470 --> 00:12:07,160 It's not technically required 215 00:12:07,160 --> 00:12:11,680 but makes it easier to find this specific include later. 216 00:12:11,680 --> 00:12:12,880 And in there I'll add 217 00:12:12,880 --> 00:12:16,733 my, let's say, restaurant-item EJS file. 218 00:12:17,930 --> 00:12:21,910 And in there I now have this included list item code. 219 00:12:21,910 --> 00:12:23,080 But the tricky thing now 220 00:12:23,080 --> 00:12:26,793 is that in there I do actually have some dynamic data. 221 00:12:27,890 --> 00:12:30,330 But I did mention before that for includes, 222 00:12:30,330 --> 00:12:33,653 you can also pass dynamic data into includes. 223 00:12:34,710 --> 00:12:39,140 So back here in restaurants.ejs, instead of the for loop, 224 00:12:39,140 --> 00:12:41,880 I now wanna start by including again, 225 00:12:41,880 --> 00:12:44,510 by calling this include function. 226 00:12:44,510 --> 00:12:49,510 And I wanna go to includes/restaurants here, 227 00:12:50,910 --> 00:12:55,163 oops, restaurants, and then restaurant-item. 228 00:12:56,260 --> 00:12:59,750 And I'll now pass this second parameter value 229 00:12:59,750 --> 00:13:01,560 to this include function 230 00:13:01,560 --> 00:13:06,560 to provide a restaurant key to this included code 231 00:13:06,740 --> 00:13:09,670 because here I'm referring to this restaurant key 232 00:13:09,670 --> 00:13:12,253 in this restaurant-item.ejs file. 233 00:13:13,170 --> 00:13:16,903 So I'm providing this key here now in restaurants.ejs. 234 00:13:18,140 --> 00:13:21,630 And the value for the key is this restaurant here. 235 00:13:21,630 --> 00:13:24,210 And I know that's a lot of restaurants, 236 00:13:24,210 --> 00:13:25,440 but I hope I could make it clear 237 00:13:25,440 --> 00:13:28,020 which restaurant refers to what. 238 00:13:28,020 --> 00:13:31,560 This restaurant here is this constant, 239 00:13:31,560 --> 00:13:33,820 so it's one of the restaurant objects 240 00:13:33,820 --> 00:13:35,433 in this restaurants list. 241 00:13:37,190 --> 00:13:39,380 On the other hand, this restaurant here 242 00:13:39,380 --> 00:13:41,320 is simply the key name 243 00:13:41,320 --> 00:13:45,690 that is now made available to restaurant-item.ejs, 244 00:13:45,690 --> 00:13:50,490 which is where I'm using this key in all these places here. 245 00:13:50,490 --> 00:13:53,340 So that's this restaurant key which I'm accessing 246 00:13:53,340 --> 00:13:55,703 and which therefore needs to be made available. 247 00:13:57,020 --> 00:13:59,400 That's this first key. 248 00:13:59,400 --> 00:14:01,760 With that, we can again save this. 249 00:14:01,760 --> 00:14:03,980 And still, if we reload this, 250 00:14:03,980 --> 00:14:06,220 everything works the way it did before. 251 00:14:06,220 --> 00:14:10,260 We can still see our restaurants here. Everything renders. 252 00:14:10,260 --> 00:14:14,320 But we now get a even leaner restaurants.ejs file 253 00:14:14,320 --> 00:14:18,100 which, as mentioned, is something we typically strive for 254 00:14:18,100 --> 00:14:19,870 as a developer 255 00:14:19,870 --> 00:14:22,710 because if we now had more content in this file, 256 00:14:22,710 --> 00:14:26,560 we could put these different parts also into other includes. 257 00:14:26,560 --> 00:14:28,440 And if we then ever need to work 258 00:14:28,440 --> 00:14:31,630 on the HTML code of a restaurant-item, 259 00:14:31,630 --> 00:14:33,740 we can go to that specific file 260 00:14:33,740 --> 00:14:35,650 and work on it just like this 261 00:14:35,650 --> 00:14:38,600 instead of having to search for this list item 262 00:14:38,600 --> 00:14:42,440 in a potentially pretty big restaurants.ejs file. 263 00:14:42,440 --> 00:14:45,150 That's why splitting the code like this 264 00:14:45,150 --> 00:14:47,520 could also be something that's interesting. 265 00:14:47,520 --> 00:14:50,300 And with a templating engine like EJS, 266 00:14:50,300 --> 00:14:51,743 it's super easy to do.