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.