Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,160 --> 00:00:02,570
In the previous lecture,
2
00:00:02,570 --> 00:00:05,280
while talking about the front-end and the back-end,
3
00:00:05,280 --> 00:00:08,710
I mentioned simple and static and dynamic websites,
4
00:00:08,710 --> 00:00:11,370
or applications, a couple of times
5
00:00:11,370 --> 00:00:14,600
but without really defining what they are.
6
00:00:14,600 --> 00:00:17,870
So, in this video, I wanted to clarify these things
7
00:00:17,870 --> 00:00:20,620
and also talk about APIs in order to bring
8
00:00:20,620 --> 00:00:23,620
all these concepts into the bigger picture
9
00:00:23,620 --> 00:00:26,013
of back-end web development in general.
10
00:00:27,460 --> 00:00:30,120
So, let's start by talking about static
11
00:00:30,120 --> 00:00:32,409
versus dynamic websites.
12
00:00:32,409 --> 00:00:34,920
So, a static website, or a simple website
13
00:00:34,920 --> 00:00:36,630
as I called it in the last video,
14
00:00:36,630 --> 00:00:39,070
is when a developer uploads the final
15
00:00:39,070 --> 00:00:43,640
ready to be served files of a website onto the web server.
16
00:00:43,640 --> 00:00:46,580
These files usually contain HTML, CSS,
17
00:00:46,580 --> 00:00:50,320
JavaScript, images, and more, and as I said,
18
00:00:50,320 --> 00:00:53,970
these are the exact files that the server will later send
19
00:00:53,970 --> 00:00:57,090
to the browser when the website is requested.
20
00:00:57,090 --> 00:00:59,040
The browser will then take these files
21
00:00:59,040 --> 00:01:01,320
and render them as they are.
22
00:01:01,320 --> 00:01:04,319
This means that there is no work done on the server,
23
00:01:04,319 --> 00:01:07,510
there is no back-end code, and there's also no application
24
00:01:07,510 --> 00:01:08,730
whatsoever running.
25
00:01:08,730 --> 00:01:09,563
Okay?
26
00:01:09,563 --> 00:01:12,900
So, it's just a static web server serving static files,
27
00:01:12,900 --> 00:01:15,670
exactly like I mentioned in the last video.
28
00:01:15,670 --> 00:01:17,460
Now, you might think, wait,
29
00:01:17,460 --> 00:01:19,233
when there is JavaScript on the page,
30
00:01:19,233 --> 00:01:21,290
then there are usually dynamic effects,
31
00:01:21,290 --> 00:01:23,610
like animations and stuff, right?
32
00:01:23,610 --> 00:01:26,480
Well, that dynamic that you mean there
33
00:01:26,480 --> 00:01:28,050
is a different dynamic.
34
00:01:28,050 --> 00:01:31,580
It's just in the context of front-end development.
35
00:01:31,580 --> 00:01:34,370
In the browser context, dynamic has nothing to do
36
00:01:34,370 --> 00:01:37,200
with effects on a page or things moving around
37
00:01:37,200 --> 00:01:40,570
but with the way websites are generated on servers.
38
00:01:40,570 --> 00:01:41,870
Okay?
39
00:01:41,870 --> 00:01:45,210
So, dynamic websites are different from static websites
40
00:01:45,210 --> 00:01:47,440
because they are usually built on the server
41
00:01:47,440 --> 00:01:50,090
each time a new request comes in.
42
00:01:50,090 --> 00:01:51,740
So, like we saw in the last video,
43
00:01:51,740 --> 00:01:55,040
dynamic websites usually contain a database,
44
00:01:55,040 --> 00:01:57,410
then there's also an application running,
45
00:01:57,410 --> 00:02:01,400
like a Node.js app, which fetches data from the database,
46
00:02:01,400 --> 00:02:04,340
and then, together with a predefined template,
47
00:02:04,340 --> 00:02:07,730
builds each page that the user requests dynamically
48
00:02:07,730 --> 00:02:10,669
based on data coming from the database.
49
00:02:10,669 --> 00:02:13,360
So, each time a browser requests a page,
50
00:02:13,360 --> 00:02:18,360
that page is then built as HTML, CSS, and JavaScript files,
51
00:02:18,560 --> 00:02:21,640
which will then be sent back to the browser.
52
00:02:21,640 --> 00:02:23,790
This whole process is sometimes called
53
00:02:23,790 --> 00:02:25,860
server-side rendering.
54
00:02:25,860 --> 00:02:28,540
So, again, that's why it's called dynamic,
55
00:02:28,540 --> 00:02:31,560
because the website can change all the time according
56
00:02:31,560 --> 00:02:33,700
to the content that's in the database
57
00:02:33,700 --> 00:02:36,520
or user's actions on the site.
58
00:02:36,520 --> 00:02:38,870
For example, if you logged into Twitter,
59
00:02:38,870 --> 00:02:41,140
it will show you a completely different page
60
00:02:41,140 --> 00:02:43,510
than when you logged out, right?
61
00:02:43,510 --> 00:02:45,920
And it will also show you a different page tomorrow
62
00:02:45,920 --> 00:02:48,600
than it did today because there are new tweets,
63
00:02:48,600 --> 00:02:50,938
so new data in the database.
64
00:02:50,938 --> 00:02:54,330
And that is what dynamic websites are all about.
65
00:02:54,330 --> 00:02:56,860
Now, if you, for example, go to Jonas.io,
66
00:02:56,860 --> 00:02:58,223
and you should, by the way,
67
00:02:59,150 --> 00:03:01,130
then you will always see the same content,
68
00:03:01,130 --> 00:03:03,680
the same website, no matter when you visit
69
00:03:03,680 --> 00:03:05,060
or what you do there.
70
00:03:05,060 --> 00:03:08,870
And so, that means that it's a static page, all right?
71
00:03:08,870 --> 00:03:10,950
Does this difference make sense?
72
00:03:10,950 --> 00:03:14,200
Now, sometimes we use the term dynamic websites
73
00:03:14,200 --> 00:03:16,450
and sometimes the term web application,
74
00:03:16,450 --> 00:03:18,790
but they are kind of the same thing.
75
00:03:18,790 --> 00:03:21,320
Usually when people refer to web applications,
76
00:03:21,320 --> 00:03:24,450
they mean a dynamic website with some functionality
77
00:03:24,450 --> 00:03:27,180
like logging in, creating user profiles,
78
00:03:27,180 --> 00:03:30,540
searching for stuff, and things like that in general.
79
00:03:30,540 --> 00:03:34,220
Websites are, for example, something like a WordPress blog.
80
00:03:34,220 --> 00:03:36,380
They are still generated dynamically,
81
00:03:36,380 --> 00:03:39,793
but we can't really do anything but reading them, right?
82
00:03:40,790 --> 00:03:44,510
And traditionally, static and dynamic websites were the only
83
00:03:44,510 --> 00:03:47,300
two types of websites, but in recent years,
84
00:03:47,300 --> 00:03:49,840
thanks to how powerful browsers have become
85
00:03:49,840 --> 00:03:53,070
on the client side, we see more and more websites
86
00:03:53,070 --> 00:03:55,930
that are, basically, based on APIs.
87
00:03:55,930 --> 00:03:57,580
So, let's learn how these work
88
00:03:57,580 --> 00:04:00,193
and how we can use Node.js to power them.
89
00:04:02,060 --> 00:04:04,430
Let's just keep the dynamic websites here in the slide
90
00:04:04,430 --> 00:04:07,380
so that we can better compare the two.
91
00:04:07,380 --> 00:04:10,610
So, just like with the dynamic websites,
92
00:04:10,610 --> 00:04:13,880
we have a database here and we have an app
93
00:04:13,880 --> 00:04:16,019
that fetches data from the database
94
00:04:16,019 --> 00:04:20,089
each time a client makes a request, so in that sense,
95
00:04:20,089 --> 00:04:23,210
an API-powered website is actually quite similar
96
00:04:23,210 --> 00:04:25,150
to a dynamic website.
97
00:04:25,150 --> 00:04:27,820
So, both work dynamically.
98
00:04:27,820 --> 00:04:31,130
Now, the big difference here is that with an API,
99
00:04:31,130 --> 00:04:33,890
we only send the data to the browser,
100
00:04:33,890 --> 00:04:36,340
usually in the JSON data format,
101
00:04:36,340 --> 00:04:38,990
and not the entire website.
102
00:04:38,990 --> 00:04:42,090
So, again, just the data is sent to the client
103
00:04:42,090 --> 00:04:44,670
and not the ready to be displayed website.
104
00:04:44,670 --> 00:04:49,670
So, no HTML, no CSS, only the JSON data, all right?
105
00:04:49,860 --> 00:04:52,370
So, when building API-powered websites,
106
00:04:52,370 --> 00:04:54,670
there is always these two steps,
107
00:04:54,670 --> 00:04:58,100
building an API and then consuming the API
108
00:04:58,100 --> 00:05:01,110
on the client side, and by the way,
109
00:05:01,110 --> 00:05:04,850
API stands for application programming interface,
110
00:05:04,850 --> 00:05:07,800
and on a very high level, it's basically a piece
111
00:05:07,800 --> 00:05:11,260
of software that can be used by another piece of software
112
00:05:11,260 --> 00:05:15,340
to, basically, allow applications to talk to each other.
113
00:05:15,340 --> 00:05:17,220
And we will talk a bit more deeply about
114
00:05:17,220 --> 00:05:21,160
what an API actually is once we start building one.
115
00:05:21,160 --> 00:05:24,750
Anyway, now about the client side I just mentioned.
116
00:05:24,750 --> 00:05:28,300
So, this is where the website is then actually assembled
117
00:05:28,300 --> 00:05:31,470
by plugging the data that we receive into some sort
118
00:05:31,470 --> 00:05:35,500
of templates, usually using some fancy front-end framework
119
00:05:35,500 --> 00:05:38,600
like React, Angular, or Vue.
120
00:05:38,600 --> 00:05:40,540
I'm not gonna go into specifics here
121
00:05:40,540 --> 00:05:43,170
because that would be for a front-end course,
122
00:05:43,170 --> 00:05:46,080
but in very general terms, this is how it works.
123
00:05:46,080 --> 00:05:49,200
So, you see that when builidng an API-powered website,
124
00:05:49,200 --> 00:05:52,080
the building phase of the website kind of moved
125
00:05:52,080 --> 00:05:54,970
from the back end to the front end, right?
126
00:05:54,970 --> 00:05:59,410
Or we can also say it moved from the server to the client.
127
00:05:59,410 --> 00:06:01,120
That's why many times you will see
128
00:06:01,120 --> 00:06:04,560
dynamic websites being called server-side rendered
129
00:06:04,560 --> 00:06:07,730
because they're actually built on the server.
130
00:06:07,730 --> 00:06:10,980
On the other hand, API-powered websites are often
131
00:06:10,980 --> 00:06:15,360
called client-side rendered, which makes sense, right?
132
00:06:15,360 --> 00:06:17,200
So, for us back-end developers,
133
00:06:17,200 --> 00:06:20,750
it's actually far easier to just build an API
134
00:06:20,750 --> 00:06:24,460
and let the front-end people build a site, right?
135
00:06:24,460 --> 00:06:27,760
And in fact, Node is an absolutely perfect tool
136
00:06:27,760 --> 00:06:31,510
for building APIs, and it's very commonly used for that,
137
00:06:31,510 --> 00:06:33,610
but of course, it's also perfectly suitable
138
00:06:33,610 --> 00:06:37,210
to build a dynamic server-side rendered website.
139
00:06:37,210 --> 00:06:40,730
So, in this course, we will actually do both versions,
140
00:06:40,730 --> 00:06:43,960
starting with the API, and by the end of the course,
141
00:06:43,960 --> 00:06:47,870
also building a rendered website using the exact same data.
142
00:06:47,870 --> 00:06:51,670
I chose to do both because I believe it's extremely
143
00:06:51,670 --> 00:06:54,960
important for you to know how to build both an API
144
00:06:54,960 --> 00:06:56,710
and a server-side rendered website.
145
00:06:58,150 --> 00:06:59,840
And now just to finish this video,
146
00:06:59,840 --> 00:07:02,020
I wanted to quickly mention that the APIs
147
00:07:02,020 --> 00:07:05,630
that we build with Node, or really, any other language,
148
00:07:05,630 --> 00:07:07,150
can, of course, be consumed
149
00:07:07,150 --> 00:07:09,930
by other clients than just the browser,
150
00:07:09,930 --> 00:07:12,920
which is a huge advantage of building an API instead
151
00:07:12,920 --> 00:07:15,350
of a server-side rendered website.
152
00:07:15,350 --> 00:07:17,320
So, let's say we build an example API
153
00:07:17,320 --> 00:07:22,320
on jonas.io/api/myCourseData.
154
00:07:22,380 --> 00:07:27,350
So, whenever we hit that URL, the server will send back data
155
00:07:27,350 --> 00:07:28,980
about the web development courses
156
00:07:28,980 --> 00:07:31,130
that I am currently teaching.
157
00:07:31,130 --> 00:07:33,970
Now, so far we only talked about requests
158
00:07:33,970 --> 00:07:38,060
coming from web browsers, but we could also request
159
00:07:38,060 --> 00:07:41,060
and then consume the exact same JSON data
160
00:07:41,060 --> 00:07:44,860
on a native iOS app or an Android app,
161
00:07:44,860 --> 00:07:47,890
or even on desktop apps for the Mac
162
00:07:47,890 --> 00:07:50,440
or for Windows computers.
163
00:07:50,440 --> 00:07:54,130
The possibilities are really endless when we build an API
164
00:07:54,130 --> 00:07:56,640
because we simply have one data source,
165
00:07:56,640 --> 00:07:59,380
which can then be requested and used anywhere,
166
00:07:59,380 --> 00:08:00,880
not just browsers.
167
00:08:00,880 --> 00:08:03,210
That's kind of the problem when we build a normal
168
00:08:03,210 --> 00:08:04,520
dynamic website.
169
00:08:04,520 --> 00:08:07,700
We return HTML and CSS and JavaScript files,
170
00:08:07,700 --> 00:08:10,960
and only browsers can really understand these,
171
00:08:10,960 --> 00:08:14,470
so we're then trapped into that single platform.
172
00:08:14,470 --> 00:08:16,840
And that might not be a problem in many cases,
173
00:08:16,840 --> 00:08:19,860
but for complex products that require a lot of apps
174
00:08:19,860 --> 00:08:22,350
and then websites and web apps,
175
00:08:22,350 --> 00:08:25,450
usually, an API is always needed.
176
00:08:25,450 --> 00:08:29,530
So, in this example on Jonas.io, I could build this API
177
00:08:29,530 --> 00:08:32,820
and then build an API-powered website and some apps
178
00:08:32,820 --> 00:08:35,020
and get my data on all these clients
179
00:08:35,020 --> 00:08:37,830
from just one source, all right?
180
00:08:37,830 --> 00:08:41,100
And some people or teams don't even have any client
181
00:08:41,100 --> 00:08:44,240
of their own at all and simply sell access
182
00:08:44,240 --> 00:08:46,120
to their API to third parties
183
00:08:46,120 --> 00:08:49,560
who will then consume these APIs and not their own.
184
00:08:49,560 --> 00:08:51,680
So, there are really entire businesses
185
00:08:51,680 --> 00:08:54,830
built around this philosophy of just selling an API
186
00:08:54,830 --> 00:08:56,563
to other developers or companies.
187
00:08:57,520 --> 00:09:00,670
Anyway, I hope that with this final slide the concept
188
00:09:00,670 --> 00:09:03,740
and reason and, kind of, philosophy
189
00:09:03,740 --> 00:09:07,380
behind building APIs now became crystal clear to you.
190
00:09:07,380 --> 00:09:09,313
So, let's now move on.
15476
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.