1
00:00:00,460 --> 00:00:04,510
Let's begin by walking through the example
code we'll be using throughout the course,

2
00:00:04,510 --> 00:00:07,940
and seeing how we can write
an express route using callbacks.

3
00:00:07,940 --> 00:00:11,640
To follow along with me, download the
project files from the link on this page

4
00:00:11,640 --> 00:00:13,990
and open them in your
preferred text editor.

5
00:00:13,990 --> 00:00:17,970
We'll be using a very simple Express
application that retrieves information

6
00:00:17,970 --> 00:00:23,870
about users from a JSON file and
renders it into a main index template.

7
00:00:23,870 --> 00:00:26,990
Or if there's an error,
and error template.

8
00:00:26,990 --> 00:00:30,320
Here's what that looks like in
the browser, and when there's an error.

9
00:00:31,380 --> 00:00:33,490
Open up the app.js file.

10
00:00:33,490 --> 00:00:37,480
Inside, you'll see all the trappings
of a basic Express application,

11
00:00:37,480 --> 00:00:41,610
a function called getUsers,
and an empty Express route.

12
00:00:41,610 --> 00:00:43,408
Let's talk about the getUsers function.

13
00:00:43,408 --> 00:00:48,145
Later we'll re-factor this function so we
can use it with promises and async await.

14
00:00:48,145 --> 00:00:50,930
But right now it's meant
to work with callbacks.

15
00:00:50,930 --> 00:00:53,730
Don't worry about 100%
understanding what it is doing.

16
00:00:53,730 --> 00:00:58,790
The important part is that it retrieves
data from this data.json file for us.

17
00:00:58,790 --> 00:01:02,912
Notice that the getUsers function
takes a callback function.

18
00:01:02,912 --> 00:01:05,710
Once getUsers have retrieved
the data from the file,

19
00:01:05,710 --> 00:01:08,313
it returns a call to this
callback function and

20
00:01:08,313 --> 00:01:12,700
passes to that callback the data
it's retrieved from the file.

21
00:01:12,700 --> 00:01:16,270
Here, we're storing the data
in a variable called users

22
00:01:16,270 --> 00:01:18,930
which we're then passing to the callback.

23
00:01:18,930 --> 00:01:24,050
So we're saying dat.users, once you're
done retrieving the users from the file,

24
00:01:24,050 --> 00:01:29,560
call whatever function we pass to you, and
pass the list of users into that function.

25
00:01:29,560 --> 00:01:32,100
This means that when we call
to getUsers from a function

26
00:01:32,100 --> 00:01:36,930
we can paste in an anonymous function
that will access to our user data.

27
00:01:36,930 --> 00:01:40,460
And we'll be able to work with that
user data inside that function,

28
00:01:40,460 --> 00:01:41,650
let's see how this works.

29
00:01:41,650 --> 00:01:44,730
We'll use the get user's function
inside of our Express route.

30
00:01:46,975 --> 00:01:49,380
Async method is a node
that accepts callbacks,

31
00:01:49,380 --> 00:01:54,300
follow a pattern of passing an error as
the first argument when an error occurs.

32
00:01:54,300 --> 00:01:58,811
Let's pass get users an anonymous
function remembering to define error and

33
00:01:58,811 --> 00:02:00,158
users as parameters.

34
00:02:03,984 --> 00:02:05,094
If there is an error,

35
00:02:05,094 --> 00:02:08,750
we'll render the error page passing
the error to the error template.

36
00:02:16,369 --> 00:02:21,453
If we look at the air template,
we can see that it references

37
00:02:21,453 --> 00:02:28,060
the variable error,
Which is why we're calling it error here.

38
00:02:29,600 --> 00:02:33,733
Else, if everything goes as expected
we'll render the index page.

39
00:02:38,471 --> 00:02:40,608
Let's also give the template a title.

40
00:02:46,685 --> 00:02:50,120
Last, we'll need to provide
the template our user data.

41
00:02:50,120 --> 00:02:52,980
If we look at the index page,
it references users, so

42
00:02:52,980 --> 00:02:55,150
that's what we'll name the property.

43
00:02:57,740 --> 00:03:01,880
And for
the value we'll reference users.users.

44
00:03:01,880 --> 00:03:06,270
Remember, here users represents the data
that get users has retrieved and

45
00:03:06,270 --> 00:03:08,550
passed to us via this callback function.

46
00:03:10,380 --> 00:03:14,520
If we take a look at data.json again,
you'll see we need to drill down a little

47
00:03:14,520 --> 00:03:18,580
farther to access the user's array,
through the property users.

48
00:03:18,580 --> 00:03:24,290
Hence, the information we're looking for
is available via users.users.

49
00:03:24,290 --> 00:03:25,840
Let's save and test this out.

50
00:03:27,160 --> 00:03:30,640
Open your terminal, if you're using
VS Code, you can open a terminal right in

51
00:03:30,640 --> 00:03:37,010
your text editor using the shortcut Ctrl+`
or choosing Terminal > New Terminal.

52
00:03:37,010 --> 00:03:41,310
Don't forget to run npm install to install
the project dependencies first, and

53
00:03:41,310 --> 00:03:44,230
type npm start to start up the server.

54
00:03:44,230 --> 00:03:48,076
My server is already running, so that's
fine, let's look at this in a browser.

55
00:03:50,499 --> 00:03:54,020
And you should see all the user
data displayed in the template.

56
00:03:54,020 --> 00:03:56,890
You might be saying,
well, this seems fine.

57
00:03:56,890 --> 00:03:59,740
It's only a few lines of code,
what's the big deal?

58
00:03:59,740 --> 00:04:02,620
Let's take a look at an example of
what this approach might look like

59
00:04:02,620 --> 00:04:05,960
if we wanted to perform
more asynchronous actions.

60
00:04:05,960 --> 00:04:08,450
Say we wanted to find a specific user and

61
00:04:08,450 --> 00:04:12,310
then find that user's followers,
perhaps for a social media app.

62
00:04:12,310 --> 00:04:14,347
We won't actually write this function, but

63
00:04:14,347 --> 00:04:16,448
here's an example of
what it might look like.

64
00:04:18,882 --> 00:04:22,300
As you can see we're only
performing two actions.

65
00:04:22,300 --> 00:04:25,310
And things are already starting
to get messy, with functions,

66
00:04:25,310 --> 00:04:29,190
nested in functions, and
repetitive error handling.

67
00:04:29,190 --> 00:04:31,910
This is affectionately known
in the JavaScript community

68
00:04:31,910 --> 00:04:34,730
as the pyramid of doom or callback hell.

69
00:04:34,730 --> 00:04:37,880
A lot of these nesting issues
were solved by promises, and

70
00:04:37,880 --> 00:04:41,660
improved upon even further
with async await syntax.

71
00:04:41,660 --> 00:04:44,760
I'll go ahead and delete this route as
we won't be using it in the course, but

72
00:04:44,760 --> 00:04:47,940
you can find this code in
the teacher's notes of this video.

73
00:04:47,940 --> 00:04:51,600
Also be sure to check the teacher's
notes of each video going forward

74
00:04:51,600 --> 00:04:55,764
to see this code example refactored
using promises and async await.

75
00:04:55,764 --> 00:04:59,690
In the next video,
we will refactor this code using promises.