1 00:00:01,530 --> 00:00:03,010 ‫In the ;ast couple of lectures, 2 00:00:03,010 --> 00:00:05,020 ‫I hope you started getting the fundamentals 3 00:00:05,020 --> 00:00:06,870 ‫of Express development. 4 00:00:06,870 --> 00:00:10,190 ‫And so now is the perfect time to dive a bit deeper 5 00:00:10,190 --> 00:00:11,750 ‫into how Express works, 6 00:00:11,750 --> 00:00:14,380 ‫and for that we need to talk about middleware 7 00:00:14,380 --> 00:00:16,633 ‫and the request-response cycle. 8 00:00:17,550 --> 00:00:20,670 ‫So really the essence of Express development 9 00:00:20,670 --> 00:00:21,770 ‫is to understand 10 00:00:21,770 --> 00:00:24,960 ‫and then use request-response cycle. 11 00:00:24,960 --> 00:00:27,280 ‫So I wanna make that idea really clear 12 00:00:27,280 --> 00:00:29,890 ‫in a visual way in this video. 13 00:00:29,890 --> 00:00:32,410 ‫So to start the request-response cycle, 14 00:00:32,410 --> 00:00:36,720 ‫or Express app receives a request when someone hits a server 15 00:00:36,720 --> 00:00:39,310 ‫for which it will then create a request 16 00:00:39,310 --> 00:00:41,170 ‫and response object. 17 00:00:41,170 --> 00:00:43,530 ‫That data will then be used and processed 18 00:00:43,530 --> 00:00:48,160 ‫in order to generate and send back a meaningful response. 19 00:00:48,160 --> 00:00:50,740 ‫Now, in order to process that data, 20 00:00:50,740 --> 00:00:53,740 ‫in Express we use something called middleware, 21 00:00:53,740 --> 00:00:57,220 ‫which can manipulate the request or the response object. 22 00:00:57,220 --> 00:01:00,680 ‫Or really execute any other code that we like. 23 00:01:00,680 --> 00:01:02,820 ‫So middleware doesn't always have to be just 24 00:01:02,820 --> 00:01:05,230 ‫about the request or the response object, 25 00:01:05,230 --> 00:01:08,070 ‫but it usually is mostly about the request. 26 00:01:08,070 --> 00:01:10,880 ‫And actually, we already used middleware before. 27 00:01:10,880 --> 00:01:15,130 ‫We used Express dot JSON to get access to the request body 28 00:01:15,130 --> 00:01:16,600 ‫on the request object. 29 00:01:16,600 --> 00:01:18,250 ‫Remember that? 30 00:01:18,250 --> 00:01:20,600 ‫Now it's called middleware remember 31 00:01:20,600 --> 00:01:23,930 ‫because it's a function that is executed between, 32 00:01:23,930 --> 00:01:26,570 ‫so in the middle of receiving the request 33 00:01:26,570 --> 00:01:28,540 ‫and sending the response. 34 00:01:28,540 --> 00:01:31,020 ‫And actually, we can say that in Express, 35 00:01:31,020 --> 00:01:33,010 ‫everything is middleware. 36 00:01:33,010 --> 00:01:35,270 ‫Even our route definitions. 37 00:01:35,270 --> 00:01:38,460 ‫So again, even when we defined our routes, 38 00:01:38,460 --> 00:01:42,120 ‫we can think of the route handler functions that we wrote 39 00:01:42,120 --> 00:01:43,600 ‫as middleware functions. 40 00:01:43,600 --> 00:01:45,120 ‫They are simply middleware functions 41 00:01:45,120 --> 00:01:48,010 ‫that are only executed for certain routes. 42 00:01:48,010 --> 00:01:49,290 ‫Okay? 43 00:01:49,290 --> 00:01:52,840 ‫Now some examples of middleware are Express dot JSON, 44 00:01:52,840 --> 00:01:54,860 ‫which is also called body-parser, 45 00:01:54,860 --> 00:01:56,870 ‫and that we already used before. 46 00:01:56,870 --> 00:01:59,100 ‫Or some logging functionality, 47 00:01:59,100 --> 00:02:02,130 ‫or setting some specific http headers. 48 00:02:02,130 --> 00:02:05,760 ‫The possibilities are really endless with middleware. 49 00:02:05,760 --> 00:02:08,460 ‫All right, and now in more technical terms, 50 00:02:08,460 --> 00:02:11,000 ‫we say that all the middleware together 51 00:02:11,000 --> 00:02:12,370 ‫that we use in our app, 52 00:02:12,370 --> 00:02:15,200 ‫is called the middleware Stack. 53 00:02:15,200 --> 00:02:17,720 ‫What's very important to keep in mind here, 54 00:02:17,720 --> 00:02:20,230 ‫is that the order of middleware in the stack, 55 00:02:20,230 --> 00:02:22,540 ‫is actually defined by the order they 56 00:02:22,540 --> 00:02:24,500 ‫are defined in the code. 57 00:02:24,500 --> 00:02:27,110 ‫So a middleware that appears first in the code, 58 00:02:27,110 --> 00:02:29,920 ‫is executed before one that appears later. 59 00:02:29,920 --> 00:02:33,170 ‫And so the order of the code matters a lot in Express. 60 00:02:33,170 --> 00:02:34,360 ‫Okay? 61 00:02:34,360 --> 00:02:38,010 ‫Now, you can think of the whole process like this, 62 00:02:38,010 --> 00:02:40,120 ‫our request and response object 63 00:02:40,120 --> 00:02:41,890 ‫that were created in the beginning 64 00:02:41,890 --> 00:02:45,310 ‫go through each middleware where they are processed, 65 00:02:45,310 --> 00:02:48,710 ‫or where just some other code is executed. 66 00:02:48,710 --> 00:02:51,370 ‫Then at the end of each middleware function, 67 00:02:51,370 --> 00:02:53,150 ‫a next function is called, 68 00:02:53,150 --> 00:02:55,340 ‫which is a function that we have access to 69 00:02:55,340 --> 00:02:56,860 ‫in each middleware function. 70 00:02:56,860 --> 00:02:59,580 ‫Just like the request and response objects. 71 00:02:59,580 --> 00:03:02,960 ‫And we will of course see this in code in the next video. 72 00:03:02,960 --> 00:03:05,375 ‫So when we call the next function, 73 00:03:05,375 --> 00:03:08,470 ‫the next middleware in the stack will be executed 74 00:03:08,470 --> 00:03:11,960 ‫with the exact same request and response object. 75 00:03:11,960 --> 00:03:14,480 ‫And that happens with all the middlewares 76 00:03:14,480 --> 00:03:16,460 ‫until we reach the last one. 77 00:03:16,460 --> 00:03:17,830 ‫And so just like this, 78 00:03:17,830 --> 00:03:20,360 ‫the initial request and response object 79 00:03:20,360 --> 00:03:23,400 ‫go through each middleware step by step. 80 00:03:23,400 --> 00:03:25,490 ‫And you can think of this whole process 81 00:03:25,490 --> 00:03:29,190 ‫as kind of a pipeline where our data go through, 82 00:03:29,190 --> 00:03:33,440 ‫so just like its been piped from request to final response. 83 00:03:33,440 --> 00:03:34,472 ‫All right? 84 00:03:34,472 --> 00:03:36,900 ‫Now about that last middleware function, 85 00:03:36,900 --> 00:03:40,230 ‫it's usually a route handler just like we coded before. 86 00:03:40,230 --> 00:03:43,250 ‫So in this handler we do actually not call the next function 87 00:03:43,250 --> 00:03:45,270 ‫to move to the next middleware. 88 00:03:45,270 --> 00:03:47,950 ‫Instead, we finally send the response data 89 00:03:47,950 --> 00:03:49,800 ‫back to the client. 90 00:03:49,800 --> 00:03:50,633 ‫And like this, 91 00:03:50,633 --> 00:03:53,983 ‫we then finish the so-called request-response cycle. 92 00:03:55,380 --> 00:03:58,590 ‫So the request-response cycle is really everything 93 00:03:58,590 --> 00:04:00,900 ‫that we talked about here together. 94 00:04:00,900 --> 00:04:03,040 ‫It starts with the incoming request, 95 00:04:03,040 --> 00:04:05,980 ‫then executing all the middleware in the middleware stack 96 00:04:05,980 --> 00:04:07,240 ‫step by step, 97 00:04:07,240 --> 00:04:10,513 ‫and finally sending the response to finish the cycle. 98 00:04:11,370 --> 00:04:13,900 ‫So you see, it's really not complicated. 99 00:04:13,900 --> 00:04:16,450 ‫It's actually just a linear process. 100 00:04:16,450 --> 00:04:19,200 ‫But I wish someone would have shown me something like this 101 00:04:19,200 --> 00:04:22,000 ‫when I was learning how to build Express apps. 102 00:04:22,000 --> 00:04:23,420 ‫I mean I could build them, 103 00:04:23,420 --> 00:04:26,090 ‫but in the beginning I didn't really understand 104 00:04:26,090 --> 00:04:29,230 ‫this entire request-response cycle like this. 105 00:04:29,230 --> 00:04:30,760 ‫It was very confusing. 106 00:04:30,760 --> 00:04:33,280 ‫So that's why I'm showing you this, 107 00:04:33,280 --> 00:04:36,710 ‫because I believe it will be much, much, easier for you 108 00:04:36,710 --> 00:04:38,800 ‫in order to move onto the course now, 109 00:04:38,800 --> 00:04:42,383 ‫after understanding exactly how Express apps work.