Original subtitles

1 1

Welcome back 2

2

and let's now implement the architecture 3

3

that we just discussed in the previous lecture. 4

4

And so, let's start by implementing that App class 5

5

that I just showed you previously. 6

6

And actually, I also have this architecture diagram 7

7

right here, and it is this one called part one. 8

8

And so as you see, this is exactly 9

9

what we just discussed before. 10

10

And so I will now go ahead and start to implement 11

11

this class here and all of these methods. 12

12

All right. 13

13

So class App, 14

14

and then we need the constructor, 15

15

which for now I'm gonna leave empty here. 16

16

Then we need getPosition, 17

17

Next we need loadMap, 18

18

let's take a look at what's next here. 19

19

Then we have showForm toggleElevationField, 20

20

and newWorkout. 21

21

So, showForm, 22

22

toggleElevationField, 23

23

and finally newWorkout, okay. 24

24

And so now, we have this structure 25

25

where we can put our code that we already have. 26

26

So let's start with this one here. 27

27

So getting the user's current position using geolocation 28

28

and so I'm gonna start by taking all of this code here. 29

29

So, it ends here I believe. 30

30

Yap, that's the one, cut it 31

31

and put it here into getPosition. 32

32

But now I actually want to refactor this a little bit better 33

33

because I think it's still a bit messy 34

34

to have this callback function here 35

35

off to get current position function right here, okay. 36

36

And so this function here, so this callback 37

37

of getCurrentPosition is gonna become the loadMap. 38

38

Okay, because that is exactly what we do here in function. 39

39

So let's cut this here 40

40

and put it here in loadMap 41

41

and actually of course we don't need this function keyword 42

42

here because we already called it a loadMap, right? 43

43

So let's just copy the parameter name here 44

44

and put it here and then get rid of these. 45

45

Okay. 46

46

And so now here as the first callback function, 47

47

which is the one for success, so actually here, 48

48

we need to call loadMap. 49

49

And so since we're now in a class, 50

50

we need to say this.loadMap. 51

51

And so in JavaScript, we'll then call 52

52

this callback function here and pass 53

53

in the position argument, as soon as the current position 54

54

of the user is determined, all right? 55

55

And so that event that I just mentioned 56

56

is basically this receive position. 57

57

And as I said, it is not an event in the common sense 58

58

that we used before. 59

59

So one that we hand using addEventListener, 60

60

but we can still think of this as an event. 61

61

All right, and so basically on that event, 62

62

the, this.loadMap method is called. 63

63

Now, here we have some other code, 64

64

So to event list notice, but for now, 65

65

let's actually make this code here work 66

66

because right now of course, none of this will do anything 67

67

to our application, will it? 68

68

And why is that? 69

69

Well, it is because first of all, 70

70

we need to create an actual object out of this class, okay? 71

71

So right now this is all just a plan. 72

72

So like the blueprint of a house, 73

73

but it is not the actual house yet 74

74

and so that analogy is sometimes very helpful. 75

75

So in this case, this is just a theoretical plan 76

76

or for application, but it's not a real object yet. 77

77

And so let's create that down here. 78

78

And so I will again call this app, but lowercase. 79

79

And so this app will be new App like this 80

80

and this application actually does need any arguments. 81

81

And so here in the constructor 82

82

we don't have any parameters in this method, okay. 83

83

Because right now we don't need any inputs 84

84

into our application. 85

85

If we need it then, could add that here to the constructor, 86

86

but in this case, that's just not necessary. 87

87

One example that we could use for inputs 88

88

in an application like this would be for example, 89

89

an object of options, 90

90

which is pretty common in third party libraries. 91

91

So if we were building a library for some other people 92

92

to use, then we could allow these developers to customize 93

93

the library, using some options. 94

94

But again does just not necessary in this case, all right? 95

95

Now in order to actually trigger the geolocation API, 96

96

this method here needs to be called, right? 97

97

But right now dad is not happening. 98

98

So how can we do that? 99

99

We could do this, right? 100

100

So app.getPosition and so then this code here 101

101

would get executed, right at a point 102

102

where the application loads 103

103

and that's because as we already know all the code, 104

104

that's here in the top level scope. 105

105

So out here outside of any function 106

106

will get executed immediately as the script loads, 107

107

all right? 108

108

And so, right in the beginning, 109

109

this new app variable here is created out of the class. 110

110

And then right now, immediately afterwards, 111

111

we would get to the position of the user. 112

112

However, why should we do this out here, 113

113

if we could simply do it inside of the class? 114

114

That would actually be a lot cleaner. 115

115

So inside of the class, we also have a method 116

116

that automatically gets called as the page loads. 117

117

So let's think how we could do this instead. 118

118

So inside of the App class, 119

119

we also have a method that gets executed 120

120

as soon as this app here is created, right? 121

121

And that is the constructor method, remember? 122

122

So this constructor method is called immediately 123

123

when a new object is created from this class 124

124

and this object that is created, 125

125

so this app object is created right in the beginning 126

126

when the page loads down. 127

127

So that means that the constructor is also executed 128

128

immediately as the page loads. 129

129

And so what we can do is to simply getPosition 130

130

in the constructor. 131

131

And so here, all we have to do is to change it 132

132

to the this word, so to the current object 133

133

and that's actually it. 134

134

So our code should actually already be working 135

135

at this point. 136

136

So the current position should be determined 137

137

here in this method and then the loadMap method 138

138

should be called with that current position, right? 139

139

And actually that's exactly what we also have here 140

140

in our diagram. 141

141

So you'll see the load page events will trigger 142

142

the constructor, which will then trigger getPosition. 143

143

And then as soon as we receive the position, 144

144

the loadMap method is called with the position, okay? 145

145

And so let's see if that actually works. 146

146

So here in our version, 147

147

and let's just reload it to manually here, 148

148

and here we go, so here is our map again. 149

149

So our first part of the refactoring is already working. 150

150

So that's great, 151

151

but now let's go back to our code here 152

152

because we still have some things to fix here. 153

153

So remember that right here in the loadMap function, 154

154

we have this global variable here called map. 155

155

I mean, we don't have here, 156

156

we are simply redefining it because it is defined up here 157

157

in the global scope. 158

158

But now, remember that we actually want everything 159

159

that is related to our application. 160

160

And that includes the map right in this App class. 161

161

And so therefore we're now gonna define the map 162

162

and map event as properties of the object. 163

163

And for that, let's actually use a private class field. 164

164

So remember that works like this and so map, 165

165

and now we will not set it to anything. 166

166

So just like this, and then the same for the mapEvent. 167

167

So both of them will now become private instance properties. 168

168

So properties that are gonna be present 169

169

on all the instances created through this class. 170

170

Now let's keep them here for now, in order to not break 171

171

the rest of the application, 172

172

but now we need to fix of course, the rest of this code. 173

173

So at least this load map method, 174

174

because that one relies on map and so therefore 175

175

we need to start using it now. 176

176

So here we now need to actually use this.map, 177

177

because again, this is now like a property that is defined 178

178

on the object itself, 179

179

it's no longer just a normal variable, right? 180

180

And then here the same, this.map 181

181

and here also this.map 182

182

and then here we need to define the mapEvent. 183

183

And so this one, we also called this.#mapEvent. 184

184

Now here, this is just wrong, 185

185

so let's fix that and all right, that's actually it, 186

186

but actually this will not yet work, 187

187

but let me show you the error before I actually fix it. 188

188

So let's go back here and reload this page again, 189

189

and now it should not work. 190

190

And so indeed we get, Cannot set property #map of undefined. 191

191

So on line 38, so that's right here. 192

192

And so if the error message says that we cannot set map 193

193

on the this keyword. 194

194

It means that something must be wrong 195

195

with the this keyword, right? 196

196

So let's use our friend console.log to take a look at it 197

197

and indeed it is undefined here. 198

198

So, why is that? 199

199

Well, this loadMap method is actually called 200

200

by function here, right? 201

201

So that's right here and in fact this is actually treated 202

202

as a regular function call, not as a method call. 203

203

So again, since this is a callback function, 204

204

we are not calling it ourselves. 205

205

It is to getCurrentPosition function that we'll call 206

206

this callback function once that it gets 207

207

the current position of the user. 208

208

And when it calls this method, so this function here, 209

209

then it does so, as a regular function call. 210

210

And as we learned before in a regular function call, 211

211

the this keyword is set to undefined. 212

212

And so that's why in here that this keyword is undefined. 213

213

But fortunately for us, there is a good solution 214

214

that we already know about. 215

215

And that solution is to manually bind the this keyword 216

216

to whatever we need. 217

217

And in this case, that is simply this. 218

218

So right here, this points to the current object. 219

219

All right? 220

220

And so that's exactly the this keyword 221

221

that we also want inside of loadMap. 222

222

And so here we explicitly say that, okay? 223

223

And remember that binds will simply return a new function 224

224

and so all of this here is still a function that JavaScript 225

225

can then call whenever it needs to. 226

226

So that should now work and so if we go back here, 227

227

then our maps should still work as it should. 228

228

And indeed, now we get the this keyword here. 229

229

So we have the map and we have the mapEvent 230

230

and we already see that or map is this big object here 231

231

that is coming from the leaflet library. 232

232

Now, all right. 233

233

So that was the most important thing 234

234

and the biggest thing we had to refactor, 235

235

but now let's quickly also talk about these two event 236

236

listeners that we have down here. 237

237

So the one listening for the event of submitting the form 238

238

and to one of toggling the input type field. 239

239

So basically that's this event here and this one, okay? 240

240

So where do you think these event listeners 241

241

should be located? 242

242

Do you think that they should be outside here? 243

243

So outside of the class. 244

244

Well, that doesn't make a lot of sense, does it? 245

245

So instead, just like before we actually want 246

246

these event listeners, of course, to be set 247

247

right at the beginning, so when a script first loads, 248

248

but again, of course, that should be inside of the class. 249

249

And so what is the method that automatically gets called 250

250

as soon as the script loads? 251

251

At least in this case. 252

252

Well, again, it is the constructor. 253

253

And so, we are gonna attach or event listeners 254

254

to the dumb elements right here in the constructor. 255

255

So, of course now we want to, again refactor this code 256

256

a little bit more and take this function here, 257

257

out of here to basically create its own function 258

258

with this code. 259

259

So that's all of this I believe, yeah. 260

260

And so where should that go? 261

261

Well, it should go here into newWorkout, 262

262

because submitting the form for the newWorkout 263

263

will of course create a new workout 264

264

and so that's what this method here is all about. 265

265

But then here, we also need the event 266

266

so we can preventDefault. 267

267

And then here again, we have the map event and the map, 268

268

so we need the this keyword, 269

269

or actually here we are just logging it to the console. 270

270

So there's no need for this one, 271

271

but here we need this.map like this, all right? 272

272

But now, well, let's actually analyze 273

273

what's gonna happen here. 274

274

So first of all, of course, here we need to replace this one 275

275

and actually call the newWorkout method 276

276

and actually not call it, but just passing it in, right? 277

277

Now, keep in mind that this method here is basically 278

278

an event handler function. 279

279

So it's a function that's gonna be called 280

280

by an event listener. 281

281

Now, do you remember what the this keyword looks like 282

282

inside of an event listener function 283

283

or of an event handler function? 284

284

Well, just to make it really clear, let's take a look at it. 285

285

So let's log the this keyword, now right? 286

286

So again, we need to wait for the map to load 287

287

and now as I click somewhere, then you see, 288

288

we get some error here. 289

289

So that's on line 60 cannot write private member map event. 290

290

Okay, so let's go to line 60 and see what happens there. 291

291

And so that's right here in this event handler function 292

292

of the event listener on clicking on the map. 293

293

So remember this is basically the add event listener 294

294

equivalent from the leaflet library. 295

295

So we need to fix this next, but for now, 296

296

let's go back to the newWorkout method 297

297

that we were working on and so I was trying to take a look 298

298

at the this keyword here, 299

299

but apparently that's not possible for now, 300

300

so let's just remove it here 301

301

and I will just tell you the solution. 302

302

So I was asking you, 303

303

what do you think the this keyword will be like 304

304

in this method now, because this is an event handler 305

305

function and so an event handler function 306

306

will always have the this keyword of the dumb element 307

307

onto which it is attached. 308

308

And so in this case, that's gonna be the form Element. 309

309

So again, inside of this method here, 310

310

the this keyword is gonna point to Form 311

311

and no longer to the App object. 312

312

And so once again, we need to fix that using bind, 313

313

all right? 314

314

And this is actually a real pain point of working 315

315

with event handlers in classes like we are doing right now. 316

316

So even when you're working in the real world 317

317

and you have event listeners inside of a class, 318

318

you will be binding the this keywords all the time 319

319

because otherwise many parts of your code 320

320

are not gonna work. 321

321

So again, in this case, because right 322

322

in this method call, here did this keyword 323

323

will simply point to the Form, 324

324

but that's just not where we want. 325

325

In most of these methods, we want this keyword 326

326

to still point to the object itself. 327

327

So in this case, the app object, 328

328

which is what this is currently pointing to. 329

329

And so here again, we will need to use the bind keyword 330

330

and so this should now work, all right? 331

331

Then we also have this one here to refactor, 332

332

but actually there is another method 333

333

that we want to implement, which is showForm, right? 334

334

And so showForm is basically this code right here. 335

335

So let's just cut it from here. 336

336

then paste that here, all right? 337

337

Now we of course also need this parameter here, now okay. 338

338

And then here we will call this.showForm, 339

339

but now if we run this code, then we will actually 340

340

get the same error that we already saw the last time 341

341

that we inspected our code. 342

342

So the error that we saw previously, when I clicked 343

343

on the map, and so that's gonna be this one. 344

344

And so it says, again, that we cannot write this mapEvent 345

345

property onto this object that we are trying to currently. 346

346

And so once again, the reason for that 347

347

is a incorrectly set this keyword. 348

348

So again, this method here is right now being used 349

349

as an event handler function right here. 350

350

And so just like in regular JavaScript, 351

351

the this keyword in this function here will then be set 352

352

to the object onto which the event handler is attached. 353

353

And so that's gonna be simply the map itself, okay. 354

354

And so here we are trying to write mapEvent on the map. 355

355

So again, the this keyword points to the map 356

356

because this is where we attached the event handler on. 357

357

And so once again, the solution to that is 358

358

to bind the this keywords because the this keyword 359

359

is the App object and so then here, 360

360

this will also be the App object. 361

361

And of course that's where we have the mapEvent property, 362

362

so right here. 363

363

Correct. 364

364

So with that fixed it should now work 365

365

and yeah, it does. 366

366

And so now we can also test the refactoring of the Form 367

367

that we just had before 368

368

and indeed we get an error, but that's not problem 369

369

that is completely normal when we are refactoring. 370

370

So I'm sure we just forgot like a this keyword on line 78. 371

371

So 78, yep that's correct. 372

372

So here, of course we need this.mapEvent like this, 373

373

let's give it another safe and another 374

374

try and to then, we're actually almost done with this video. 375

375

So, beautiful, now it works 376

376

and now all we need to do is to refactor this last piece 377

377

of code that we have in a constructor, because of course, 378

378

we also don't want this function here 379

379

to be right here in the constructor. 380

380

So basically every small piece of functionality 381

381

that is in our application, 382

382

we now want to be its own function. 383

383

So let's take this and for that, 384

384

we have the toggleElevationField method, all right? 385

385

Now this one here actually does not use 386

386

the this keyword anywhere 387

387

and so here, it doesn't matter 388

388

what the this keyword will be like. 389

389

And so therefore we don't have to bind it manually here 390

390

because as I just said, it doesn't really matter. 391

391

ElevationField, all right. 392

392

So now our constructor nicely simply 393

393

gets the currentPosition and then it adds 394

394

these two event listeners to the Form 395

395

and the input type element. 396

396

So that's very nice and clean, 397

397

everything is neatly organized into these methods. 398

398

And so I think this is a really great structure 399

399

that we just created here. 400

400

And now indeed, we no longer need these very ugly 401

401

global variables that we relied on before. 402

402

And now let's just test if this one here is working as well 403

403

and of course it is, all right. 404

404

So great, we successfully implemented or architecture 405

405

at least part of it. 406

406

And so now in the next lecture, we will actually implement 407

407

the rest of the architecture. 408

408

So that's gonna be these other three classes here. 409

409

So I hope to see you there soon.