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.