Original subtitles

1 1

Let's start this section by understanding 2

2

what asynchronous JavaScript actually is, 3

3

and also learn about the most popular use cases 4

4

of asynchronous JavaScript, 5

5

which is basically to make so-called Ajax calls to APIs. 6

6

Now, to understand 7

7

what asynchronous JavaScript code actually is, 8

8

we first need to understand what synchronous code is. 9

9

So basically the opposite of asynchronous. 10

10

So most of the codes 11

11

that we've been writing so far in the course 12

12

has been synchronous code, 13

13

and synchronous simply means 14

14

that the code is executed line by line, 15

15

in the exact order of execution 16

16

that we defined in our code, 17

17

just like in this small example. 18

18

So as the first line of code is reached in the execution, 19

19

it is simply executed in the execution of thread. 20

20

Now don't worry about this execution of thread. 21

21

It's not important here, 22

22

it's just to make a point of synchronous 23

23

versus asynchronous code, 24

24

as you will see in the next slide. 25

25

All you need to know is that the execution of thread 26

26

is part of the execution context, 27

27

which does actually execute the code 28

28

in the computer's processor. 29

29

But anyway, then the next line of code is executed 30

30

and then the next one, all in sequence. 31

31

So each line of code always waits 32

32

for the previous line to finish execution. 33

33

Now this can create problems when one line of code 34

34

takes a long time to run. 35

35

For example, in this current line of code, 36

36

we have an alert statement, 37

37

which creates this alert window. 38

38

Now, as we've experienced in the past, 39

39

this alert window will block the code execution, right? 40

40

So nothing will happen on the page 41

41

until we click that OK Button. 42

42

And only then, 43

43

the code can continue executing. 44

44

And so the alert statement is a perfect example 45

45

of a long running operation, 46

46

which blocks execution of the code. 47

47

So again, only after we click Okay, 48

48

the window disappears 49

49

and the next line can run. 50

50

So this is hopefully a nice illustration 51

51

of the problem with synchronous code. 52

52

Now, most of the time synchronous code is fine 53

53

and makes perfect sense. 54

54

But imagine that execution would have to wait 55

55

for example, for a five second timer to finish. 56

56

That would just be terrible, right? 57

57

Because meanwhile, 58

58

nothing on the page would work 59

59

during these five seconds. 60

60

And so that's where asynchronous code 61

61

comes into play. 62

62

So this example contains the five-second timer 63

63

that I just mentioned. 64

64

And if you want, 65

65

you can pause the video here for a minute 66

66

and analyze this code before we move on. 67

67

Now, anyway, the first line of code 68

68

is still synchronous here, 69

69

and we also move to the second line 70

70

in a synchronous way. 71

71

But here we encountered the set timeout function, 72

72

which will basically start a timer in an asynchronous way. 73

73

So this means that the timer 74

74

will essentially run in the background 75

75

without preventing the main code from executing. 76

76

We also register a callback function, 77

77

which will not be executed now, 78

78

but only after the timer has finished running. 79

79

And we have actually already done this many times 80

80

before in practice, right? 81

81

Now this callback function 82

82

that I just mentioned is asynchronous JavaScript. 83

83

And it is asynchronous 84

84

because it's only going to be executed after a task 85

85

that is running in the background finishes execution. 86

86

And in this case, that is the timer. 87

87

So this callback that we just talked about is registered, 88

88

and then we immediately move on to the next line. 89

89

So the main code is not being blocked 90

90

and execution does not wait for the asynchronous timer 91

91

to finish its work. 92

92

And that's the big difference between synchronous 93

93

and asynchronous code. 94

94

So previously we had to wait for the user to click 95

95

on the alert window to continue execution. 96

96

And again, that's because 97

97

alert is blocking synchronous code, 98

98

but now with this timer, 99

99

the callback is actually asynchronous. 100

100

And so it's only going to be executed 101

101

after the timer has finished. 102

102

And so therefore we say, 103

103

that it's non-blocking 104

104

because in the meantime, 105

105

the rest of the code can keep running normally. 106

106

Now, when the timer finally finishes after five seconds, 107

107

the callback function will finally be executed as well. 108

108

So you'll see that this callback 109

109

runs after all the other code, 110

110

even though in the code, 111

111

it doesn't appear at the end. 112

112

And so basically an action was deferred 113

113

into the future here 114

114

in order to make the code non-blocking. 115

115

And actually we already saw this behavior happening before 116

116

when we first learned about timers, 117

117

we just didn't know that this is called asynchronous 118

118

and non-blocking code. 119

119

So in summary, asynchronous programming 120

120

is all about coordinating 121

121

the behavior of our program 122

122

over a certain period of time. 123

123

And this is essential to understand. 124

124

So asynchronous literally means 125

125

not occurring at the same time. 126

126

And so that's what asynchronous programming is all about. 127

127

All right. 128

128

Now, as we saw in this example, 129

129

we need a callback function to implement 130

130

this asynchronous behavior, right? 131

131

However, that does not mean that callback functions 132

132

automatically make code asynchronous. 133

133

That is just not the case, okay? 134

134

For example, the Array map method 135

135

accepts a callback function as well, 136

136

but that doesn't make the code asynchronous. 137

137

Only certain functions such as set timeout 138

138

work in an asynchronous way. 139

139

We just have to know which ones do 140

140

and which ones don't, okay? 141

141

But please understand this very important fact 142

142

that callback functions alone 143

143

do not make code asynchronous, 144

144

that's essential to keep in mind. 145

145

But anyway, in order to really understand this, 146

146

let's see another example. 147

147

So this example is about loading an image. 148

148

So the first two lines run in a synchronous way, 149

149

one after the other. 150

150

Now in the second line, 151

151

we set the source attribute of the image 152

152

that we selected in the first line. 153

153

And this operation is actually asynchronous. 154

154

So setting the source attribute of any image 155

155

is essentially loading an image in the background 156

156

while the rest of the code can keep running. 157

157

And this makes sense, right? 158

158

Imagine that it's a huge image, 159

159

we wouldn't want our entire code 160

160

to wait for the image to load. 161

161

And that's why setting the source attribute 162

162

was implemented in JavaScript 163

163

in an asynchronous way. 164

164

Now, once the image has finished loading, 165

165

a load event will automatically be emitted by JavaScript. 166

166

And so we can then listen for that event 167

167

in order to act on it. 168

168

Listening for the load event 169

169

is exactly what we do here 170

170

in the next line as well. 171

171

So here we use add event listener 172

172

and to register a callback function 173

173

for the load event. 174

174

So just like in the previous example, 175

175

we provide a callback function that will be executed 176

176

once the image has been loaded 177

177

and not right away, 178

178

because again, all this code is non-blocking. 179

179

So instead of blocking, 180

180

execution moves on right 181

181

to the next line immediately. 182

182

Then once the image is completely loaded, 183

183

it's displayed on the webpage 184

184

and the load event is admitted. 185

185

And since we're listening for that event, 186

186

our callback function is finally executed. 187

187

So once more, 188

188

we deferred an action into the future 189

189

making the code asynchronous and non-blocking. 190

190

All right. 191

191

And so now at this point, 192

192

I believe that you have a pretty good understanding 193

193

of asynchronous code. 194

194

There's just one more important thing 195

195

that I need to mention 196

196

which is the fact that event listeners alone 197

197

do not make code asynchronous, 198

198

just like callback functions alone, 199

199

do also not make code asynchronous. 200

200

For example, an event listener 201

201

listening for a click on a button 202

202

is not doing any work in the background. 203

203

It's simply waiting for a click to happen, 204

204

but it's not doing anything. 205

205

And so there is no asynchronous behavior involved at all. 206

206

Now what makes this code example asynchronous 207

207

is simply the fact that the image 208

208

is loading asynchronously in the background, 209

209

but not the fact that we are listening 210

210

for the load events to happen. 211

211

So what matters is the asynchronous behavior of a task, 212

212

like running a timer 213

213

or loading an image. 214

214

And there are more examples 215

215

of asynchronous behavior in JavaScript 216

216

like the Geolocation API that we used before, 217

217

or Ajax calls. 218

218

And Ajax calls are probably the most important use case 219

219

of asynchronous JavaScript. 220

220

And so let's see what Ajax is all about. 221

221

So Ajax stands for asynchronous JavaScript and XML, 222

222

and basically it allows us to communicate 223

223

with remote web servers in an asynchronous way. 224

224

Now in practice, 225

225

we make Ajax calls in our code 226

226

in order to request some data 227

227

from a web server dynamically. 228

228

So without reloading the page 229

229

so that we can use that data in our application dynamically. 230

230

For example, right in the next video, 231

231

we're going to make Ajax calls 232

232

to request data about countries. 233

233

And we can then use that data about countries 234

234

to build a small application 235

235

that shows us information about the country 236

236

that we're currently in. 237

237

And the possibilities and use cases are endless, 238

238

but more about that in the next slide. 239

239

For now, let's quickly understand how Ajax works. 240

240

So let's say that we have our JavaScript application 241

241

running in the browser, 242

242

which is also called the Client. 243

243

And we want the application to get some data 244

244

from a web server. 245

245

And let's say the data about countries 246

246

that I was talking about earlier. 247

247

So with Ajax, 248

248

we can do an HTTP request to the server, 249

249

which has this data. 250

250

And the server will then set back a response 251

251

containing that data that we requested. 252

252

And this back and forth between Client and server 253

253

all happens asynchronously in the background, 254

254

just the way we learned before. 255

255

And there can even be different types of requests, 256

256

like get requests to receive data 257

257

or post requests to send data to a server. 258

258

But there is a whole lecture about this a bit later 259

259

to really show you how it all works in detail. 260

260

Now, when we're asking a server to send us some data, 261

261

this server usually contains a web API. 262

262

And this API is the one that has the data 263

263

that we're asking for. 264

264

So an API is something pretty important, 265

265

and so let's now see what an API 266

266

and web APIs actually are. 267

267

So first of all, 268

268

API stands for Application Programming Interface. 269

269

Now in general terms, 270

270

and on the very high level of obstruction, 271

271

an API is basically a piece of software 272

272

that can be used by another piece of software 273

273

in order to basically allow applications 274

274

to talk to each other 275

275

and exchange information. 276

276

And that's true not only for web development and JavaScript, 277

277

but for programming in general. 278

278

Now in JavaScript and web development, 279

279

there are countless types of APIs, 280

280

like the DOM API 281

281

or the Geolocation API 282

282

that we have been using. 283

283

So these are called APIs 284

284

because they are a self-contained piece of software 285

285

that allow other pieces of software 286

286

to interact with them. 287

287

For example, our Mapty application 288

288

that we built in the previous section. 289

289

Also, we can always implement 290

290

a small and simple API in a class 291

291

where we make some methods available 292

292

as a public interface. 293

293

Remember? 294

294

So again, objects made from a class 295

295

can be seen as self-contained 296

296

encapsulated pieces of software 297

297

that other pieces of software can interact with. 298

298

And so that fits the definition of API, right? 299

299

But now let's talk about the important type of API 300

300

that we are actually interested in 301

301

when we use Ajax. 302

302

And that are APIs 303

303

that I like to call Online APIs. 304

304

So an online API 305

305

is essentially an application running on a web server, 306

306

which receives requests for data, 307

307

then retrieves this data from some database 308

308

and then sends it back to the client. 309

309

So just as we saw in the last slide, right? 310

310

Now, when building applications in practice, 311

311

we simply call these online APIs, API, 312

312

and many people will also call these APIs, Web APIs, 313

313

or again, just simply API. 314

314

So the term Online API is actually a term 315

315

that I came up with myself 316

316

because the term Web API 317

317

is actually also used for other things. 318

318

Now, of course we can build or own Online APIs, 319

319

but that requires back-end development. 320

320

So development with servers and databases 321

321

and all that. 322

322

And this is something really interesting 323

323

that you can learn after this course, 324

324

and I actually have a course on Node.js myself, 325

325

that you can check out if you're interested. 326

326

But anyway, for now, 327

327

we are interested in using 3rd-party APIs. 328

328

So APIs that other developers make available for us 329

329

most of the times for free. 330

330

So let's now imagine 331

331

that you're building a traveling application, 332

332

and you have a database with different destinations 333

333

and tours that you're offering. 334

334

So on your own server, 335

335

you could build your own API 336

336

that can receive requests 337

337

from your front end application in JavaScript 338

338

and send back the results. 339

339

So that would be your own API 340

340

hosted on your own server. 341

341

But that alone would probably not be enough 342

342

to build a complete application. 343

343

And so you could also use some 3rd-party APIs. 344

344

And there are really APIs for everything. 345

345

So in our example, travel application, 346

346

you could use an API 347

347

to get weather data in your destinations, 348

348

data about the destination countries themselves, 349

349

data about flights, 350

350

about currency conversion. 351

351

And you could even use APIs 352

352

to send emails or text messages 353

353

or embed Google maps into your applications. 354

354

So as you see, 355

355

the possibilities are really endless with APIs, 356

356

and we can even say that APIs 357

357

is what made the modern web as you know it 358

358

possibly in the first place. 359

359

So using APIs in JavaScript is super popular 360

360

and everyone does it all the time, 361

361

and so that's why I'm explaining you all these details. 362

362

Okay. 363

363

But now just to finish, 364

364

let's quickly talk about API data formats. 365

365

So Ajax stands for asynchronous JavaScript and XML. 366

366

Remember? 367

367

So the X there stands for XML 368

368

and XML is a data format, 369

369

which used to be widely used 370

370

to transmit data on the web. 371

371

However, these days 372

372

basically no API uses XML data anymore. 373

373

The term Ajax is just an old name 374

374

that got very popular back in the day, 375

375

and so it's still used today, 376

376

even though we don't use XML anymore. 377

377

So instead, most APIs these days 378

378

use the JSON data format. 379

379

So JSON is the most popular data format today 380

380

because it's basically just a JavaScript object, 381

381

but converted to a string. 382

382

And so therefore, 383

383

it's very easy to send across the web 384

384

and also to use in JavaScript 385

385

once the data arrives. 386

386

All right. 387

387

So, now that we know what asynchronous JavaScript is, 388

388

and also what Ajax and APIs are, 389

389

let's finally use all this in practice 390

390

and make our very first Ajax call 391

391

in the next video.