Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:06,900
In order to understand exactly what universal rendering is, let's talk about how HTML elements are
2
00:00:06,900 --> 00:00:10,710
rendered in a typical view application first.
3
00:00:11,100 --> 00:00:13,110
So right over here I have two rectangles.
4
00:00:13,170 --> 00:00:20,010
The gray one is going to represent our browser, whereas this green one is going to represent the view
5
00:00:20,010 --> 00:00:20,760
server.
6
00:00:21,060 --> 00:00:26,700
So let's say on my browser I go to WW dot my website dot com.
7
00:00:27,240 --> 00:00:32,610
So once I go onto this website, what's going to happen is the browser is going to make a request to
8
00:00:32,610 --> 00:00:38,490
the view server asking it for h html in order to render it in the screen.
9
00:00:39,270 --> 00:00:46,560
Now, what the view server is going to do by default is send back an empty HTML file.
10
00:00:46,860 --> 00:00:48,330
Now it's not going to be completely empty.
11
00:00:48,330 --> 00:00:53,400
It's going to have the HTML head as well as a body as well as maybe an empty div.
12
00:00:53,400 --> 00:00:57,810
But it's going to have none of the elements that we have defined in our review application.
13
00:00:58,260 --> 00:01:02,790
So other than just the typical boilerplate, it's going to be completely empty.
14
00:01:03,210 --> 00:01:07,290
Now, because of this, it's going to go ahead and render that, but we're not going to have any of
15
00:01:07,290 --> 00:01:08,190
our elements.
16
00:01:08,370 --> 00:01:12,180
And because of that, we're going to be currently in a loading state.
17
00:01:12,180 --> 00:01:16,050
So our user is not going to see our elements whatsoever.
18
00:01:16,710 --> 00:01:21,600
After a short period of time, it's then going to send the JavaScript file.
19
00:01:21,960 --> 00:01:27,780
Now the JavaScript file is going to contain all of the information about all of the different elements
20
00:01:27,780 --> 00:01:29,190
that we need on the screen.
21
00:01:29,190 --> 00:01:33,060
So it's going to contain all that information and it's going to create all of these different elements
22
00:01:33,060 --> 00:01:34,800
and render them on the screen.
23
00:01:35,370 --> 00:01:40,350
So the browser, what it's going to do is grab that JavaScript file and start parsing it.
24
00:01:40,740 --> 00:01:45,810
Now we're still going to be in a loading state, but as soon as it's done parsing, then we will have
25
00:01:45,810 --> 00:01:49,830
the elements all created and fully interactive.
26
00:01:50,280 --> 00:01:55,770
Now this right here is known as client side rendering.
27
00:01:56,100 --> 00:01:57,060
Why is that?
28
00:01:57,360 --> 00:02:04,350
Because the rendering of the UI elements is completely done in the client, the browser, not the server
29
00:02:04,770 --> 00:02:05,790
the client.
30
00:02:05,820 --> 00:02:12,030
Once we get the JavaScript file, the client is the one that passes it and creates the UI elements.
31
00:02:12,360 --> 00:02:14,370
So this is client side rendering.
32
00:02:14,670 --> 00:02:18,960
Now let's talk about another type of rendering called server side rendering.
33
00:02:19,680 --> 00:02:26,760
So in server side rendering, we have our browser, we have our server, we make the same exact request
34
00:02:26,970 --> 00:02:29,250
to my website dot com.
35
00:02:29,640 --> 00:02:37,440
And what ends up happening here is right away what we get is the HTML of that specific page and the
36
00:02:37,440 --> 00:02:38,400
JavaScript.
37
00:02:38,700 --> 00:02:43,500
So we get both right away and we don't just get an empty HTML file.
38
00:02:43,500 --> 00:02:47,090
We get again both the full elements as well as the jazz.
39
00:02:47,100 --> 00:02:52,440
And then right away you can see we have a fully interactive application.
40
00:02:52,740 --> 00:02:59,460
So that right there is server side rendering because the server is the one that is responsible for rendering
41
00:02:59,460 --> 00:03:00,150
the elements.
42
00:03:00,150 --> 00:03:04,170
And then well then it just sends it to the client and the client just uses it.
43
00:03:04,650 --> 00:03:06,660
So the server side rendering.
44
00:03:06,990 --> 00:03:13,800
So now that we understand both, let's talk about universal rendering, which is what Knox uses.
45
00:03:14,100 --> 00:03:18,210
So it's a little bit of both, a little bit of server side rendering as well as a little bit of client
46
00:03:18,210 --> 00:03:19,140
side rendering.
47
00:03:19,640 --> 00:03:27,900
So over here we have our browser, our server, we make a request and then our server is going to send
48
00:03:27,900 --> 00:03:31,050
back the HTML of that particular page.
49
00:03:31,410 --> 00:03:38,490
However, it is not going to send the yes, it's going to send just the HTML of that page.
50
00:03:38,910 --> 00:03:41,550
So as you can see here, we can render the UI elements.
51
00:03:41,560 --> 00:03:43,170
However, they're all grayed out.
52
00:03:43,180 --> 00:03:45,150
They are not interactive.
53
00:03:45,720 --> 00:03:49,650
After a short period of time, then it's going to send the edges.
54
00:03:50,010 --> 00:03:54,210
And what's going to happen is a process known as hydration.
55
00:03:54,600 --> 00:04:03,730
So hydration is where we actually make these static UI elements interactive by parsing the JavaScript.
56
00:04:03,750 --> 00:04:06,150
So that is exactly what hydration is.
57
00:04:06,420 --> 00:04:10,530
And at that point, then the UI elements are going to be functional.
58
00:04:10,770 --> 00:04:17,610
So there is going to be a period of time where this we can see the elements, but we can't really interact
59
00:04:17,610 --> 00:04:18,090
with them.
60
00:04:18,300 --> 00:04:24,120
And then only once we get the JavaScript and is passed and all the hydration is done, then they become
61
00:04:24,120 --> 00:04:26,370
interactive and we can actually use some.
62
00:04:26,760 --> 00:04:32,970
This right here is known as universal rendering, which is exactly what Linux utilizes.
6371
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.