Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,350 --> 00:00:03,090 (instructor)So before we continue 2 2 00:00:03,090 --> 00:00:05,250 any further in our project, 3 3 00:00:05,250 --> 00:00:07,000 we should now think a little bit 4 4 00:00:07,000 --> 00:00:09,433 about our project Architecture. 5 5 00:00:11,140 --> 00:00:13,220 Now, there are some quite advanced 6 6 00:00:13,220 --> 00:00:15,970 architecture patterns in JavaScript. 7 7 00:00:15,970 --> 00:00:18,720 And we will actually talk a little bit about this 8 8 00:00:18,720 --> 00:00:20,780 by the end of the course. 9 9 00:00:20,780 --> 00:00:22,380 But in this small project, 10 10 00:00:22,380 --> 00:00:25,970 we will simply use object oriented programming with classes, 11 11 00:00:25,970 --> 00:00:28,970 just like we learned in the last section. 12 12 00:00:28,970 --> 00:00:29,950 And so this way, 13 13 00:00:29,950 --> 00:00:34,170 you can then use these concepts here in a real project. 14 14 00:00:34,170 --> 00:00:37,380 And remember that Architecture is all about 15 15 00:00:37,380 --> 00:00:40,060 giving the project a structure. 16 16 00:00:40,060 --> 00:00:41,740 And so in that structure, 17 17 00:00:41,740 --> 00:00:44,670 we can then develop the functionality. 18 18 00:00:44,670 --> 00:00:46,670 And so in this project, 19 19 00:00:46,670 --> 00:00:48,790 I decided that the main structure 20 20 00:00:48,790 --> 00:00:52,580 will come from classes and objects. 21 21 00:00:52,580 --> 00:00:55,470 All right, so let's now dig a little bit deeper 22 22 00:00:55,470 --> 00:00:58,900 into this Architecture that we gonna use. 23 23 00:00:58,900 --> 00:01:02,290 So to start, one of the most important aspects 24 24 00:01:02,290 --> 00:01:04,070 of any Architecture, 25 25 00:01:04,070 --> 00:01:08,040 is to decide where and how to store the data. 26 26 00:01:08,040 --> 00:01:09,980 Because data is probably 27 27 00:01:09,980 --> 00:01:13,660 the most fundamental part of any application. 28 28 00:01:13,660 --> 00:01:16,860 Because without data, it doesn't even make sense 29 29 00:01:16,860 --> 00:01:19,800 to have an application in the first place. 30 30 00:01:19,800 --> 00:01:22,720 Right, what would the application be about, 31 31 00:01:22,720 --> 00:01:25,840 if not about some sort of data. 32 32 00:01:25,840 --> 00:01:28,620 Now, in this case, the data that we need to store 33 33 00:01:28,620 --> 00:01:32,530 and to manage comes directly from the user stories. 34 34 00:01:32,530 --> 00:01:34,610 So right in the first user story, 35 35 00:01:34,610 --> 00:01:36,910 we can already see that we will somehow 36 36 00:01:36,910 --> 00:01:40,040 need to store the location, distance, 37 37 00:01:40,040 --> 00:01:43,320 time, pace, and steps per minute. 38 38 00:01:43,320 --> 00:01:45,650 And to fit the second user story, 39 39 00:01:45,650 --> 00:01:49,450 we will have to implement basically the same data. 40 40 00:01:49,450 --> 00:01:52,210 So again, location, distance, time and speed 41 41 00:01:52,210 --> 00:01:54,550 but then also the elevation gain 42 42 00:01:54,550 --> 00:01:57,290 instead of the steps per minute. 43 43 00:01:57,290 --> 00:01:59,470 And so we will design our classes, 44 44 00:01:59,470 --> 00:02:01,380 so that they can create objects 45 45 00:02:01,380 --> 00:02:03,860 that will hold this kind of data. 46 46 00:02:03,860 --> 00:02:06,550 And I believe that this is the best way 47 47 00:02:06,550 --> 00:02:11,430 of designing the classes to really fit all user stories. 48 48 00:02:11,430 --> 00:02:14,560 So you see that we are gonna have a big parent class, 49 49 00:02:14,560 --> 00:02:17,050 which will be called Workout. 50 50 00:02:17,050 --> 00:02:18,470 And so this one is gonna hold 51 51 00:02:18,470 --> 00:02:21,480 the distance duration in coordinates. 52 52 00:02:21,480 --> 00:02:24,970 And then we will have a more specific class for the running, 53 53 00:02:24,970 --> 00:02:28,370 which will hold the cadence and the pace. 54 54 00:02:28,370 --> 00:02:31,070 All right, and the reason why the classes 55 55 00:02:31,070 --> 00:02:33,140 are designed like this is 56 56 00:02:33,140 --> 00:02:34,820 because the distance duration 57 57 00:02:34,820 --> 00:02:36,830 and coordinates are common 58 58 00:02:36,830 --> 00:02:39,770 to both of the types of activities. 59 59 00:02:39,770 --> 00:02:42,110 So both to Running and to Cycling 60 60 00:02:42,110 --> 00:02:45,090 and so therefore they are in the Parent Class. 61 61 00:02:45,090 --> 00:02:49,060 All right, and the same will also be true for some methods. 62 62 00:02:49,060 --> 00:02:52,050 And so we will see that once we implement it. 63 63 00:02:52,050 --> 00:02:54,438 And then for each type of activities, 64 64 00:02:54,438 --> 00:02:57,780 as you see, we have one child class, 65 65 00:02:57,780 --> 00:03:00,580 so that each child class can hold the data 66 66 00:03:00,580 --> 00:03:05,210 and methods that are specific to that type of activity. 67 67 00:03:05,210 --> 00:03:07,260 So I hope that makes sense 68 68 00:03:07,260 --> 00:03:08,670 and this is the whole reason 69 69 00:03:08,670 --> 00:03:12,440 why inheritance basically actually exists. 70 70 00:03:12,440 --> 00:03:14,900 So that we can have more specific classes 71 71 00:03:14,900 --> 00:03:16,890 that can inherited behavior 72 72 00:03:16,890 --> 00:03:18,840 and common properties that are 73 73 00:03:18,840 --> 00:03:21,690 common to all the child classes. 74 74 00:03:21,690 --> 00:03:24,558 So the cadence and pace are specific for Running 75 75 00:03:24,558 --> 00:03:27,430 and then the elevation gain and speed 76 76 00:03:27,430 --> 00:03:30,000 are specific to the Cycling. 77 77 00:03:30,000 --> 00:03:32,800 Okay, but once again, the Cycling also has 78 78 00:03:32,800 --> 00:03:35,560 distance, duration, and coordinates. 79 79 00:03:35,560 --> 00:03:39,000 And so that's why they are there in the parent class, 80 80 00:03:39,000 --> 00:03:41,220 so in the workout class, 81 81 00:03:41,220 --> 00:03:43,330 then here in this diagram, 82 82 00:03:43,330 --> 00:03:46,150 you also see that we have some other properties, 83 83 00:03:46,150 --> 00:03:47,970 like the ID and date. 84 84 00:03:47,970 --> 00:03:49,430 But we will see why, 85 85 00:03:49,430 --> 00:03:51,830 once we start implementing the code. 86 86 00:03:51,830 --> 00:03:55,453 And yeah, that's actually it for the data. 87 87 00:03:56,320 --> 00:03:58,310 So this kind of diagram is something 88 88 00:03:58,310 --> 00:03:59,660 that you will commonly see 89 89 00:03:59,660 --> 00:04:02,940 when working in object oriented programming. 90 90 00:04:02,940 --> 00:04:07,160 So usually each class is represented by a box like this, 91 91 00:04:07,160 --> 00:04:08,300 where in the top part, 92 92 00:04:08,300 --> 00:04:09,940 you're gonna have the properties 93 93 00:04:09,940 --> 00:04:12,770 and in the bottom part, the methods. 94 94 00:04:12,770 --> 00:04:14,320 And of course, each class here 95 95 00:04:14,320 --> 00:04:17,410 will have more than just the constructor method. 96 96 00:04:17,410 --> 00:04:20,690 And so that's why I have these three dots there. 97 97 00:04:20,690 --> 00:04:22,790 All right, so for now, 98 98 00:04:22,790 --> 00:04:23,830 that's all we need to know 99 99 00:04:23,830 --> 00:04:27,370 about the architecture of our data. 100 100 00:04:27,370 --> 00:04:30,076 But now about the rest of the Architecture, 101 101 00:04:30,076 --> 00:04:33,060 it's gonna be more about structuring the code 102 102 00:04:33,060 --> 00:04:36,260 that we already have from the previous lectures. 103 103 00:04:36,260 --> 00:04:38,580 And the events that we already have 104 104 00:04:38,580 --> 00:04:41,010 are the loading of the page, 105 105 00:04:41,010 --> 00:04:45,730 then receiving a position from the Geolocation API. 106 106 00:04:45,730 --> 00:04:48,950 So this one isn't an event in the traditional sense. 107 107 00:04:48,950 --> 00:04:51,740 So we're not handling it with Add Event Listener, 108 108 00:04:51,740 --> 00:04:54,850 but we can still classify it as an event. 109 109 00:04:54,850 --> 00:04:56,990 Then we have to click on the map. 110 110 00:04:56,990 --> 00:05:01,040 We have changing the input from Cycling to Running, 111 111 00:05:01,040 --> 00:05:04,010 or from Running to Cycling, remember, 112 112 00:05:04,010 --> 00:05:08,020 and then we also have the event of submitting a form. 113 113 00:05:08,020 --> 00:05:09,730 And so all we have to do now 114 114 00:05:09,730 --> 00:05:11,590 is to create different functions 115 115 00:05:11,590 --> 00:05:14,590 that will handle these different events. 116 116 00:05:14,590 --> 00:05:17,040 And in fact, what we are gonna do 117 117 00:05:17,040 --> 00:05:19,990 is to create a big class called App 118 118 00:05:19,990 --> 00:05:24,530 that will basically hold all of these functions as methods. 119 119 00:05:24,530 --> 00:05:28,510 So from a quick look at this application class diagram, 120 120 00:05:28,510 --> 00:05:31,250 we can immediately see that loading the page 121 121 00:05:31,250 --> 00:05:34,370 will of course trigger the constructor of the object 122 122 00:05:34,370 --> 00:05:37,310 that we're gonna create through this class. 123 123 00:05:37,310 --> 00:05:39,850 Okay, and so then right at the beginning, 124 124 00:05:39,850 --> 00:05:41,600 we want to get the current position 125 125 00:05:41,600 --> 00:05:45,260 of the user using the Geolocation API. 126 126 00:05:45,260 --> 00:05:47,150 And so that's why there is that arrow 127 127 00:05:47,150 --> 00:05:50,520 pointing from constructor to Get Position. 128 128 00:05:50,520 --> 00:05:52,550 Then as we receive that position, 129 129 00:05:52,550 --> 00:05:56,240 we want to load the map based on that position. 130 130 00:05:56,240 --> 00:06:00,280 And so therefore, we're gonna have a method called Load Map. 131 131 00:06:00,280 --> 00:06:01,610 Then as we click on the map, 132 132 00:06:01,610 --> 00:06:04,210 we want a method called Show Form. 133 133 00:06:04,210 --> 00:06:05,970 Then as we change the input, 134 134 00:06:05,970 --> 00:06:09,850 we want a method called Toggle Elevation Field. 135 135 00:06:09,850 --> 00:06:12,700 And then, and probably the most important one 136 136 00:06:12,700 --> 00:06:15,540 is the event of submitting the form. 137 137 00:06:15,540 --> 00:06:17,280 And this new workout method 138 138 00:06:17,280 --> 00:06:20,850 will basically be the heart of this entire class, 139 139 00:06:20,850 --> 00:06:24,350 because this is the one that will create new Running objects 140 140 00:06:24,350 --> 00:06:26,720 or new Cycling objects. 141 141 00:06:26,720 --> 00:06:30,600 And of course, these objects will be built based on the data 142 142 00:06:30,600 --> 00:06:33,260 that's coming in from the form. 143 143 00:06:33,260 --> 00:06:37,240 And as the user keeps adding Running, or Cycling workouts, 144 144 00:06:37,240 --> 00:06:40,371 a new object will be created for each of the workouts. 145 145 00:06:40,371 --> 00:06:44,510 And each of them will then be stored in a Workouts Array, 146 146 00:06:44,510 --> 00:06:48,470 which will basically hold all of these objects. 147 147 00:06:48,470 --> 00:06:52,780 Alright, so this is gonna be an important class property 148 148 00:06:52,780 --> 00:06:54,590 that all methods of the class 149 149 00:06:54,590 --> 00:06:58,580 will then be able to use to work with the workouts. 150 150 00:06:58,580 --> 00:07:00,670 And so with this structure here, 151 151 00:07:00,670 --> 00:07:02,700 we have everything that is related 152 152 00:07:02,700 --> 00:07:05,140 to building the application itself, 153 153 00:07:05,140 --> 00:07:08,430 organized into one neat block of data 154 154 00:07:08,430 --> 00:07:09,833 and functionality. 155 155 00:07:10,700 --> 00:07:12,680 And actually, having a class 156 156 00:07:12,680 --> 00:07:14,150 that contains all the data 157 157 00:07:14,150 --> 00:07:16,570 and methods about the application, 158 158 00:07:16,570 --> 00:07:20,670 like we have here is a pretty common thing that you will see 159 159 00:07:20,670 --> 00:07:24,550 in simple JavaScript applications like this one. 160 160 00:07:24,550 --> 00:07:27,640 Now, if the application was a bit more complex, 161 161 00:07:27,640 --> 00:07:30,660 then we could divide this Architecture even further 162 162 00:07:30,660 --> 00:07:32,030 and create one class 163 163 00:07:32,030 --> 00:07:35,250 that would only be concerned with the user interface 164 164 00:07:35,250 --> 00:07:38,900 and one class for the so called Business Logic. 165 165 00:07:38,900 --> 00:07:40,390 So basically, the logic 166 166 00:07:40,390 --> 00:07:43,120 that works only with the underlying data. 167 167 00:07:43,120 --> 00:07:47,170 But in this case, we can just keep it simple like this. 168 168 00:07:47,170 --> 00:07:49,000 And so as I mentioned before, 169 169 00:07:49,000 --> 00:07:52,220 this Architecture will then allow us to have everything 170 170 00:07:52,220 --> 00:07:55,090 that is about the application in one nice, 171 171 00:07:55,090 --> 00:07:56,870 self contained block. 172 172 00:07:56,870 --> 00:07:59,093 And besides the application itself, 173 173 00:07:59,093 --> 00:08:01,730 we then also have these classes 174 174 00:08:01,730 --> 00:08:04,510 that are only concerned about the data. 175 175 00:08:04,510 --> 00:08:06,920 And so therefore, application and data 176 176 00:08:06,920 --> 00:08:11,520 will be nicely separated in a very logical way, I believe. 177 177 00:08:11,520 --> 00:08:13,830 Now, What's also great about this 178 178 00:08:13,830 --> 00:08:17,590 is that we will be able to protect all of these methods, 179 179 00:08:17,590 --> 00:08:19,930 so that they are nicely encapsulated 180 180 00:08:19,930 --> 00:08:23,790 and not accessible from everywhere else in the code. 181 181 00:08:23,790 --> 00:08:25,630 So that's the reason why you see these 182 182 00:08:25,630 --> 00:08:29,040 underscores on all of the method names. 183 183 00:08:29,040 --> 00:08:31,930 Right, so that is, again, the convention 184 184 00:08:31,930 --> 00:08:34,800 that we can use to protect method names 185 185 00:08:34,800 --> 00:08:38,290 from being changed and used from the outside. 186 186 00:08:38,290 --> 00:08:41,620 And so this will make the code a lot easier to work with 187 187 00:08:41,620 --> 00:08:43,600 because we will know for sure 188 188 00:08:43,600 --> 00:08:47,810 that no place else in the code is working with the data. 189 189 00:08:47,810 --> 00:08:51,770 And yeah, calling any of the methods here. 190 190 00:08:51,770 --> 00:08:53,910 And trust me with experience, 191 191 00:08:53,910 --> 00:08:58,040 you will really start to appreciate these kinds of things. 192 192 00:08:58,040 --> 00:09:00,200 Now right, but anyway, 193 193 00:09:00,200 --> 00:09:03,370 this is the initial approach for Architecture 194 194 00:09:03,370 --> 00:09:05,130 that we're now gonna implement. 195 195 00:09:05,130 --> 00:09:07,150 And of course, based on the code 196 196 00:09:07,150 --> 00:09:08,830 that we already have. 197 197 00:09:08,830 --> 00:09:10,510 We will keep adding more methods 198 198 00:09:10,510 --> 00:09:12,510 and properties as we go 199 199 00:09:12,510 --> 00:09:16,310 but this is already an excellent starting point. 200 200 00:09:16,310 --> 00:09:18,590 So maybe take another minute or two, 201 201 00:09:18,590 --> 00:09:20,410 to study this diagram. 202 202 00:09:20,410 --> 00:09:21,980 And then in the next video, 203 203 00:09:21,980 --> 00:09:25,673 we will refactor our code to fit this Architecture. 17609