1
00:00:02,070 --> 00:00:03,610
Now let's, first of all,

2
00:00:03,610 --> 00:00:06,740
start with what we learned thus far.

3
00:00:06,740 --> 00:00:09,390
I already mentioned that we learned about HTML,

4
00:00:09,390 --> 00:00:11,390
CSS and Java script,

5
00:00:11,390 --> 00:00:13,890
and you'll learn that HTML is there

6
00:00:13,890 --> 00:00:18,100
to structure your content, to describe your content,

7
00:00:18,100 --> 00:00:20,960
CSS is there to add some styling,

8
00:00:20,960 --> 00:00:25,080
and JavaScript can be used to add interactivity.

9
00:00:25,080 --> 00:00:28,600
And therefore both CSS and JavaScript

10
00:00:28,600 --> 00:00:30,700
are technically optional

11
00:00:30,700 --> 00:00:34,250
because in the end, content is everything you need.

12
00:00:34,250 --> 00:00:36,530
But of course, you typically also want to make sure

13
00:00:36,530 --> 00:00:37,620
that it looks good

14
00:00:37,620 --> 00:00:40,470
and you might want to add some interactivity.

15
00:00:40,470 --> 00:00:43,280
That's why you then also might want to add

16
00:00:43,280 --> 00:00:45,640
JavaScript and CSS.

17
00:00:45,640 --> 00:00:47,240
But as I mentioned,

18
00:00:47,240 --> 00:00:49,900
all that code we wrote thus far

19
00:00:49,900 --> 00:00:54,260
and all these free technologies are only responsible

20
00:00:54,260 --> 00:00:56,520
for what's displayed by the browser

21
00:00:56,520 --> 00:01:00,070
and how that loaded website behaves in the browser.

22
00:01:00,070 --> 00:01:02,530
So it all takes place in the browser

23
00:01:02,530 --> 00:01:07,030
and therefore it takes place in a so-called front-end,

24
00:01:07,030 --> 00:01:10,400
because the browser is a tool installed on the machines

25
00:01:10,400 --> 00:01:12,090
of your end users

26
00:01:12,090 --> 00:01:14,730
and that is the front-end of your website,

27
00:01:14,730 --> 00:01:16,700
it is what the user sees,

28
00:01:16,700 --> 00:01:20,570
what has a direct impact on what the user sees.

29
00:01:20,570 --> 00:01:23,690
Now for some websites, that's enough.

30
00:01:23,690 --> 00:01:27,660
For some websites, you only need that browser side,

31
00:01:27,660 --> 00:01:30,730
You only have some content that should be displayed

32
00:01:30,730 --> 00:01:32,450
in a nice way.

33
00:01:32,450 --> 00:01:35,020
But there also are websites that need

34
00:01:35,020 --> 00:01:37,400
certain service side capabilities

35
00:01:37,400 --> 00:01:40,320
in addition to what the user sees.

36
00:01:40,320 --> 00:01:42,540
And that of course brings up one question,

37
00:01:42,540 --> 00:01:46,340
what are such server-side capabilities?

38
00:01:46,340 --> 00:01:49,970
Well there are a couple of things you can do on that

39
00:01:49,970 --> 00:01:51,660
so-called server-side,

40
00:01:51,660 --> 00:01:54,290
at which we're going to take a closer look soon,

41
00:01:54,290 --> 00:01:56,520
but typical examples would be

42
00:01:56,520 --> 00:01:59,410
that you want to store data in a database.

43
00:01:59,410 --> 00:02:01,360
That you might be building a website

44
00:02:01,360 --> 00:02:06,360
where a user enters some data in a forum, for example.

45
00:02:06,530 --> 00:02:09,110
You might remember that forums section

46
00:02:09,110 --> 00:02:12,270
where we didn't really work with the data

47
00:02:12,270 --> 00:02:13,630
entered by the user.

48
00:02:13,630 --> 00:02:16,220
Well, soon we will be able to work with it

49
00:02:16,220 --> 00:02:19,970
because storing such data in a database

50
00:02:19,970 --> 00:02:21,660
might be something we want to do.

51
00:02:21,660 --> 00:02:23,440
And that has to be a database

52
00:02:23,440 --> 00:02:26,760
that's not installed on the machine of our visitor,

53
00:02:26,760 --> 00:02:29,860
but on some central machine that we,

54
00:02:29,860 --> 00:02:31,690
as the website owner own,

55
00:02:31,690 --> 00:02:34,640
so that we can use that entered data.

56
00:02:34,640 --> 00:02:37,510
We also might want to store uploaded files,

57
00:02:37,510 --> 00:02:41,960
if you think about something like Facebook or Twitter,

58
00:02:41,960 --> 00:02:45,300
where users can upload profile images,

59
00:02:45,300 --> 00:02:47,780
you might want to store those somewhere.

60
00:02:47,780 --> 00:02:51,330
And again, you need to store them on a central machine,

61
00:02:51,330 --> 00:02:53,830
not on the machines of your visitors,

62
00:02:53,830 --> 00:02:56,340
because every visitor should be able to see

63
00:02:56,340 --> 00:02:58,343
those uploaded files.

64
00:02:59,310 --> 00:03:02,220
And you also might want to load data from a database

65
00:03:02,220 --> 00:03:06,170
and possibly even send back different

66
00:03:06,170 --> 00:03:10,020
HTML content for different visitors

67
00:03:10,020 --> 00:03:12,690
based on the loaded data.

68
00:03:12,690 --> 00:03:17,620
And I think a good example could be amazon.com.

69
00:03:17,620 --> 00:03:19,680
If you visit amazon.com,

70
00:03:19,680 --> 00:03:23,580
you will probably see a different starting page than I do,

71
00:03:23,580 --> 00:03:25,910
especially if you're logged in,

72
00:03:25,910 --> 00:03:28,130
because then you will see some recommendations

73
00:03:28,130 --> 00:03:30,150
that Amazon got for you.

74
00:03:30,150 --> 00:03:31,360
And of course there,

75
00:03:31,360 --> 00:03:35,130
we don't have one HTML page that is the same for everyone,

76
00:03:35,130 --> 00:03:38,390
but instead Amazon's computers,

77
00:03:38,390 --> 00:03:40,890
so some machines owned by Amazon,

78
00:03:40,890 --> 00:03:45,890
generate different HTML pages for different visitors

79
00:03:46,010 --> 00:03:47,900
with product data

80
00:03:47,900 --> 00:03:52,160
that's stored in Amazon's product databases.

81
00:03:52,160 --> 00:03:54,780
So here we have a scenario where,

82
00:03:54,780 --> 00:03:57,900
when we visit a website, amazon.com,

83
00:03:57,900 --> 00:04:01,250
Amazon will actually reach out to its databases,

84
00:04:01,250 --> 00:04:04,800
look up some product data which it wants to present to you,

85
00:04:04,800 --> 00:04:08,300
and then send back a customized HTML site

86
00:04:08,300 --> 00:04:11,240
that contains that product data.

87
00:04:11,240 --> 00:04:15,520
So here we don't have one HTML page for every visitor,

88
00:04:15,520 --> 00:04:18,450
but we have customized HTML pages

89
00:04:18,450 --> 00:04:22,833
that are generated on demand once you visit the website.

90
00:04:23,860 --> 00:04:26,210
the same would be true if you visit your cart.

91
00:04:26,210 --> 00:04:27,760
Here my cart is empty,

92
00:04:27,760 --> 00:04:30,510
but if I start adding items to the cart,

93
00:04:30,510 --> 00:04:33,660
this HTML page, which it still is in the end,

94
00:04:33,660 --> 00:04:37,150
of course contains the products I added.

95
00:04:37,150 --> 00:04:38,760
Let's see how that could work

96
00:04:38,760 --> 00:04:40,820
if I go back to the starting page

97
00:04:40,820 --> 00:04:44,530
and let's say here, I want to add some item to a cart.

98
00:04:44,530 --> 00:04:49,530
Let's say I want to add this keyboard/mouse set here.

99
00:04:49,670 --> 00:04:51,440
And I click on related items,

100
00:04:51,440 --> 00:04:53,780
and I pick one and add that to the cart.

101
00:04:53,780 --> 00:04:57,900
Then at this point, when I clicked add to cart,

102
00:04:57,900 --> 00:05:01,760
some data was sent to Amazon's computers,

103
00:05:01,760 --> 00:05:04,920
to Amazon's servers, as they are called,

104
00:05:04,920 --> 00:05:08,690
and then there, probably, that data is stored in a database.

105
00:05:08,690 --> 00:05:11,450
So the products I have in my cart,

106
00:05:11,450 --> 00:05:15,660
that's stored somewhere on Amazon's servers in a database.

107
00:05:15,660 --> 00:05:18,390
And if I now visit this cart page,

108
00:05:18,390 --> 00:05:21,500
I get a customized HTML page back

109
00:05:21,500 --> 00:05:23,850
because of course the content on this page

110
00:05:23,850 --> 00:05:26,300
is my specific content.

111
00:05:26,300 --> 00:05:29,920
Not every user has this item in his or her cart,

112
00:05:29,920 --> 00:05:32,390
I have it in my cart.

113
00:05:32,390 --> 00:05:35,500
And here, if I inspect this in the developer tools,

114
00:05:35,500 --> 00:05:38,650
we can see that this cart item,

115
00:05:38,650 --> 00:05:42,940
that's still regular HTML with some CSS clauses,

116
00:05:42,940 --> 00:05:44,790
with some CSS styling.

117
00:05:44,790 --> 00:05:46,550
So that's still HTML,

118
00:05:46,550 --> 00:05:50,040
but of course not HTML written by some developer,

119
00:05:50,040 --> 00:05:52,710
but instead generated on demand

120
00:05:52,710 --> 00:05:55,860
based on some data stored in some database

121
00:05:55,860 --> 00:05:58,330
that we submitted a couple of seconds ago,

122
00:05:58,330 --> 00:06:02,020
once we added this item to a cart for us.

123
00:06:02,020 --> 00:06:06,220
And that's why for some websites, it's not enough if we,

124
00:06:06,220 --> 00:06:10,730
as a developer, write some HTML, CSS and JavaScript code,

125
00:06:10,730 --> 00:06:14,620
because we also need the capability to add code

126
00:06:14,620 --> 00:06:18,320
that runs on some remote machine on the server,

127
00:06:18,320 --> 00:06:21,680
and that deals with incoming data,

128
00:06:21,680 --> 00:06:24,140
like when we clicked on add to cart,

129
00:06:24,140 --> 00:06:28,000
and that's also able to then store such data somewhere

130
00:06:28,000 --> 00:06:33,000
or load that data and generate some HTML page on demand.

131
00:06:33,950 --> 00:06:36,270
So to put this into perspective,

132
00:06:36,270 --> 00:06:39,550
let's maybe come back to how the web works.

133
00:06:39,550 --> 00:06:43,530
Here we learned that a visitor using a computer

134
00:06:43,530 --> 00:06:48,300
or a mobile phone, in the end, enters a URL like amazon.com,

135
00:06:48,300 --> 00:06:50,820
and that then sends a so-called request

136
00:06:50,820 --> 00:06:54,510
to the computers owned by Amazon.

137
00:06:54,510 --> 00:06:58,570
And on those computers, those so-called servers,

138
00:06:58,570 --> 00:07:01,760
we have the website code, those browser instructions,

139
00:07:01,760 --> 00:07:04,600
the HTML, CSS, and JavaScript code

140
00:07:04,600 --> 00:07:07,580
that's being sent back as part of the so-called response

141
00:07:07,580 --> 00:07:10,010
to the browser so that the browser data

142
00:07:10,010 --> 00:07:11,963
is able to display this website.

143
00:07:12,820 --> 00:07:14,820
Now that's what we learned up to this point.

144
00:07:14,820 --> 00:07:16,520
But in case of Amazon,

145
00:07:16,520 --> 00:07:19,260
we actually saw that these instructions

146
00:07:19,260 --> 00:07:21,160
are not always the same,

147
00:07:21,160 --> 00:07:23,810
different visitors get different pages

148
00:07:23,810 --> 00:07:26,550
and therefore different HTML code,

149
00:07:26,550 --> 00:07:28,730
maybe even different styles,

150
00:07:28,730 --> 00:07:32,410
it really depends on what should show up on the page.

151
00:07:32,410 --> 00:07:35,380
Now we did learn that we call the part

152
00:07:35,380 --> 00:07:39,320
with the user and the browser the front-end, or client,

153
00:07:39,320 --> 00:07:42,670
and we call the computer that holds the code server,

154
00:07:42,670 --> 00:07:43,753
or backend.

155
00:07:44,910 --> 00:07:47,510
Now we just learned that sometimes

156
00:07:47,510 --> 00:07:50,610
you don't wanna just store the finished instructions

157
00:07:50,610 --> 00:07:54,120
and sent those back because they need to differ.

158
00:07:54,120 --> 00:07:57,680
And different visitors need to get different HTML code

159
00:07:57,680 --> 00:08:02,240
with different content and maybe all the different styles.

160
00:08:02,240 --> 00:08:05,010
Because of that, we can change this picture a little bit.

161
00:08:05,010 --> 00:08:08,970
We still have front-end and back-end, client and server,

162
00:08:08,970 --> 00:08:10,320
but on that server,

163
00:08:10,320 --> 00:08:13,570
we might have those finished instructions.

164
00:08:13,570 --> 00:08:15,490
But in cases like Amazon,

165
00:08:15,490 --> 00:08:18,250
we actually instead have some server-side code

166
00:08:18,250 --> 00:08:19,850
that execute there,

167
00:08:19,850 --> 00:08:23,560
that then generates those instructions on demand

168
00:08:23,560 --> 00:08:25,570
for every incoming request,

169
00:08:25,570 --> 00:08:29,570
so that different pages, different HTML code,

170
00:08:29,570 --> 00:08:32,840
can be sent back for different users.

171
00:08:32,840 --> 00:08:37,039
And as part of that page generation and code execution,

172
00:08:37,039 --> 00:08:42,039
that server-side code could also maybe store incoming data.

173
00:08:42,230 --> 00:08:45,550
If we clicked that add to cart button

174
00:08:45,550 --> 00:08:50,550
and/or fetch data from a database or from a file system,

175
00:08:51,040 --> 00:08:53,750
these are all things we are going to explore

176
00:08:53,750 --> 00:08:55,770
over the next sections.

177
00:08:55,770 --> 00:08:58,510
But that's nowadays changed Big Picture

178
00:08:58,510 --> 00:09:00,370
of how the web works,

179
00:09:00,370 --> 00:09:01,800
which you should keep in mind.

180
00:09:01,800 --> 00:09:03,350
Because as a web developer,

181
00:09:03,350 --> 00:09:06,440
it's actually about more than just writing HTML,

182
00:09:06,440 --> 00:09:08,590
CSS and JavaScript code,

183
00:09:08,590 --> 00:09:12,570
You sometimes also might need to write some server-side code

184
00:09:12,570 --> 00:09:13,500
to do

185
00:09:13,500 --> 00:09:15,070
more kinds of

186
00:09:15,070 --> 00:09:17,810
work, or to do other kinds of work

187
00:09:17,810 --> 00:09:22,490
and/or to pre-generate different HTML content

188
00:09:22,490 --> 00:09:25,133
that is then being sent back to the client.