Original subtitles

1 1

(instructor)So before we continue 2

2

any further in our project, 3

3

we should now think a little bit 4

4

about our project Architecture. 5

5

Now, there are some quite advanced 6

6

architecture patterns in JavaScript. 7

7

And we will actually talk a little bit about this 8

8

by the end of the course. 9

9

But in this small project, 10

10

we will simply use object oriented programming with classes, 11

11

just like we learned in the last section. 12

12

And so this way, 13

13

you can then use these concepts here in a real project. 14

14

And remember that Architecture is all about 15

15

giving the project a structure. 16

16

And so in that structure, 17

17

we can then develop the functionality. 18

18

And so in this project, 19

19

I decided that the main structure 20

20

will come from classes and objects. 21

21

All right, so let's now dig a little bit deeper 22

22

into this Architecture that we gonna use. 23

23

So to start, one of the most important aspects 24

24

of any Architecture, 25

25

is to decide where and how to store the data. 26

26

Because data is probably 27

27

the most fundamental part of any application. 28

28

Because without data, it doesn't even make sense 29

29

to have an application in the first place. 30

30

Right, what would the application be about, 31

31

if not about some sort of data. 32

32

Now, in this case, the data that we need to store 33

33

and to manage comes directly from the user stories. 34

34

So right in the first user story, 35

35

we can already see that we will somehow 36

36

need to store the location, distance, 37

37

time, pace, and steps per minute. 38

38

And to fit the second user story, 39

39

we will have to implement basically the same data. 40

40

So again, location, distance, time and speed 41

41

but then also the elevation gain 42

42

instead of the steps per minute. 43

43

And so we will design our classes, 44

44

so that they can create objects 45

45

that will hold this kind of data. 46

46

And I believe that this is the best way 47

47

of designing the classes to really fit all user stories. 48

48

So you see that we are gonna have a big parent class, 49

49

which will be called Workout. 50

50

And so this one is gonna hold 51

51

the distance duration in coordinates. 52

52

And then we will have a more specific class for the running, 53

53

which will hold the cadence and the pace. 54

54

All right, and the reason why the classes 55

55

are designed like this is 56

56

because the distance duration 57

57

and coordinates are common 58

58

to both of the types of activities. 59

59

So both to Running and to Cycling 60

60

and so therefore they are in the Parent Class. 61

61

All right, and the same will also be true for some methods. 62

62

And so we will see that once we implement it. 63

63

And then for each type of activities, 64

64

as you see, we have one child class, 65

65

so that each child class can hold the data 66

66

and methods that are specific to that type of activity. 67

67

So I hope that makes sense 68

68

and this is the whole reason 69

69

why inheritance basically actually exists. 70

70

So that we can have more specific classes 71

71

that can inherited behavior 72

72

and common properties that are 73

73

common to all the child classes. 74

74

So the cadence and pace are specific for Running 75

75

and then the elevation gain and speed 76

76

are specific to the Cycling. 77

77

Okay, but once again, the Cycling also has 78

78

distance, duration, and coordinates. 79

79

And so that's why they are there in the parent class, 80

80

so in the workout class, 81

81

then here in this diagram, 82

82

you also see that we have some other properties, 83

83

like the ID and date. 84

84

But we will see why, 85

85

once we start implementing the code. 86

86

And yeah, that's actually it for the data. 87

87

So this kind of diagram is something 88

88

that you will commonly see 89

89

when working in object oriented programming. 90

90

So usually each class is represented by a box like this, 91

91

where in the top part, 92

92

you're gonna have the properties 93

93

and in the bottom part, the methods. 94

94

And of course, each class here 95

95

will have more than just the constructor method. 96

96

And so that's why I have these three dots there. 97

97

All right, so for now, 98

98

that's all we need to know 99

99

about the architecture of our data. 100

100

But now about the rest of the Architecture, 101

101

it's gonna be more about structuring the code 102

102

that we already have from the previous lectures. 103

103

And the events that we already have 104

104

are the loading of the page, 105

105

then receiving a position from the Geolocation API. 106

106

So this one isn't an event in the traditional sense. 107

107

So we're not handling it with Add Event Listener, 108

108

but we can still classify it as an event. 109

109

Then we have to click on the map. 110

110

We have changing the input from Cycling to Running, 111

111

or from Running to Cycling, remember, 112

112

and then we also have the event of submitting a form. 113

113

And so all we have to do now 114

114

is to create different functions 115

115

that will handle these different events. 116

116

And in fact, what we are gonna do 117

117

is to create a big class called App 118

118

that will basically hold all of these functions as methods. 119

119

So from a quick look at this application class diagram, 120

120

we can immediately see that loading the page 121

121

will of course trigger the constructor of the object 122

122

that we're gonna create through this class. 123

123

Okay, and so then right at the beginning, 124

124

we want to get the current position 125

125

of the user using the Geolocation API. 126

126

And so that's why there is that arrow 127

127

pointing from constructor to Get Position. 128

128

Then as we receive that position, 129

129

we want to load the map based on that position. 130

130

And so therefore, we're gonna have a method called Load Map. 131

131

Then as we click on the map, 132

132

we want a method called Show Form. 133

133

Then as we change the input, 134

134

we want a method called Toggle Elevation Field. 135

135

And then, and probably the most important one 136

136

is the event of submitting the form. 137

137

And this new workout method 138

138

will basically be the heart of this entire class, 139

139

because this is the one that will create new Running objects 140

140

or new Cycling objects. 141

141

And of course, these objects will be built based on the data 142

142

that's coming in from the form. 143

143

And as the user keeps adding Running, or Cycling workouts, 144

144

a new object will be created for each of the workouts. 145

145

And each of them will then be stored in a Workouts Array, 146

146

which will basically hold all of these objects. 147

147

Alright, so this is gonna be an important class property 148

148

that all methods of the class 149

149

will then be able to use to work with the workouts. 150

150

And so with this structure here, 151

151

we have everything that is related 152

152

to building the application itself, 153

153

organized into one neat block of data 154

154

and functionality. 155

155

And actually, having a class 156

156

that contains all the data 157

157

and methods about the application, 158

158

like we have here is a pretty common thing that you will see 159

159

in simple JavaScript applications like this one. 160

160

Now, if the application was a bit more complex, 161

161

then we could divide this Architecture even further 162

162

and create one class 163

163

that would only be concerned with the user interface 164

164

and one class for the so called Business Logic. 165

165

So basically, the logic 166

166

that works only with the underlying data. 167

167

But in this case, we can just keep it simple like this. 168

168

And so as I mentioned before, 169

169

this Architecture will then allow us to have everything 170

170

that is about the application in one nice, 171

171

self contained block. 172

172

And besides the application itself, 173

173

we then also have these classes 174

174

that are only concerned about the data. 175

175

And so therefore, application and data 176

176

will be nicely separated in a very logical way, I believe. 177

177

Now, What's also great about this 178

178

is that we will be able to protect all of these methods, 179

179

so that they are nicely encapsulated 180

180

and not accessible from everywhere else in the code. 181

181

So that's the reason why you see these 182

182

underscores on all of the method names. 183

183

Right, so that is, again, the convention 184

184

that we can use to protect method names 185

185

from being changed and used from the outside. 186

186

And so this will make the code a lot easier to work with 187

187

because we will know for sure 188

188

that no place else in the code is working with the data. 189

189

And yeah, calling any of the methods here. 190

190

And trust me with experience, 191

191

you will really start to appreciate these kinds of things. 192

192

Now right, but anyway, 193

193

this is the initial approach for Architecture 194

194

that we're now gonna implement. 195

195

And of course, based on the code 196

196

that we already have. 197

197

We will keep adding more methods 198

198

and properties as we go 199

199

but this is already an excellent starting point. 200

200

So maybe take another minute or two, 201

201

to study this diagram. 202

202

And then in the next video, 203

203

we will refactor our code to fit this Architecture.