WEBVTT

0
00:00.510 --> 00:04.590
Hey guys, welcome to day 54 of 100 days of Code.

1
00:05.010 --> 00:10.010
And today we're going to be moving on to a new topic and that is going to be web

2
00:10.200 --> 00:11.033
development.

3
00:11.220 --> 00:13.920
And we're going to be working on this for the next few days as well.

4
00:14.520 --> 00:16.320
Now there's quite a lot to cover today.

5
00:16.350 --> 00:20.670
We're going to be talking about the command line, Python decorators,

6
00:20.970 --> 00:23.730
as well as web development using Flask,

7
00:23.850 --> 00:28.170
one of the most popular frameworks for creating websites using Python.

8
00:29.460 --> 00:32.490
Now, before we get started though, you might be thinking, well,

9
00:32.550 --> 00:34.020
I already know how to make websites.

10
00:34.110 --> 00:38.250
I learned about HTML and CSS on days 41 through to 44.

11
00:38.250 --> 00:40.590
So I really know how to make websites.

12
00:40.860 --> 00:44.520
So what exactly is it that you're teaching me now? Well,

13
00:44.550 --> 00:45.720
if you think of a website,

14
00:45.930 --> 00:49.950
a simple website just contains HTML and CSS.

15
00:50.310 --> 00:53.310
Now that is also what we call the front-end.

16
00:53.610 --> 00:58.380
This is the beautiful mermaid that the user gets to see. Now for the website to

17
00:58.380 --> 01:02.760
actually have some functionality, for example, if you're building a web app

18
01:02.790 --> 01:05.490
instead of just a simple display website,

19
01:05.910 --> 01:08.070
then it's also got to have a backend.

20
01:08.550 --> 01:12.300
And the backend is the part that we're going to be learning how to build right

21
01:12.300 --> 01:13.133
now.

22
01:13.620 --> 01:17.760
So if the front end is just the part that displays information to the user,

23
01:18.060 --> 01:21.210
the backend is the part that does a lot of the business logic,

24
01:21.240 --> 01:22.560
a lot of the calculations,

25
01:22.890 --> 01:26.670
and a lot of the things that we've been doing with Python. Now,

26
01:26.670 --> 01:29.370
when people talk about full stack web development

27
01:29.430 --> 01:31.230
which is a term that you would've heard of

28
01:31.260 --> 01:35.700
if you were searching for web development jobs. Now full stack basically just

29
01:35.700 --> 01:37.830
means frontend and backend.

30
01:37.890 --> 01:42.540
So somebody who can deal with both frontend and backend technologies. Now,

31
01:42.540 --> 01:46.890
usually there's quite a few languages that are used for the front and the back

32
01:46.890 --> 01:49.620
end. So the front it's usually HTML,

33
01:49.620 --> 01:53.460
CSS and JavaScript. HTML gives the website structure,

34
01:53.490 --> 01:58.410
CSS gives it style and JavaScript allows it to have some sort of interactivity.

35
01:59.070 --> 02:02.880
Now the backend can also be created by a bunch of different languages,

36
02:03.240 --> 02:08.190
and here is more of a choice. Um, you could choose between JavaScript, Java,

37
02:08.220 --> 02:09.480
Python, Ruby,

38
02:09.660 --> 02:13.110
there's whole bunch of different languages. To make it even more

39
02:13.110 --> 02:15.930
complicated, in addition to languages,

40
02:16.140 --> 02:19.560
there's also different frameworks that you could use for the front and back end.

41
02:19.980 --> 02:21.930
So some popular frameworks you might have heard of

42
02:21.930 --> 02:26.930
are things like Angular and Rreact from the front end and Node and Flask or Django

43
02:27.240 --> 02:28.073
for the backend.

44
02:29.430 --> 02:34.290
So these frameworks are basically tools that really come with a lot of code

45
02:34.350 --> 02:38.700
prebuilt for a lot of the common functionalities that you find when building

46
02:38.700 --> 02:39.900
the front and back end.

47
02:40.290 --> 02:44.610
So that way, we don't always have to reinvent the wheel and we can simply just

48
02:44.700 --> 02:49.200
use the wheel and build a bicycle or build a car or built a scooter and whatever

49
02:49.200 --> 02:52.170
it is that we want. Now,

50
02:52.170 --> 02:54.270
when we're considering Python backend,

51
02:54.330 --> 02:58.350
there's a whole myriad of different frameworks that you could choose from.

52
02:58.650 --> 03:02.410
For example, Flask, Django, Bottle, Cherry pie, pyramid,

53
03:02.770 --> 03:07.120
and a whole bunch more. But the most popular ones, if you look at job search

54
03:07.150 --> 03:07.720
anyways,

55
03:07.720 --> 03:12.720
is Flask and Django where Flask is better suited to beginners and also small

56
03:14.800 --> 03:19.800
projects and Django suited much more to larger commercial projects. In order to

57
03:20.830 --> 03:25.030
build out a website which has a front end and a backend,

58
03:25.330 --> 03:28.330
we have to kind of understand what exactly is the backend.

59
03:29.380 --> 03:32.800
There's three components that you really need to understand when it comes to the

60
03:32.800 --> 03:35.770
backend. And that is the client,

61
03:36.220 --> 03:38.440
the server and the database.

62
03:39.100 --> 03:43.390
These three components together will determine how your backend will work.

63
03:44.020 --> 03:45.280
Now, firstly, the client,

64
03:45.280 --> 03:49.630
you can sort of imagine just as a user going onto a browser,

65
03:49.930 --> 03:53.110
this is the client's side. This is the part that faces the user.

66
03:53.890 --> 03:55.570
And then there's the server.

67
03:55.930 --> 04:00.040
So you can think of the server as basically just a powerful computer

68
04:00.310 --> 04:03.430
that's hooked up to the internet and it's on 24/7

69
04:03.790 --> 04:07.780
always ready to receive requests over the internet. Finally,

70
04:07.780 --> 04:08.950
you've got the database

71
04:09.100 --> 04:12.670
which is kind of like a souped up spreadsheet where you are storing all the

72
04:12.670 --> 04:15.130
information related to your website.

73
04:15.730 --> 04:19.300
So let's say the client wanted to go to google.com. Well,

74
04:19.300 --> 04:22.480
when they type that into the URL bar and they hit enter,

75
04:22.750 --> 04:26.080
that gets sent to the server as a request,

76
04:26.620 --> 04:30.490
and this goes across the internet to this other computer.

77
04:30.940 --> 04:35.940
And this server has to respond. And it responds by sending over the HTML, CSS and

78
04:38.410 --> 04:42.220
JavaScript files that it has for that particular website.

79
04:42.640 --> 04:45.340
And once that gets sent back to the browser,

80
04:45.430 --> 04:50.380
then that can be rendered by the browser as the actual webpage. Now,

81
04:50.410 --> 04:54.430
if you're a website that has a lot of use of data or different types of data

82
04:54.430 --> 04:59.140
that could be requested by a user, then usually you'll have a database.

83
04:59.470 --> 05:02.020
So when the client requests, for example,

84
05:02.020 --> 05:05.320
to see all the tickets they have on Eventbrite, well,

85
05:05.320 --> 05:09.100
the page that they're viewing, that is the front end. That is the client side.

86
05:09.550 --> 05:12.610
But in order to render all the tickets they have,

87
05:12.910 --> 05:17.890
the client makes the request to the server and the server fetches the data from

88
05:17.890 --> 05:21.310
the database. Once it gets the data back from the database,

89
05:21.550 --> 05:25.450
it puts the data into the HTML, CSS and JavaScript files,

90
05:25.780 --> 05:30.780
and it sends the whole bundle back to the browser to be viewed by the user.

91
05:31.930 --> 05:36.160
If this whole process seems a little bit convoluted and complex, don't worry.

92
05:36.400 --> 05:40.270
We're going to be diving deep into creating our server, creating our database,

93
05:40.570 --> 05:44.170
and we're going to be creating all of these parts from scratch step-by-step

94
05:44.200 --> 05:47.620
ourselves. So at the end of the web-dev section,

95
05:47.860 --> 05:50.080
you'll find that if you come back to this video,

96
05:50.170 --> 05:52.120
everything's going to make a lot more sense.

97
05:53.140 --> 05:57.100
Now in order for you to have a good overview of what the whole system looks

98
05:57.110 --> 06:00.530
like, I'd like to use the analogy of a restaurant.

99
06:01.250 --> 06:05.480
So imagine if you have a restaurant and you've got the front of house

100
06:05.480 --> 06:06.830
which is where the tables are,

101
06:06.880 --> 06:09.100
<v 1>when the customer sit. And then</v>

102
06:09.130 --> 06:10.240
<v 0>you've got the kitchen</v>

103
06:10.270 --> 06:13.690
which is where the chefs work and where you're creating all the dishes.

104
06:14.050 --> 06:15.790
And finally, you've also got the larder

105
06:15.790 --> 06:20.080
which is where you store all the ingredients in the fridge or on the shelves.

106
06:20.770 --> 06:23.590
Now this front of house part

107
06:23.710 --> 06:28.300
which is where the user seats in is the client site. Now in the middle,

108
06:28.300 --> 06:32.770
we've got the kitchen, which is the server. And finally we've got the larder

109
06:32.800 --> 06:35.590
which is basically the database of ingredients.

110
06:36.130 --> 06:41.050
Now the client side is completely separate from the rest. So as a user,

111
06:41.050 --> 06:42.310
when I go onto a website,

112
06:42.580 --> 06:46.900
I'm not interacting with the server or the database directly. Instead,

113
06:46.900 --> 06:50.740
I'm interacting with my browser, which is on the client side. Now,

114
06:50.770 --> 06:55.270
when you go to a website and you request to see some piece of information,

115
06:55.300 --> 06:58.600
for example, you log in to Spotify and you want to view your playlists,

116
06:58.990 --> 07:01.020
what actually happens is, you know,

117
07:01.020 --> 07:04.420
you don't have the chef sort of cooking up the dish in front of you on the

118
07:04.420 --> 07:05.860
client side. No,

119
07:05.920 --> 07:10.920
instead what happens is that the server fetches the relevant ingredients from

120
07:12.160 --> 07:16.330
the database, so the data that's related to your Spotify playlist,

121
07:16.720 --> 07:21.100
and then it takes that data and it renders it into a HTML,

122
07:21.130 --> 07:23.020
CSS and JavaScript files.

123
07:23.440 --> 07:26.410
And then once that endproduct is created,

124
07:26.680 --> 07:30.910
it ships it out to the browser on the client side, which you

125
07:30.940 --> 07:33.040
as the user, can now view.

126
07:33.700 --> 07:38.700
So this is basically an overview of how our frontend and our backend interact in

127
07:39.790 --> 07:43.810
order to create a website experience for people. And in the coming lessons,

128
07:43.810 --> 07:47.710
we're going to be building out each of these parts and you gonna see in greater

129
07:47.710 --> 07:51.850
detail how they work together. So head over to the next lesson

130
07:52.000 --> 07:54.940
and we'll get started building our very first website.