1
00:00:00,900 --> 00:00:01,733
-: In the last section,

2
00:00:01,733 --> 00:00:03,270
we started talking about the application

3
00:00:03,270 --> 00:00:04,980
that we're going to build to learn more about

4
00:00:04,980 --> 00:00:06,630
multi-container deployments.

5
00:00:06,630 --> 00:00:08,970
In this section, we'll continue by talking about

6
00:00:08,970 --> 00:00:11,580
the backend architecture that we're going to use

7
00:00:11,580 --> 00:00:13,113
to implement this application.

8
00:00:14,010 --> 00:00:16,320
All right, so here we go, here's the backend.

9
00:00:16,320 --> 00:00:18,720
Now, like I said, this is just over the top,

10
00:00:18,720 --> 00:00:21,780
complicated, way more complicated than it needs to be

11
00:00:21,780 --> 00:00:23,730
by like a factor of 20,

12
00:00:23,730 --> 00:00:26,370
but I'm showing you this much more complicated backend

13
00:00:26,370 --> 00:00:28,650
just to give you an idea of how we can take

14
00:00:28,650 --> 00:00:31,290
these multiple containers, or multiple components,

15
00:00:31,290 --> 00:00:34,530
and fit them together into one application.

16
00:00:34,530 --> 00:00:37,290
Now this right here is a diagram of the development flow,

17
00:00:37,290 --> 00:00:40,110
or the development architecture of our application.

18
00:00:40,110 --> 00:00:41,670
So when we eventually push this

19
00:00:41,670 --> 00:00:43,440
into a production deployment,

20
00:00:43,440 --> 00:00:45,510
some of these pieces in here are gonna change

21
00:00:45,510 --> 00:00:46,350
just a little bit

22
00:00:46,350 --> 00:00:47,940
but I'll be sure to tell you exactly

23
00:00:47,940 --> 00:00:50,403
about exactly how they are going to change.

24
00:00:51,870 --> 00:00:53,910
So when a user boots up their browser

25
00:00:53,910 --> 00:00:55,740
and tries to visit our application,

26
00:00:55,740 --> 00:00:59,010
they're gonna first visit an Nginx web server

27
00:00:59,010 --> 00:01:01,380
very similar to the one we had previously.

28
00:01:01,380 --> 00:01:05,340
The Nginx server is going to essentially do some routing.

29
00:01:05,340 --> 00:01:07,860
This server is going to decide whether the browser

30
00:01:07,860 --> 00:01:10,920
is trying to access a React application,

31
00:01:10,920 --> 00:01:14,670
to get some front end assets like the HTML file,

32
00:01:14,670 --> 00:01:16,110
or some JavaScript file,

33
00:01:16,110 --> 00:01:18,930
that will be used to build this application.

34
00:01:18,930 --> 00:01:21,930
If the browser is trying to access some front end assets

35
00:01:21,930 --> 00:01:24,120
like an HTML file or a JavaScript file

36
00:01:24,120 --> 00:01:26,730
it will automatically route the incoming request

37
00:01:26,730 --> 00:01:28,593
to a running React server.

38
00:01:30,270 --> 00:01:32,580
If the incoming request is instead trying

39
00:01:32,580 --> 00:01:34,770
to access some backend API,

40
00:01:34,770 --> 00:01:37,440
that we are going to use for submitting numbers

41
00:01:37,440 --> 00:01:40,350
and reading numbers and retrieving values,

42
00:01:40,350 --> 00:01:41,640
all that kind of good stuff,

43
00:01:41,640 --> 00:01:44,160
then the Nginx server right here will instead route

44
00:01:44,160 --> 00:01:46,890
the request to a Express server.

45
00:01:46,890 --> 00:01:48,750
So this Express server here is gonna function

46
00:01:48,750 --> 00:01:52,020
as our API that's gonna serve up information

47
00:01:52,020 --> 00:01:55,413
or calculated values up to the front end application.

48
00:01:56,520 --> 00:01:58,260
Now let me show you a couple more diagrams

49
00:01:58,260 --> 00:02:01,010
that's going to better explain this process right here.

50
00:02:02,700 --> 00:02:04,320
So you might have noticed that on the last diagram,

51
00:02:04,320 --> 00:02:07,680
we had these worker, Redis and Postgres things over here.

52
00:02:07,680 --> 00:02:10,800
Remember that Redis is an in-memory data store,

53
00:02:10,800 --> 00:02:13,380
and it's very commonly used for housing temporary

54
00:02:13,380 --> 00:02:16,800
or kind of cached values of sorts.

55
00:02:16,800 --> 00:02:18,420
I've also got Postgres right here,

56
00:02:18,420 --> 00:02:21,843
which is a database very similar to say MySQL.

57
00:02:23,550 --> 00:02:24,540
So you might have noticed

58
00:02:24,540 --> 00:02:26,308
that in our web application mockup,

59
00:02:26,308 --> 00:02:29,010
we had kind of these two sets of values right here.

60
00:02:29,010 --> 00:02:31,710
We had first values that the application has seen,

61
00:02:31,710 --> 00:02:33,660
or essentially values that have been submitted

62
00:02:33,660 --> 00:02:35,160
to the application.

63
00:02:35,160 --> 00:02:37,740
All of the information for this values I have seen

64
00:02:37,740 --> 00:02:40,980
is going to be stored in a Postgres database.

65
00:02:40,980 --> 00:02:42,180
And so you can kind of imagine

66
00:02:42,180 --> 00:02:43,710
that values I have seen right here,

67
00:02:43,710 --> 00:02:45,930
or really indices I've seen,

68
00:02:45,930 --> 00:02:49,080
is a very permanent stored set of data,

69
00:02:49,080 --> 00:02:51,150
all coming from Postgres.

70
00:02:51,150 --> 00:02:52,110
On the other hand,

71
00:02:52,110 --> 00:02:54,180
the calculated values that are going to be displayed

72
00:02:54,180 --> 00:02:55,013
right here

73
00:02:55,013 --> 00:02:57,630
all this information is going to be displayed

74
00:02:57,630 --> 00:03:00,870
in a separate Redis database instead.

75
00:03:00,870 --> 00:03:03,960
So again, we're just making this over the top complicated,

76
00:03:03,960 --> 00:03:06,300
way more complicated than it has to be.

77
00:03:06,300 --> 00:03:09,210
We have essentially identical data on the screen right here,

78
00:03:09,210 --> 00:03:11,040
but we're just going to arbitrarily say that,

79
00:03:11,040 --> 00:03:13,590
oh yeah, this source of data is coming from Postgres,

80
00:03:13,590 --> 00:03:15,930
this source of data is coming from Redis over here.

81
00:03:15,930 --> 00:03:17,610
Again, we're just doing that to make this

82
00:03:17,610 --> 00:03:19,080
a little bit more complicated

83
00:03:19,080 --> 00:03:20,760
and show you how you would work with these

84
00:03:20,760 --> 00:03:23,553
different sources of data in a single application.

85
00:03:24,420 --> 00:03:27,120
Now, lemme show you a flow of how our application

86
00:03:27,120 --> 00:03:29,640
is really going to behave behind the scenes.

87
00:03:29,640 --> 00:03:32,190
So let's imagine that a user submits a number

88
00:03:32,190 --> 00:03:33,510
to the React application.

89
00:03:33,510 --> 00:03:36,660
Like let's say they put a number into the form right here

90
00:03:36,660 --> 00:03:38,310
and then click the submit button.

91
00:03:39,690 --> 00:03:41,610
So when a user clicks on that submit button,

92
00:03:41,610 --> 00:03:44,790
the React app is going to make a API request, or excuse me,

93
00:03:44,790 --> 00:03:48,750
an Ajax request to the backend Express server.

94
00:03:48,750 --> 00:03:51,030
The Express server, when it receives this number,

95
00:03:51,030 --> 00:03:53,970
that it needs to calculate a Fibonacci number for,

96
00:03:53,970 --> 00:03:55,500
it's gonna first take that number,

97
00:03:55,500 --> 00:03:58,170
and store it inside of our Postgres database.

98
00:03:58,170 --> 00:04:00,240
'Cause remember, that's gonna have a permanent list

99
00:04:00,240 --> 00:04:02,730
of all the indices that have ever been submitted

100
00:04:02,730 --> 00:04:04,380
to our application.

101
00:04:04,380 --> 00:04:05,310
At the same time,

102
00:04:05,310 --> 00:04:07,740
the Express server is also gonna take that index,

103
00:04:07,740 --> 00:04:11,220
and put it into the Redis database as well.

104
00:04:11,220 --> 00:04:14,280
When a new number shows up inside of our Redis database,

105
00:04:14,280 --> 00:04:18,930
it's gonna wake up a separate backend Node.js process,

106
00:04:18,930 --> 00:04:21,839
that we're going to refer to as the worker.

107
00:04:21,839 --> 00:04:24,690
The only job this worker right here is to watch Redis

108
00:04:24,690 --> 00:04:27,240
for new indices that show up.

109
00:04:27,240 --> 00:04:30,240
Anytime a new index shows up inside of Redis,

110
00:04:30,240 --> 00:04:32,670
the worker is going to pull that value out,

111
00:04:32,670 --> 00:04:36,030
it will calculate the appropriate Fibonacci value for it,

112
00:04:36,030 --> 00:04:37,620
it'll take that calculated value,

113
00:04:37,620 --> 00:04:39,660
and then put it back into Redis,

114
00:04:39,660 --> 00:04:42,600
so that it can then be requested by the React application

115
00:04:42,600 --> 00:04:44,493
and eventually show up on the screen.

116
00:04:45,600 --> 00:04:48,810
So again, over the top complicated, I can't say it enough,

117
00:04:48,810 --> 00:04:51,960
I don't think you would end up building a Redis,

118
00:04:51,960 --> 00:04:54,038
or excuse me, a Fibonacci calculator application

119
00:04:54,038 --> 00:04:55,770
with this type of flow right here,

120
00:04:55,770 --> 00:04:57,030
this type of architecture.

121
00:04:57,030 --> 00:04:58,350
But again, I just wanted to show you

122
00:04:58,350 --> 00:05:00,660
a multi-container deployment.

123
00:05:00,660 --> 00:05:03,390
So now that we've got a better idea of how all this works,

124
00:05:03,390 --> 00:05:04,500
let's take a quick pause.

125
00:05:04,500 --> 00:05:05,730
We're gonna come back the next section

126
00:05:05,730 --> 00:05:07,650
and we'll start putting this application together

127
00:05:07,650 --> 00:05:08,670
from scratch.

128
00:05:08,670 --> 00:05:11,093
So a quick break, and I'll see you in just a minute.