1 00:00:01,570 --> 00:00:02,930 Up until this point, 2 00:00:02,930 --> 00:00:05,960 we have just written our code without thinking much 3 00:00:05,960 --> 00:00:08,670 about our application architecture. 4 00:00:08,670 --> 00:00:11,200 It wasn't really important until now, 5 00:00:11,200 --> 00:00:14,550 but now that our app is really starting to grow, 6 00:00:14,550 --> 00:00:15,770 we need to start worrying 7 00:00:15,770 --> 00:00:19,400 about the way that we design, or code architecture. 8 00:00:19,400 --> 00:00:22,320 And this lecture will just be a brief introduction 9 00:00:22,320 --> 00:00:24,010 to back-end architecture. 10 00:00:24,010 --> 00:00:26,893 Starting with the MVC architecture. 11 00:00:28,410 --> 00:00:30,580 So, in this project, we're going to use 12 00:00:30,580 --> 00:00:33,420 a widely used and well known architecture 13 00:00:33,420 --> 00:00:36,300 called the model, view, controller 14 00:00:36,300 --> 00:00:38,720 or MVC for short. 15 00:00:38,720 --> 00:00:40,000 And there are different ways 16 00:00:40,000 --> 00:00:42,660 of implementing the MVC architecture, 17 00:00:42,660 --> 00:00:44,530 some more complex than others, 18 00:00:44,530 --> 00:00:45,840 but we're going to implement it 19 00:00:45,840 --> 00:00:48,400 in a very straightforward way here. 20 00:00:48,400 --> 00:00:50,080 I just wanted to let you know that 21 00:00:50,080 --> 00:00:52,140 if you Google around for MVC, 22 00:00:52,140 --> 00:00:54,910 you'll find it implemented in some different ways. 23 00:00:54,910 --> 00:00:57,850 Okay, anyway, in this architecture, 24 00:00:57,850 --> 00:00:59,620 the model layer is concerned 25 00:00:59,620 --> 00:01:02,420 with everything about applications data, 26 00:01:02,420 --> 00:01:04,150 and the business logic. 27 00:01:04,150 --> 00:01:06,360 And we're going to learn what business logic means 28 00:01:06,360 --> 00:01:07,333 in the next slide. 29 00:01:08,180 --> 00:01:10,820 Next up, we have the controller layer 30 00:01:10,820 --> 00:01:12,850 and the function of the controllers 31 00:01:12,850 --> 00:01:15,380 is to handle the application's request, 32 00:01:15,380 --> 00:01:16,780 interact with models, 33 00:01:16,780 --> 00:01:19,500 and send back responses to the client. 34 00:01:19,500 --> 00:01:22,540 And all that is called the application logic. 35 00:01:22,540 --> 00:01:24,950 Finally, the view layer is necessary 36 00:01:24,950 --> 00:01:27,880 if we have a graphical interface in our app. 37 00:01:27,880 --> 00:01:30,010 Or in other words, if we're building 38 00:01:30,010 --> 00:01:32,410 a server-side rendered website, 39 00:01:32,410 --> 00:01:34,280 as we talked about before. 40 00:01:34,280 --> 00:01:36,870 In this case, the view layer consists basically 41 00:01:36,870 --> 00:01:38,981 of the templates used to generate the view, 42 00:01:38,981 --> 00:01:43,060 so the website that we're going to send back to the client. 43 00:01:43,060 --> 00:01:45,690 And that is the presentation logic. 44 00:01:45,690 --> 00:01:48,500 For now, we're just building an API though, 45 00:01:48,500 --> 00:01:51,780 so we're not really concerned about views just yet. 46 00:01:51,780 --> 00:01:54,180 That's for a bit later in the course. 47 00:01:54,180 --> 00:01:57,650 So using a pattern, or an architecture like this 48 00:01:57,650 --> 00:02:00,430 allows us to write a more modular application, 49 00:02:00,430 --> 00:02:03,180 which is going to be way easier to maintain in scale, 50 00:02:03,180 --> 00:02:04,550 as necessary. 51 00:02:04,550 --> 00:02:06,200 And we could take it even further, 52 00:02:06,200 --> 00:02:08,730 and add more layers of abstraction here. 53 00:02:08,730 --> 00:02:11,170 But in this kind of smaller application, 54 00:02:11,170 --> 00:02:14,643 the MVC architecture is more than enough for our needs. 55 00:02:15,520 --> 00:02:17,635 Now, all this may sound a bit abstract, 56 00:02:17,635 --> 00:02:21,700 so let's take a look at MVC in the context of our app, 57 00:02:21,700 --> 00:02:24,510 and the request-response cycle. 58 00:02:24,510 --> 00:02:28,050 So as always, it all starts with a request. 59 00:02:28,050 --> 00:02:30,760 That request will hit one of our routers, 60 00:02:30,760 --> 00:02:33,410 because remember, we have multiple routers. 61 00:02:33,410 --> 00:02:35,330 Basically, one for each resource, 62 00:02:35,330 --> 00:02:38,390 like tours, users, et cetera. 63 00:02:38,390 --> 00:02:41,520 Now the goal of the router is to delegate the request 64 00:02:41,520 --> 00:02:43,360 to the correct handler function, 65 00:02:43,360 --> 00:02:46,310 which will be in one of the controllers. 66 00:02:46,310 --> 00:02:48,420 And again, there will be one controller 67 00:02:48,420 --> 00:02:50,320 for each of our resources, 68 00:02:50,320 --> 00:02:54,530 to keep these different parts of the app nicely separated. 69 00:02:54,530 --> 00:02:57,090 Then, depending on the incoming request, 70 00:02:57,090 --> 00:02:59,360 the controller might need to interact 71 00:02:59,360 --> 00:03:01,010 with one of the models, 72 00:03:01,010 --> 00:03:02,330 for example to retrieve 73 00:03:02,330 --> 00:03:04,460 a certain document from the database, 74 00:03:04,460 --> 00:03:06,490 or to create a new one. 75 00:03:06,490 --> 00:03:10,350 Once more, there is one model file for each resource. 76 00:03:10,350 --> 00:03:12,560 After getting the data from the model, 77 00:03:12,560 --> 00:03:15,760 the controller might then be ready to send back a response 78 00:03:15,760 --> 00:03:19,320 to the client, for example, containing that data. 79 00:03:19,320 --> 00:03:22,240 Now, in case we want to actually render a website, 80 00:03:22,240 --> 00:03:24,100 there is one more step involved. 81 00:03:24,100 --> 00:03:26,950 In this case, after getting the data from the model, 82 00:03:26,950 --> 00:03:28,490 the controller will then select 83 00:03:28,490 --> 00:03:32,200 one of the view templates and inject the data into it. 84 00:03:32,200 --> 00:03:34,900 That rendered website will then be sent back 85 00:03:34,900 --> 00:03:36,670 as the response. 86 00:03:36,670 --> 00:03:38,860 In the view layer in an Express app 87 00:03:38,860 --> 00:03:41,990 there is usually one view template for each page. 88 00:03:41,990 --> 00:03:43,760 Like a tour overview page, 89 00:03:43,760 --> 00:03:46,580 a tour detail page, or a login page. 90 00:03:46,580 --> 00:03:49,470 In the example of our latest app of course. 91 00:03:49,470 --> 00:03:52,630 So, that is a broad overview of the architecture 92 00:03:52,630 --> 00:03:54,930 that we're going to implement in this project. 93 00:03:55,940 --> 00:03:58,050 Now to finish, let me just go into 94 00:03:58,050 --> 00:04:01,320 a bit more detail on model and controller. 95 00:04:01,320 --> 00:04:04,110 So, one of the big goals of MVC 96 00:04:04,110 --> 00:04:05,970 is to separate business logic 97 00:04:05,970 --> 00:04:08,010 from application logic. 98 00:04:08,010 --> 00:04:10,590 You'll hear about these types of logic all the time 99 00:04:10,590 --> 00:04:12,420 when you browse Stack Overflow, 100 00:04:12,420 --> 00:04:14,260 or some site like that. 101 00:04:14,260 --> 00:04:17,650 But what are these types of logic actually? 102 00:04:17,650 --> 00:04:20,670 Well, the difference is a bit opinionated, 103 00:04:20,670 --> 00:04:22,730 but this is my take on it: 104 00:04:22,730 --> 00:04:25,590 So, application logic is all the code 105 00:04:25,590 --> 00:04:27,340 that is only concerned about 106 00:04:27,340 --> 00:04:29,120 the application's implementation 107 00:04:29,120 --> 00:04:31,060 and not the underlying business problem 108 00:04:31,060 --> 00:04:33,890 that we're actually trying to solve with the application. 109 00:04:33,890 --> 00:04:35,930 Like showing and selling tours, 110 00:04:35,930 --> 00:04:38,160 managing stock in a supermarket, 111 00:04:38,160 --> 00:04:40,830 or organizing a library, for example. 112 00:04:40,830 --> 00:04:42,670 So again, application logic 113 00:04:42,670 --> 00:04:45,470 is the logic that makes the app actually work. 114 00:04:45,470 --> 00:04:49,100 For example, a big part of application logic in Express, 115 00:04:49,100 --> 00:04:52,490 is all about managing requests and responses. 116 00:04:52,490 --> 00:04:54,600 So, in a sense, we can also say 117 00:04:54,600 --> 00:04:58,100 that application logic is more about technical stuff. 118 00:04:58,100 --> 00:05:00,490 Also, if we have views in our app, 119 00:05:00,490 --> 00:05:02,280 the application logic serves 120 00:05:02,280 --> 00:05:04,980 as a bridge between model and view layers 121 00:05:04,980 --> 00:05:06,893 So that we never mix business logic 122 00:05:06,893 --> 00:05:08,920 with presentation logic. 123 00:05:08,920 --> 00:05:10,120 All right? 124 00:05:10,120 --> 00:05:12,000 Now, about business logic, 125 00:05:12,000 --> 00:05:15,370 it's all the code that actually solves the business problem 126 00:05:15,370 --> 00:05:17,490 that we set out to solve. 127 00:05:17,490 --> 00:05:21,340 Let's say again, that our goal is to show tours to customers 128 00:05:21,340 --> 00:05:22,920 and then sell them. 129 00:05:22,920 --> 00:05:26,491 And the code that is directly related to the business rules, 130 00:05:26,491 --> 00:05:28,210 to how the business works, 131 00:05:28,210 --> 00:05:31,440 and the business needs, is business logic. 132 00:05:31,440 --> 00:05:34,580 Now if that still sounds a bit too philosophical, 133 00:05:34,580 --> 00:05:37,810 some examples in the context of our latest app 134 00:05:37,810 --> 00:05:41,160 are creating new tours in the app's database, 135 00:05:41,160 --> 00:05:45,270 checking if a user's password is correct when he logs in, 136 00:05:45,270 --> 00:05:47,320 validating user input data, 137 00:05:47,320 --> 00:05:50,860 or ensuring that only users who bought a certain tour 138 00:05:50,860 --> 00:05:52,220 can review it. 139 00:05:52,220 --> 00:05:55,490 So all this stuff is concerned with the business itself, 140 00:05:55,490 --> 00:05:58,200 and so it's part of the business logic. 141 00:05:58,200 --> 00:06:00,090 Now, we need to keep in mind that 142 00:06:00,090 --> 00:06:02,320 application logic and business logic 143 00:06:02,320 --> 00:06:05,480 are almost impossible to completely separate, 144 00:06:05,480 --> 00:06:07,670 and so sometimes they will overlap. 145 00:06:07,670 --> 00:06:09,360 But we should do our best efforts 146 00:06:09,360 --> 00:06:12,200 to keep the application logic in our controllers 147 00:06:12,200 --> 00:06:15,440 and business logic in our models. 148 00:06:15,440 --> 00:06:17,260 And there is even this philosophy of 149 00:06:17,260 --> 00:06:19,400 fat models, thin controllers, 150 00:06:19,400 --> 00:06:21,170 which says we should offload 151 00:06:21,170 --> 00:06:24,140 as much logic as possible into the models, 152 00:06:24,140 --> 00:06:28,180 to keep the controllers as simple and lean as possible. 153 00:06:28,180 --> 00:06:31,450 So a fat model will have as much business logic 154 00:06:31,450 --> 00:06:33,210 as we can offload to it, 155 00:06:33,210 --> 00:06:36,700 and a thin controller will have as little logic as possible, 156 00:06:36,700 --> 00:06:38,210 so that the controller is 157 00:06:38,210 --> 00:06:41,410 really mostly for managing the application's requests 158 00:06:41,410 --> 00:06:42,500 and responses. 159 00:06:42,500 --> 00:06:43,440 Okay? 160 00:06:43,440 --> 00:06:46,060 So, now keep all this in mind as we move on 161 00:06:46,060 --> 00:06:49,193 and progress into building our applications.