1 00:00:01,840 --> 00:00:02,290 Welcome back. 2 00:00:02,320 --> 00:00:06,370 My friends will come to another lecture today where we are going to do is we going to start building 3 00:00:06,370 --> 00:00:10,820 our architecture, creating those three modules that we discussed before. 4 00:00:10,960 --> 00:00:14,030 So here is why we use modular architecture. 5 00:00:14,050 --> 00:00:15,920 I'm not going to module pattern. 6 00:00:15,940 --> 00:00:22,900 I'm not going to say too much because the modular let me just write it module pattern is one of the 7 00:00:22,900 --> 00:00:28,720 most famous patterns in JavaScript in it's widely used. 8 00:00:28,750 --> 00:00:34,100 Second, it is very convenient to use because you didn't capsulize our data. 9 00:00:34,270 --> 00:00:42,880 It helps to preserve how to see it helps us developer to write a clean code to reuse it. 10 00:00:43,060 --> 00:00:46,870 And we can just extend that module and work on that module in future. 11 00:00:46,900 --> 00:00:49,330 Right now the module is great. 12 00:00:49,360 --> 00:00:50,660 Now how are we going to implement it? 13 00:00:50,680 --> 00:00:54,250 We're going to do that through immediately invoked functions. 14 00:00:54,250 --> 00:01:03,520 Y if you remember that after every EFFI invoke when it's been invoked, it will create a new scope and 15 00:01:03,520 --> 00:01:05,160 it will encapsulate the data. 16 00:01:05,200 --> 00:01:07,090 Right now I'm just going to save it. 17 00:01:08,170 --> 00:01:11,920 So open the starter folder and right. 18 00:01:11,920 --> 00:01:14,040 Click here open with live server. 19 00:01:14,590 --> 00:01:19,110 This will give me I'm not going to use, I'm just going to copy the link. 20 00:01:19,120 --> 00:01:25,600 I'm not going to use Firefox, I'm just going to use Google Chrome for a minute. 21 00:01:25,870 --> 00:01:29,580 And what I'm going to do here, I'm just going to open that. 22 00:01:29,590 --> 00:01:32,760 I'm going to page that link and we're going to open it and I'm going to inspect it. 23 00:01:33,010 --> 00:01:35,230 And here are you going to see a lot of. 24 00:01:37,750 --> 00:01:46,660 A lot of things selected context only, right, so there are a lot of errors that are not with connected 25 00:01:46,660 --> 00:01:47,560 with our coding. 26 00:01:47,560 --> 00:01:47,870 Right. 27 00:01:47,890 --> 00:01:52,990 So we finish this one to go open the jails at the jails. 28 00:01:52,990 --> 00:01:56,800 And here we are going to work on our epee functions. 29 00:01:56,800 --> 00:02:00,130 So I'm going to create the first Batur, the first module or controller. 30 00:02:00,340 --> 00:02:07,130 It will be calories controller and that will be immediately bone function. 31 00:02:07,330 --> 00:02:13,870 Remember how we write the functions, write like that and we need to invoke them outside. 32 00:02:14,710 --> 00:02:16,390 Now I'm just going to copy it here. 33 00:02:17,650 --> 00:02:20,380 I'm going to paste two more and I'm going to change. 34 00:02:20,460 --> 00:02:23,320 So we have to put that one the last. 35 00:02:23,540 --> 00:02:32,370 I have a main controller and I do have this app UI controller that we discussed in the previous lecture. 36 00:02:32,380 --> 00:02:38,530 So I do have these three modules in these three modules are going to be enough for this application. 37 00:02:38,540 --> 00:02:40,900 No, I'm just going to do example. 38 00:02:40,900 --> 00:02:41,790 You don't have to write it. 39 00:02:41,800 --> 00:02:43,090 You just can listen to me. 40 00:02:43,210 --> 00:02:47,120 You don't need to write it here because we you can we will delete that later. 41 00:02:47,470 --> 00:02:50,740 Now, I'm just going to create a variable h here. 42 00:02:50,890 --> 00:02:52,240 It will be two thirty three. 43 00:02:52,240 --> 00:02:53,500 I'm just a little bit inrush. 44 00:02:53,620 --> 00:02:59,470 I want you to not fall asleep, get your coffee, get your favorite drink and be focused. 45 00:02:59,680 --> 00:03:01,720 Now here I'm going to create a function. 46 00:03:01,930 --> 00:03:04,540 It will be here born in this function. 47 00:03:06,070 --> 00:03:09,840 We'll just have one parameter in that will be current here. 48 00:03:10,000 --> 00:03:11,740 So here you're going to pass the current here. 49 00:03:11,740 --> 00:03:13,540 For me, the current year is twenty twenty. 50 00:03:13,750 --> 00:03:14,000 Right. 51 00:03:14,140 --> 00:03:18,250 And it will be return current here minus H. 52 00:03:18,370 --> 00:03:24,010 Otherwise if we just do H minus current year it will be negative and that is what we don't want. 53 00:03:24,400 --> 00:03:31,660 Now when the if using Bogot it will be create a new scope with new data encapsulate now these functions. 54 00:03:32,020 --> 00:03:34,600 I will not be able to call it outside. 55 00:03:34,600 --> 00:03:35,530 I'm just going to show you. 56 00:03:35,710 --> 00:03:40,210 So calorie controller diet and let's not do it like this. 57 00:03:41,050 --> 00:03:41,830 It's going to save it. 58 00:03:42,010 --> 00:03:46,990 I'm going to open it here and I'm going to say calories controller that age. 59 00:03:47,200 --> 00:03:47,590 Right. 60 00:03:47,860 --> 00:03:54,820 And you kind of read the property h how cool is this if I just go to the year before? 61 00:03:58,490 --> 00:04:05,470 And put it out here 20, 20 like that, it will be cannot read property, it's undefined. 62 00:04:05,930 --> 00:04:10,720 No, we cannot access things from here because they're private. 63 00:04:10,730 --> 00:04:16,380 But what we can access, we can return an object with a method inside. 64 00:04:16,400 --> 00:04:20,090 Right now, I'm going to create a public method you can create. 65 00:04:20,450 --> 00:04:23,910 If you write it here together with me, you can write any name you want. 66 00:04:23,930 --> 00:04:24,960 This is for testing only. 67 00:04:25,190 --> 00:04:34,060 So here I'm going to return a function that will have one parameter and I will see counsel no calls 68 00:04:34,070 --> 00:04:34,730 a log. 69 00:04:35,540 --> 00:04:35,930 What? 70 00:04:36,020 --> 00:04:43,040 I'm just going to say you're born with the same parameter that I'm passing from here right now. 71 00:04:43,040 --> 00:04:44,020 Let's test this out. 72 00:04:44,030 --> 00:04:49,140 So let's see if I now can use this public method outside. 73 00:04:49,340 --> 00:04:52,060 So this will be open, exposed to our public school. 74 00:04:52,580 --> 00:04:53,030 Let's see. 75 00:04:53,030 --> 00:04:54,040 Calories control. 76 00:04:54,090 --> 00:04:56,090 The public method here really is. 77 00:04:56,300 --> 00:04:56,840 Yeah. 78 00:04:56,840 --> 00:05:03,470 Let's use the 20/20 here if it's going to give me a 1987. 79 00:05:03,740 --> 00:05:05,990 So why is this working? 80 00:05:06,020 --> 00:05:14,630 This is working because remember, we have done closure's so again with the closures with the EPA, 81 00:05:14,630 --> 00:05:19,880 first we create a new school and that returns an object right here it is in this object. 82 00:05:19,880 --> 00:05:23,000 There is a whole information that we want to deal with. 83 00:05:23,210 --> 00:05:30,890 Now, the public metal can use both these private variables in ways that remember, because this function 84 00:05:30,890 --> 00:05:32,540 is being called, it's been finished. 85 00:05:32,840 --> 00:05:42,710 So why why this public method have the access both of these each and year born when they are private? 86 00:05:43,520 --> 00:05:46,130 So the answer's a the answer is simple. 87 00:05:46,130 --> 00:05:48,220 It is because of the closure. 88 00:05:48,230 --> 00:05:54,590 Now, the closures were created in inner function, have access, has access to the variables in the 89 00:05:54,590 --> 00:05:56,440 parameters of the other function. 90 00:05:56,690 --> 00:05:57,090 Right. 91 00:05:57,380 --> 00:06:05,540 Remember that the definition that I gave it to you, that is why this is working and this is powerful. 92 00:06:05,840 --> 00:06:09,710 So the E.V. from anonymous function, from data encapsulation. 93 00:06:09,890 --> 00:06:12,920 That's why we're going to use it now here. 94 00:06:12,920 --> 00:06:14,600 We're going to write some code. 95 00:06:14,600 --> 00:06:15,410 I'm not going to do it. 96 00:06:15,410 --> 00:06:17,780 This is just a bare structure now. 97 00:06:17,780 --> 00:06:19,760 I'm going to do in main controller. 98 00:06:19,910 --> 00:06:22,340 So the main controller, it's going to be our bridge. 99 00:06:22,340 --> 00:06:22,580 Right. 100 00:06:22,610 --> 00:06:25,760 We need to connect to things in here. 101 00:06:25,760 --> 00:06:34,370 I'm going to pass two parameters in those parameters will be the calories controller and APU I control 102 00:06:34,370 --> 00:06:35,270 and we're going to need it. 103 00:06:35,270 --> 00:06:37,400 Slightly different one calories. 104 00:06:39,430 --> 00:06:49,990 Sethe, yet qty are L in the other one will be app you sethe or you can name whatever you want here, 105 00:06:50,350 --> 00:06:59,260 but here we need to invoke the real cop calories controller in the app controller, make sure that you 106 00:06:59,260 --> 00:06:59,620 copy. 107 00:06:59,620 --> 00:07:05,140 Don't get confused so we can use it here or this will work. 108 00:07:05,140 --> 00:07:10,420 If we don't use it because these two are outside, we can just use them right now. 109 00:07:10,470 --> 00:07:12,100 Just to zoom in a little bit. 110 00:07:12,130 --> 00:07:21,430 Right now we can use the app UI controller here and do whatever we want with that app. 111 00:07:21,430 --> 00:07:27,490 You had control over the calories controller even here directly because it's in outer scope. 112 00:07:27,760 --> 00:07:34,170 But we just choose to have to pass into two parameters here in these parameters. 113 00:07:34,180 --> 00:07:36,760 They don't have the same name with this guy here. 114 00:07:37,150 --> 00:07:42,730 Why in future I'm going to just tell you, if you use the same name here, same name here in here, 115 00:07:42,730 --> 00:07:46,870 you have ten lines where you calling some functions here that are public. 116 00:07:47,560 --> 00:07:54,190 And imagine that in future you're going to see calories controller and you're going to say, OK, calories 117 00:07:55,420 --> 00:07:56,980 some controller. 118 00:07:56,990 --> 00:07:59,860 Now, I only have to change it here. 119 00:08:01,060 --> 00:08:04,000 I don't need to go here in the in the in this. 120 00:08:04,000 --> 00:08:08,730 I'm just going to show it to you, for example, calories, control or the public method. 121 00:08:09,790 --> 00:08:13,870 And imagine we have ten methods that are public here with a comma. 122 00:08:13,870 --> 00:08:15,670 You can add more methods. 123 00:08:15,670 --> 00:08:15,990 Right. 124 00:08:16,150 --> 00:08:19,590 So imagine that we have ten methods and we have ten lines here. 125 00:08:19,900 --> 00:08:24,490 Now, if I change the name of this controller, I will have to change those ten lines. 126 00:08:24,850 --> 00:08:27,010 But not this bad boy here. 127 00:08:27,040 --> 00:08:29,470 This bad boy will be the bridge actually. 128 00:08:29,620 --> 00:08:32,050 And we can use use it like that. 129 00:08:32,050 --> 00:08:32,430 Right. 130 00:08:32,470 --> 00:08:38,820 We don't deal with the real name because the real name can be changed to calories some controller in 131 00:08:38,840 --> 00:08:39,430 future. 132 00:08:39,430 --> 00:08:47,110 And now we need to only here do it once or even the app can be changed. 133 00:08:47,590 --> 00:08:52,390 So I hope you understand what I'm trying to do now for the test. 134 00:08:52,390 --> 00:08:56,110 We're going to do something here now because this is a breach. 135 00:08:56,530 --> 00:08:57,370 Let's communicate. 136 00:08:57,370 --> 00:08:58,240 Let's grab this. 137 00:08:58,300 --> 00:09:00,490 Let's we use that's borrowing. 138 00:09:00,490 --> 00:09:02,200 It's called method borrowing. 139 00:09:02,200 --> 00:09:06,400 Let's borrow this method here and we can now use the name. 140 00:09:07,570 --> 00:09:09,310 We can create return here. 141 00:09:09,460 --> 00:09:10,630 We can return something. 142 00:09:11,800 --> 00:09:12,110 Oops. 143 00:09:12,190 --> 00:09:16,420 And let's create another public method for this controller. 144 00:09:16,630 --> 00:09:21,100 We have the public method for this controller, but we don't have it for here. 145 00:09:21,250 --> 00:09:22,270 We need to print it out. 146 00:09:22,270 --> 00:09:24,730 We need to do something we need to be able to access. 147 00:09:24,850 --> 00:09:26,620 So he's going to be public method. 148 00:09:27,010 --> 00:09:29,710 Me, I don't want to be the same name. 149 00:09:29,710 --> 00:09:29,940 Right. 150 00:09:30,220 --> 00:09:36,820 And that will be a function that will receive a year and let's say console log. 151 00:09:37,720 --> 00:09:38,990 Let's log it straight away. 152 00:09:39,400 --> 00:09:42,160 Has a log calories controller. 153 00:09:42,550 --> 00:09:48,790 This variable here that have the access to the public method of the year. 154 00:09:49,870 --> 00:09:52,270 How cool is this now? 155 00:09:52,900 --> 00:09:56,200 We need to fix something here. 156 00:09:56,200 --> 00:09:58,420 I'm just going to we need to return something here. 157 00:09:58,420 --> 00:10:00,280 We not we don't need to control a lot. 158 00:10:00,400 --> 00:10:01,810 So I'm just going to say return. 159 00:10:03,370 --> 00:10:05,920 You're born and we're going to pass the year. 160 00:10:05,920 --> 00:10:07,600 Oops, not like that. 161 00:10:08,350 --> 00:10:10,570 So we need to return it in order to use it here. 162 00:10:10,810 --> 00:10:18,160 So I'm calling this function with, for example, a year here, but I need to call it straight from 163 00:10:18,180 --> 00:10:18,390 here. 164 00:10:18,400 --> 00:10:21,490 Main controller DOT public. 165 00:10:23,030 --> 00:10:29,180 Public method mean, and I'm going to pass it here 20, 21 before I do have 166 00:10:32,000 --> 00:10:32,740 87. 167 00:10:32,960 --> 00:10:37,610 Now, I should have some different year and that is 1988. 168 00:10:38,870 --> 00:10:40,230 How cool is this? 169 00:10:41,300 --> 00:10:50,570 So what is happening now, man controller has its own return that contains a public method in that public 170 00:10:50,570 --> 00:10:57,570 matter is actually going through the public method and passing value to this one. 171 00:10:57,770 --> 00:10:59,960 And this is just returning in. 172 00:10:59,960 --> 00:11:11,450 This method can reuse, as we that we spoke, can use all the private instances and functions from from 173 00:11:11,450 --> 00:11:12,980 this calorie controller. 174 00:11:13,250 --> 00:11:14,550 That is why we use it. 175 00:11:14,720 --> 00:11:20,080 Now, this guy here will not be able to call this year board, right. 176 00:11:20,510 --> 00:11:22,370 Will not be able to do it like that. 177 00:11:23,060 --> 00:11:26,090 And got you're born is not a function. 178 00:11:26,540 --> 00:11:28,030 That is what is happening. 179 00:11:28,130 --> 00:11:30,300 So it can only access the private members. 180 00:11:30,470 --> 00:11:33,540 So I hope you understand what we're trying to do now. 181 00:11:34,180 --> 00:11:35,000 This is all nice. 182 00:11:35,000 --> 00:11:36,620 And then we're going to just delete this. 183 00:11:36,890 --> 00:11:37,820 I don't need this. 184 00:11:37,820 --> 00:11:43,130 If you don't want to, you can create a commons, but this is what we have now. 185 00:11:43,130 --> 00:11:45,200 We do have the structure in architecture. 186 00:11:45,470 --> 00:11:47,200 Now you know why we use Evey's. 187 00:11:47,210 --> 00:11:51,500 You know why we use closure's you know, why we use this model module pattern? 188 00:11:51,500 --> 00:11:59,870 Because it is working in that way that we can have one controller that communicates with both here and 189 00:11:59,870 --> 00:12:01,790 plus inside the function. 190 00:12:01,790 --> 00:12:07,490 We can declare it is a private and public and we can just have the access of the public. 191 00:12:07,490 --> 00:12:14,120 Right, because the public method will use private variables and functions even after this method is 192 00:12:14,120 --> 00:12:14,460 finished. 193 00:12:14,460 --> 00:12:19,490 And this is working because of the closures, the inner function have the access to the variables and 194 00:12:19,490 --> 00:12:22,010 the parameters of the other functions. 195 00:12:22,400 --> 00:12:27,320 That is that is why the public method is working. 196 00:12:27,680 --> 00:12:28,050 Right. 197 00:12:28,490 --> 00:12:29,450 So thank you very much. 198 00:12:29,600 --> 00:12:32,450 I hope you understand this and I will see you in the next one. 199 00:12:32,450 --> 00:12:33,500 Don't quit yet. 200 00:12:33,800 --> 00:12:38,060 Just tag along and we will try to finish you. 201 00:12:38,210 --> 00:12:39,230 If you are here. 202 00:12:39,350 --> 00:12:42,110 Your true blue means that you're great. 203 00:12:42,110 --> 00:12:45,660 You have done a lot and you're invested in yourself. 204 00:12:45,680 --> 00:12:46,730 Invested time. 205 00:12:46,940 --> 00:12:51,640 Now stay until the end and you will after that, reap the rewards. 206 00:12:51,770 --> 00:12:52,520 Thank you very much.