1
00:00:01,410 --> 00:00:02,270
Welcome back.

2
00:00:02,520 --> 00:00:07,520
So this video is going to function as a sort of crash course in how the Internet works.

3
00:00:07,530 --> 00:00:13,410
For someone who wants to be a developer so it's meant to take you from avid Internet user like me who

4
00:00:13,410 --> 00:00:18,240
maybe doesn't understand a lot about how the Internet works because you don't have to to someone who

5
00:00:18,240 --> 00:00:22,980
still uses the Internet all the time but understands a little bit about how it works at a high level

6
00:00:22,980 --> 00:00:23,180
.

7
00:00:23,220 --> 00:00:27,960
It might be surprising but developers really don't need to know that the very low level nitty gritty

8
00:00:27,960 --> 00:00:33,810
about different data protocols and how they work in this TCAP IP stack in things that you may hear that

9
00:00:33,810 --> 00:00:35,030
are very intimidating.

10
00:00:35,190 --> 00:00:41,130
That's an entire discipline there's entire college majors and courses devoted towards how the Internet

11
00:00:41,130 --> 00:00:42,450
works at a low level.

12
00:00:42,690 --> 00:00:48,420
As a developer things are abstracted away so that we only need to understand the very basics more than

13
00:00:48,420 --> 00:00:49,940
your typical user of the Internet.

14
00:00:50,070 --> 00:00:55,590
But we don't have to be experts on all this very intimidating nitty gritty stuff.

15
00:00:55,590 --> 00:00:57,250
So few things we want to do here.

16
00:00:57,420 --> 00:01:00,150
We want to understand at a high level how the Internet works.

17
00:01:00,270 --> 00:01:05,340
Things like HGP IP domain names you are elsewhat are all those.

18
00:01:05,340 --> 00:01:06,550
How do they work together.

19
00:01:06,780 --> 00:01:09,920
We want to understand the difference between front end and back end element.

20
00:01:10,170 --> 00:01:12,540
Also full stack where does that fit in.

21
00:01:12,570 --> 00:01:16,420
And then we also want to be able to view the H Tim L on any website.

22
00:01:17,220 --> 00:01:20,340
So the first thing that I want to do here is actually watch a video.

23
00:01:20,550 --> 00:01:22,080
So the link is in the slide.

24
00:01:22,140 --> 00:01:25,900
It's also in the description of this video going to go ahead and open it up.

25
00:01:26,040 --> 00:01:28,430
Feel free to watch it on your own.

26
00:01:28,440 --> 00:01:33,270
I'm going to watch it in this video and just pause it a few moments and highlight a few important pieces

27
00:01:33,270 --> 00:01:43,470
.

28
00:01:43,620 --> 00:01:48,960
Have you ever wondered what happens when someone in England visits the World Science Festival web page

29
00:01:52,170 --> 00:01:53,210
first.

30
00:01:53,220 --> 00:01:58,470
Their computer needs to ask the World Science Festival server for a copy of that web page.

31
00:01:58,710 --> 00:02:04,830
The computer sticks this request into a virtual envelope called a packet wrapped with specific information

32
00:02:04,830 --> 00:02:12,150
about that request including the world's science festivals IP address the computer sends this packet

33
00:02:12,180 --> 00:02:18,450
out of the house and below the street via a large underground copper wires it passes through small regional

34
00:02:18,450 --> 00:02:22,130
networks before ending up here at Telehouse north in London.

35
00:02:22,440 --> 00:02:25,700
Telehouse north is England's main Internet hub.

36
00:02:25,740 --> 00:02:31,220
The IP address on this packet tells the hub that the world science festival server is actually in Lausanne

37
00:02:31,250 --> 00:02:36,120
and the first thing I want to just highlight there the user in this case went to a Web site.

38
00:02:36,180 --> 00:02:43,140
World Science Festival Web site or type that in and then hit enter and all of this is happening before

39
00:02:43,140 --> 00:02:44,680
the user sees anything.

40
00:02:44,760 --> 00:02:49,210
The idea is that a user is asking for a website or requesting it.

41
00:02:49,260 --> 00:02:52,140
And that's what it's called it's an H TTP request.

42
00:02:52,170 --> 00:02:59,460
So when I opened up this video YouTube dot com slash this you know when I hit Enter I'm asking for the

43
00:02:59,460 --> 00:03:05,640
contents of this page and that has to go all the way to YouTube somewhere and they have to send it all

44
00:03:05,640 --> 00:03:07,040
the way back to me.

45
00:03:07,050 --> 00:03:11,030
So so far we're still just getting the request to the right place.

46
00:03:11,430 --> 00:03:17,370
So Telehouse North sends the packet out is like across the Atlantic over fiber optic cables buried deep

47
00:03:17,370 --> 00:03:18,620
beneath the ocean.

48
00:03:18,780 --> 00:03:26,310
The packet ends up here 60 Hudson Street New York City the largest Internet hub on the East Coast.

49
00:03:26,760 --> 00:03:32,010
This hub sends the packet through a series of regional networks connecting New York to Los Angeles where

50
00:03:32,010 --> 00:03:34,760
the World Science Festival server resides.

51
00:03:35,220 --> 00:03:39,570
The server reads the request and gets ready to send the web page to English.

52
00:03:40,260 --> 00:03:46,170
But web page is made up of images and text are too large to send as a single packet of data.

53
00:03:46,170 --> 00:03:49,440
So how do we get it back to England.

54
00:03:49,440 --> 00:03:50,380
Imagine that.

55
00:03:50,450 --> 00:03:56,670
So at this point the request has made it all the way to the correct server and it's told that I'm looking

56
00:03:56,670 --> 00:03:57,650
for this page.

57
00:03:57,810 --> 00:04:02,880
And so now everything is on the return journey going from the server all the way back to the computer

58
00:04:02,940 --> 00:04:09,630
that asked for this specific page group of 5000 tourists visiting New York City in a single gigantic

59
00:04:09,630 --> 00:04:10,850
tour bus.

60
00:04:10,950 --> 00:04:15,730
They are way up in Harlem but they want to visit the Statue of Liberty before it closes.

61
00:04:15,840 --> 00:04:18,560
But it's rush hour on a Friday.

62
00:04:18,580 --> 00:04:23,490
There's no way that giant bus is going to fit through those crazy congested streets.

63
00:04:23,580 --> 00:04:28,260
So they decide to get off the bus and spread out some take the subway.

64
00:04:28,260 --> 00:04:34,480
Some take cabs a few rent bikes and some even take kayaks down the Hudson River.

65
00:04:34,650 --> 00:04:39,890
How they get there doesn't matter as long as they get there on time.

66
00:04:39,930 --> 00:04:42,740
Likewise for the Internet to work efficiently.

67
00:04:42,780 --> 00:04:49,410
This web pages pulverized into thousands of tiny packets of data each one racked with all of the information

68
00:04:49,410 --> 00:04:57,280
that needs to rebuild itself in the the kids are sent to L.A. one will sure hub which checks the traffic

69
00:04:57,280 --> 00:05:01,350
report before sending them on through miles and miles of land.

70
00:05:01,350 --> 00:05:07,270
They travel checking in through different hubs like are New York City tourists those packets don't care

71
00:05:07,270 --> 00:05:11,630
how they get there as long as they get there as fast as possible.

72
00:05:12,040 --> 00:05:17,080
Most of them will go through 60 Hudson in New York where they are redirected back to England is like

73
00:05:17,530 --> 00:05:20,640
riding a fibre of glasses thick as a silver dollar.

74
00:05:20,800 --> 00:05:26,960
Then back on copper wire through regional British networks into all the packets reached their destination

75
00:05:26,970 --> 00:05:27,000
.

76
00:05:27,010 --> 00:05:37,000
And and this epic journey it all happens in about a second along with trillions upon trillions of similar

77
00:05:37,000 --> 00:05:44,020
journeys that happen each and every day on this remarkable easy to take for granted network of networks

78
00:05:44,020 --> 00:05:47,850
we call the Internet.

79
00:05:48,070 --> 00:05:50,180
So hopefully you found the video fascinating.

80
00:05:50,200 --> 00:05:55,250
It certainly blows my mind even you know someone who does this a lot and who uses the Internet a lot

81
00:05:55,250 --> 00:05:55,300
.

82
00:05:55,300 --> 00:05:57,360
Makes Web sites makes applications.

83
00:05:57,370 --> 00:06:02,950
It's still so amazing the process that happens behind the scenes just for every single page that loads

84
00:06:04,150 --> 00:06:05,320
just reiterate.

85
00:06:05,320 --> 00:06:10,720
Let's take this example of when I go to this you around here and we dot com slash courses and I hit

86
00:06:10,720 --> 00:06:11,950
enter.

87
00:06:12,010 --> 00:06:18,220
Remember I'm asking for something and I'm getting something back and requesting something and the server

88
00:06:18,220 --> 00:06:19,810
is responding.

89
00:06:19,810 --> 00:06:21,660
And there's a lot of stuff that happens in between.

90
00:06:21,670 --> 00:06:24,900
But that's the core concept.

91
00:06:24,940 --> 00:06:29,680
So the very first step that happens and actually before I start there I want to let you know this is

92
00:06:29,680 --> 00:06:31,290
not something you need to memorize.

93
00:06:31,300 --> 00:06:35,740
This is purely conceptual stuff that is nice to know but you can always come back.

94
00:06:35,740 --> 00:06:36,680
You can look this up.

95
00:06:36,700 --> 00:06:38,400
You can watch this video up.

96
00:06:38,410 --> 00:06:44,320
The one thing I really want you to memorize and to be confident in is this idea of requests and responses

97
00:06:44,620 --> 00:06:49,530
asking for data and a server giving you that data and then your browser displaying it.

98
00:06:49,720 --> 00:06:56,620
So this step here when I go to you or I hit enter the first thing that happens is my computer needs

99
00:06:56,620 --> 00:07:00,520
to know the exact address to send a request to.

100
00:07:00,520 --> 00:07:04,750
Which is just like when you send a letter you need to have a unique address.

101
00:07:04,750 --> 00:07:07,200
No home has the same address as another home.

102
00:07:07,240 --> 00:07:10,840
They might look the same but they're in a different city or different different zip code or different

103
00:07:10,840 --> 00:07:11,600
country.

104
00:07:11,620 --> 00:07:12,460
They are unique.

105
00:07:12,550 --> 00:07:17,290
So we need that address so that our request goes to the right place.

106
00:07:17,290 --> 00:07:20,270
So the Sinko DNS it takes that domain name.

107
00:07:20,310 --> 00:07:25,840
You do need outcome and it translates it into this IP address which is a string of numbers and dots

108
00:07:25,910 --> 00:07:26,410
.

109
00:07:26,420 --> 00:07:28,560
This is a unique identifier.

110
00:07:29,050 --> 00:07:34,270
Once we have that then we actually send a letter to when we actually make the request.

111
00:07:34,270 --> 00:07:40,700
So in this case when I hit enter I am figuring out where my computer computers figuring out what does

112
00:07:40,880 --> 00:07:43,860
that mean to me Dotcom's IP address.

113
00:07:44,230 --> 00:07:44,700
OK.

114
00:07:44,740 --> 00:07:50,370
We have the IP address now but send a request asking for the course's page.

115
00:07:50,530 --> 00:07:55,690
So we make a request with an HTP request we'll talk a lot more about what that is and what they look

116
00:07:55,690 --> 00:07:56,130
like.

117
00:07:56,230 --> 00:07:59,260
And remember it's not just a one way direct shot there.

118
00:07:59,290 --> 00:08:04,480
Basically the request bounces around from server to server until we get to the server we're looking

119
00:08:04,480 --> 00:08:05,640
for.

120
00:08:06,370 --> 00:08:11,650
So when we get to the server the first part is that the server is going to figure out what am I asking

121
00:08:11,650 --> 00:08:19,330
for and my asking for the home page I'm asking for Slash courses page we're asking for the sign up page

122
00:08:19,820 --> 00:08:21,640
the become an instructor page.

123
00:08:21,670 --> 00:08:26,140
There's all sorts of different pieces here that I could be asking for and they're all different.

124
00:08:26,140 --> 00:08:30,500
So the service job is to figure out what to send back.

125
00:08:30,610 --> 00:08:35,950
When we do back in development that will be your job figuring out what content to send back.

126
00:08:35,950 --> 00:08:42,190
So then the server often interacts with the database that pulls out information and it makes the combination

127
00:08:42,190 --> 00:08:44,540
of each team l javascript and C S S.

128
00:08:44,560 --> 00:08:51,010
So then our server responds back sends us this combination of each team s and Javascript it's a bunch

129
00:08:51,010 --> 00:08:51,800
of code.

130
00:08:51,820 --> 00:08:55,450
It's not very readable for humans in our browser steps in.

131
00:08:55,450 --> 00:09:01,270
And it turns it into this it's the whole job our browser takes that information and it makes it easy

132
00:09:01,270 --> 00:09:02,910
to understand for humans.

133
00:09:03,340 --> 00:09:06,210
So this process happens on every single page of is it.

134
00:09:06,310 --> 00:09:11,260
And you can actually see the underlying H.M.S. assess on any page and Javascript.

135
00:09:11,290 --> 00:09:14,390
So there's a few ways of doing it in Chrome.

136
00:09:14,500 --> 00:09:16,570
And this is why we're all using Chrome.

137
00:09:16,570 --> 00:09:17,530
You can go.

138
00:09:17,680 --> 00:09:19,800
Let's go to this page here.

139
00:09:20,470 --> 00:09:27,070
I can right click and click View page source and it opens up a new window that actually contains all

140
00:09:27,070 --> 00:09:32,680
of the H.M.S. s s and javascript that is the underlying source for this page.

141
00:09:32,710 --> 00:09:36,520
Same thing on YouTube right click View page source.

142
00:09:36,520 --> 00:09:38,570
And so this is on every single site.

143
00:09:38,740 --> 00:09:40,430
So there's no way to hide this.

144
00:09:40,480 --> 00:09:42,490
The whole Java the browser takes this.

145
00:09:42,490 --> 00:09:45,520
And it turned it into this.

146
00:09:45,520 --> 00:09:47,950
So browsers are definitely complicated things.

147
00:09:47,950 --> 00:09:50,800
The good thing is you don't have to know how that works the browser.

148
00:09:50,800 --> 00:09:52,150
That's the whole drop her browser.

149
00:09:52,150 --> 00:09:54,870
It takes that code and it turns it into this.

150
00:09:54,880 --> 00:09:56,390
So another way you can do it.

151
00:09:56,500 --> 00:10:03,030
There's a shortcut in Chrome you can do a command option view on a PC.

152
00:10:03,030 --> 00:10:08,420
I believe it's control option you if not you can just right click and chrome and view it as well