1
00:00:00,210 --> 00:00:05,960
In this video we're going to answer a single question which is what exactly is node j.

2
00:00:05,960 --> 00:00:12,390
S No J.S. came about when the original developers took javascript something that at that point we could

3
00:00:12,390 --> 00:00:18,700
really only run in the browser and they allowed it to run as a standalone process on your machine.

4
00:00:18,750 --> 00:00:24,940
So before node javascript just could not be used as a more general purpose programming language.

5
00:00:25,020 --> 00:00:28,470
It was limited to what the browser allowed it to do.

6
00:00:28,470 --> 00:00:34,800
So for example I could use javascript to add a click event to this button or to redirect a user to a

7
00:00:34,800 --> 00:00:36,060
different page.

8
00:00:36,060 --> 00:00:41,640
But there was no way to use the javascript programming language outside of the browser to build things

9
00:00:41,640 --> 00:00:46,950
like web servers that could access the file system and connect to databases.

10
00:00:46,950 --> 00:00:51,540
All of these are things that other programming languages can do without any problem.

11
00:00:51,540 --> 00:00:58,440
All of this ended up changing with the introduction of node j s with no J.S. javascript developers could

12
00:00:58,440 --> 00:01:05,760
now use javascript on the server side so they could use the same javascript programming language to

13
00:01:05,760 --> 00:01:12,480
create web servers command line interfaces application back ends and more all of which will end up covering

14
00:01:12,570 --> 00:01:13,990
in the class.

15
00:01:14,070 --> 00:01:16,470
So at a high level you know what node is.

16
00:01:16,470 --> 00:01:23,700
Note as a way to run javascript code on the server as opposed to being forced to run it on the client

17
00:01:23,910 --> 00:01:25,080
in the browser.

18
00:01:25,080 --> 00:01:31,320
Now the question has to be asked how exactly is this possible and we're going to explore the answer

19
00:01:31,470 --> 00:01:36,330
by starting with this one sentence summary on the Node J.S. home page.

20
00:01:36,330 --> 00:01:37,670
We're gonna read this out.

21
00:01:37,740 --> 00:01:42,090
Break it down and it's going to shed some light on what exactly is happening here.

22
00:01:42,120 --> 00:01:50,370
So no J.S. is a javascript runtime built on Chrome's v 8 JavaScript engine and it all comes back to

23
00:01:50,370 --> 00:01:52,440
this javascript engine.

24
00:01:52,440 --> 00:01:55,740
Now there are all sorts of JavaScript engines out there.

25
00:01:55,740 --> 00:02:03,000
Pretty much every major browser has their own node j s uses the V8 JavaScript engine and that's the

26
00:02:03,000 --> 00:02:10,850
same JavaScript engine that powers the Chrome browser and V8 is a Google open source project.

27
00:02:10,860 --> 00:02:17,610
The job of the JavaScript engine whether it's V8 or any of the other ones out there is to take in JavaScript

28
00:02:17,610 --> 00:02:23,110
code and compile it down to machine code that your machine can actually execute.

29
00:02:23,130 --> 00:02:27,840
Now the the 8 engine is written in the C++ programming language.

30
00:02:27,930 --> 00:02:34,740
That means anyone out there could write a C++ application they could incorporate the V8 JavaScript engine

31
00:02:34,800 --> 00:02:39,840
into their application and you could extend the functionality that JavaScript provides.

32
00:02:39,930 --> 00:02:44,100
And that is exactly what both chrome and no J S do.

33
00:02:44,100 --> 00:02:49,320
Both chrome and no J S are largely written in C++.

34
00:02:49,320 --> 00:02:55,370
Now you'll notice right here it says that no JSA is a javascript runtime and that's true.

35
00:02:55,500 --> 00:02:58,780
No JSA is not a programming language.

36
00:02:58,830 --> 00:03:04,480
In the end of the day all of the code we're gonna write in this class is indeed javascript code.

37
00:03:04,710 --> 00:03:11,880
The runtime is something that provides custom functionality so various tools and libraries specific

38
00:03:11,910 --> 00:03:13,170
to an environment.

39
00:03:13,170 --> 00:03:20,880
So in the case of Chrome it provides V8 with various objects and functions that allow javascript developers

40
00:03:20,970 --> 00:03:26,890
in the Chrome browser to do things like add a button click events or manipulate the DOM.

41
00:03:26,910 --> 00:03:31,980
Now neither of those features makes sense for a node where we don't have buttons and we don't have a

42
00:03:31,980 --> 00:03:35,010
dumb so node doesn't provide those things.

43
00:03:35,010 --> 00:03:42,270
Instead the node runtime provides various tools that node developers need libraries for setting up web

44
00:03:42,270 --> 00:03:48,120
servers integrating with the file systems so you can read and write from disk and then the end of the

45
00:03:48,120 --> 00:03:55,030
day both chrome and no J.S. are just creating their own modified version of JavaScript.

46
00:03:55,110 --> 00:04:00,840
Now in the end of the day it's still that same core javascript language but with custom functions and

47
00:04:00,900 --> 00:04:02,530
objects injected.

48
00:04:02,610 --> 00:04:08,850
Now this is actually a really important concept so I've put together a quick visualization to walk us

49
00:04:08,850 --> 00:04:10,880
through exactly what's happening here.

50
00:04:10,980 --> 00:04:13,670
So let's take a couple of minutes to jump into that.

51
00:04:13,740 --> 00:04:19,290
As I mentioned we have the Chrome browser and the Chrome browser uses the V8 JavaScript engine.

52
00:04:19,290 --> 00:04:25,140
Now when chrome needs to run some javascript for a particular Web page it doesn't run the JavaScript

53
00:04:25,140 --> 00:04:25,830
itself.

54
00:04:25,830 --> 00:04:26,610
It can't.

55
00:04:26,610 --> 00:04:33,970
Instead it uses the V8 engine to get that done so it passes the code to V8 and it gets the results back.

56
00:04:34,140 --> 00:04:39,950
Now the same exact thing is true with Node node does not know how to run javascript code.

57
00:04:39,990 --> 00:04:46,920
It also uses that V8 engine so a node needs to run a script it passes that script down to the 8 and

58
00:04:46,920 --> 00:04:49,790
in the end of the day it gets those results back.

59
00:04:49,860 --> 00:04:56,940
Now I mentioned that V8 is written in C++ and I also mentioned that both chrome and Node are largely

60
00:04:56,940 --> 00:05:00,710
written in C++ and once again that's no incidents.

61
00:05:00,770 --> 00:05:07,520
The reason that both chrome and Node use so much C++ is that they're both providing bindings when they're

62
00:05:07,520 --> 00:05:10,210
instantiating the V8 engine.

63
00:05:10,220 --> 00:05:15,770
This is what allows them to create their own javascript runtime with interesting and novel features.

64
00:05:15,770 --> 00:05:22,190
It's what allows Chrome to interact with the DOM when the DOM isn't part of JavaScript and it allows

65
00:05:22,190 --> 00:05:28,330
node to interact with your file system when the file system isn't part of JavaScript either.

66
00:05:28,430 --> 00:05:35,730
So V8 has no idea how to interact with the file system with JavaScript or what the dumb is.

67
00:05:35,900 --> 00:05:42,340
It is up to node and Chrome to provide implementations for those when running the eight.

68
00:05:42,350 --> 00:05:44,120
What does this process look like.

69
00:05:44,150 --> 00:05:45,680
Well we have a table.

70
00:05:45,710 --> 00:05:51,110
It's not really a table but it's convenient to think of it as a table and we have a set of JavaScript

71
00:05:51,140 --> 00:05:55,630
methods and objects and we have a set of C++ functions.

72
00:05:55,730 --> 00:06:00,140
So on the left I've picked two very popular javascript methods.

73
00:06:00,140 --> 00:06:06,560
Here I have local storage dot get item which would fetch an item out of local storage and I have document

74
00:06:06,560 --> 00:06:12,380
dot query selector which would allow me to query some elements from the Dom and then do something with

75
00:06:12,380 --> 00:06:15,700
them like deleting them or changing their contents.

76
00:06:15,710 --> 00:06:21,810
Now it might surprise you but neither of these are part of the javascript programming language itself.

77
00:06:21,860 --> 00:06:26,090
You can pull up the specification you can search for them but you're not going to find them.

78
00:06:26,360 --> 00:06:30,320
That's because they're actually implemented by the chrome runtime.

79
00:06:30,320 --> 00:06:36,980
When chrome runs a javascript file that uses either of these in the end of the day some C++ code gets

80
00:06:37,010 --> 00:06:42,650
executed behind the scenes which is responsible for taking care of the functionality.

81
00:06:42,680 --> 00:06:50,360
That's my chrome has so much C++ code no chrome needs to tell V8 what to do when these methods are called

82
00:06:50,600 --> 00:06:58,490
so Chrome's not just passing javascript code to V8 it is also passing down these C++ bindings creating

83
00:06:58,490 --> 00:07:02,850
the context for which the javascript code should be executed.

84
00:07:02,900 --> 00:07:09,560
Now the exact same thing is true with node j s over here I've picked out a couple of node j s methods

85
00:07:09,560 --> 00:07:12,740
that you'll be familiar with by the end of the next section.

86
00:07:12,740 --> 00:07:20,270
I have f asked to read file F S stands for file system and read file allows me to read the contents

87
00:07:20,330 --> 00:07:22,070
of a file from disk.

88
00:07:22,070 --> 00:07:28,790
I also have OS dot platform OS of course standing for operating system and the platform method allows

89
00:07:28,790 --> 00:07:34,580
me to fetch the name of the platform I'm running on such as Windows Linux or Mac.

90
00:07:34,590 --> 00:07:40,370
Now neither of these methods once again are part of the javascript programming language they're provided

91
00:07:40,400 --> 00:07:44,940
to v 8 as part of the node j s runtime.

92
00:07:45,020 --> 00:07:50,760
So javascript doesn't know how to read a file from disk but C++ does.

93
00:07:50,840 --> 00:07:57,560
So when someone uses javascript code and no J S to read a file from disk it just defers all of that

94
00:07:57,680 --> 00:08:04,580
to the C++ function that can actually read the file from disk and get the results back to where they

95
00:08:04,580 --> 00:08:05,720
need to be.

96
00:08:05,720 --> 00:08:12,980
So once again we have a series of methods that can be used in our javascript code which are in reality

97
00:08:13,070 --> 00:08:16,430
just running C++ code behind the scenes.

98
00:08:16,430 --> 00:08:21,890
Now let's wrap up this video by going over a little code example that illustrates some of the differences

99
00:08:21,890 --> 00:08:29,040
and similarities between JavaScript in the browser and JavaScript inside of node j s so to start we're

100
00:08:29,050 --> 00:08:30,670
going to open up any Web site.

101
00:08:30,680 --> 00:08:35,690
I'm just going to use the no J.S. home page and we're gonna crack open the console.

102
00:08:35,690 --> 00:08:42,170
So from here I'm gonna go to settings more tools developer tools and we're just going to pull up the

103
00:08:42,170 --> 00:08:43,570
console tab.

104
00:08:43,610 --> 00:08:47,780
This is going to allow us to run individual javascript statements.

105
00:08:47,780 --> 00:08:54,600
So right here as an example I could type 2 plus 3 hit enter and I get the result 5 back.

106
00:08:54,680 --> 00:08:57,830
I could also create a string with my first name inside of it.

107
00:08:57,840 --> 00:09:06,920
Any string Andrew and I could use the string javascript method to upper case to convert that string

108
00:09:06,920 --> 00:09:10,380
to upper case and I get upper case Andrew back.

109
00:09:10,460 --> 00:09:12,950
Now we can do the exact same thing in note.

110
00:09:13,370 --> 00:09:19,970
Almost all of the note code we're gonna write in this class is going to live inside of files in a larger

111
00:09:19,970 --> 00:09:25,150
project and that'll happen over in visual studio code starting in just a couple of videos.

112
00:09:25,160 --> 00:09:31,190
But for the moment we're gonna go ahead and just mess around with node right here inside of the terminal.

113
00:09:31,190 --> 00:09:37,810
So let's go ahead and use clear this is a standard bash command allowing us to clear the output we're

114
00:09:37,810 --> 00:09:39,740
seeing if you're on Windows.

115
00:09:39,760 --> 00:09:46,240
You need to use C L s. That is the version of clear for your operating system and what we're gonna do

116
00:09:46,240 --> 00:09:49,400
from here is just run the node command.

117
00:09:49,420 --> 00:09:54,000
We're not going to put anything after it just n o d e and we hit enter.

118
00:09:54,040 --> 00:09:59,590
Now what we get here is a little place where we can run individual node statements also known as an

119
00:09:59,620 --> 00:10:06,670
R E P L which stands for read e Val print loop like the terminal it's waiting for us to run some commands

120
00:10:06,850 --> 00:10:12,550
but these are actually gonna be node javascript statements and not bash commands.

121
00:10:12,550 --> 00:10:14,410
So what are we going to do right here.

122
00:10:14,410 --> 00:10:19,450
We're gonna write some javascript code and hit enter exactly like we did over here and I'm going to

123
00:10:19,450 --> 00:10:23,250
use the exact same two things two plus three enter.

124
00:10:23,290 --> 00:10:24,770
What do I get five.

125
00:10:24,850 --> 00:10:31,810
Then I'll create the string Andrew and I'll use these string to upper case calling it.

126
00:10:31,810 --> 00:10:32,740
And what do I get.

127
00:10:32,860 --> 00:10:35,190
I get back to the uppercase string.

128
00:10:35,320 --> 00:10:42,070
Andrew So right here we can see that all of the core javascript features we're used to are still available

129
00:10:42,160 --> 00:10:48,220
when using Node J S because those are provided by the V8 engine itself.

130
00:10:48,220 --> 00:10:52,990
Now let's head over to the browser and start to explore a couple of the differences.

131
00:10:53,020 --> 00:10:58,900
If you've worked with JavaScript in the browser before then you're likely familiar with the window object

132
00:10:59,080 --> 00:11:02,760
the window object is a reference to our browser window.

133
00:11:02,860 --> 00:11:08,320
I can type window I can hit Enter that's going to dump the entire object to the console.

134
00:11:08,440 --> 00:11:13,010
And if we expand it we can view all of the different methods and properties we have access to.

135
00:11:13,090 --> 00:11:15,410
And there are quite literally hundreds of them.

136
00:11:15,490 --> 00:11:21,280
Right here we have some methods related to click events I have on click on change and others.

137
00:11:21,280 --> 00:11:25,810
And if I continue to scroll down we have things related to the window size.

138
00:11:25,810 --> 00:11:29,120
I have outer height outer width and others.

139
00:11:29,140 --> 00:11:35,320
Now all of these make sense in the context of JavaScript in the browser because we actually have a window

140
00:11:35,320 --> 00:11:36,270
to work with.

141
00:11:36,430 --> 00:11:40,670
What happens if I try to get the window in note I'm gonna type window.

142
00:11:40,900 --> 00:11:47,470
I'm gonna hit enter and I can see I'm getting an error reference error window is not defined so window

143
00:11:47,470 --> 00:11:53,560
is something specifically provided by the chrome runtime when javascript is running in the chrome application

144
00:11:53,800 --> 00:11:58,860
node doesn't have a window it doesn't need window so window is not provided.

145
00:11:59,020 --> 00:12:01,530
Now with node we have something kind of similar.

146
00:12:01,600 --> 00:12:08,230
We have a variable called global global stores a lot of the global things we're gonna be accessing throughout

147
00:12:08,230 --> 00:12:09,160
the course.

148
00:12:09,160 --> 00:12:14,670
And if we scroll up we can see we have dozens of different properties and methods available to us.

149
00:12:14,770 --> 00:12:20,050
We're not going to dive into any of these right now but we will be exploring several of them as we start

150
00:12:20,050 --> 00:12:24,640
to learn about node j as now does the browser have global.

151
00:12:24,640 --> 00:12:26,410
The browser does not.

152
00:12:26,410 --> 00:12:32,620
If I scroll all the way to the bottom I can run something new type global hit enter.

153
00:12:32,650 --> 00:12:33,420
What do I get.

154
00:12:33,520 --> 00:12:35,590
I get global is not defined.

155
00:12:35,590 --> 00:12:40,560
I actually misspelled it but I'll get the same result if I do indeed spell it correctly.

156
00:12:40,570 --> 00:12:42,940
Global is not defined.

157
00:12:42,970 --> 00:12:44,080
Now there's another difference.

158
00:12:44,080 --> 00:12:50,650
I'm going to point out before we wrap things up here in the browser I have access to document document

159
00:12:50,680 --> 00:12:53,060
allows me to work with the down.

160
00:12:53,080 --> 00:12:58,480
So right here I have a whole bunch of different elements that make up my page and I can use document

161
00:12:58,480 --> 00:13:01,570
to manipulate them in whatever way I see fit.

162
00:13:01,570 --> 00:13:06,100
Now this makes sense once again for the browser where we actually have a dom.

163
00:13:06,100 --> 00:13:09,220
It doesn't make sense for node where we don't have a dom.

164
00:13:09,310 --> 00:13:14,150
If I tried to print document to the terminal what do I get.

165
00:13:14,160 --> 00:13:17,770
Once again reference error document is not defined.

166
00:13:17,940 --> 00:13:23,080
Now in no JSA we have something kind of similar to document called process.

167
00:13:23,160 --> 00:13:30,450
Process gives us various properties and methods for manipulating the node process that's running.

168
00:13:30,450 --> 00:13:35,580
If I dump this to the terminal we can see there are all sorts of interesting methods and properties

169
00:13:35,820 --> 00:13:42,270
including one exit exit allows us to exit the current node process.

170
00:13:42,270 --> 00:13:48,010
Let's go ahead and actually use it to shut down our little note example right here.

171
00:13:48,210 --> 00:13:54,740
That's gonna be a process which is an object don't exit which is a method I'm gonna call it providing

172
00:13:54,740 --> 00:14:00,700
no arguments since it doesn't need any and all we're gonna do is run this statement by hitting enter.

173
00:14:00,770 --> 00:14:01,650
What do I get.

174
00:14:01,670 --> 00:14:07,310
I can see I'm brought back to the standard terminal where I could run other commands no longer am I

175
00:14:07,310 --> 00:14:14,570
running little node statements now process once again does not exist over in the browser that is specific

176
00:14:14,570 --> 00:14:20,990
to node j s if I type out process and dump it I get process is not defined.

177
00:14:21,110 --> 00:14:27,260
So here we're seeing some of the differences between JavaScript in the browser here specifically chrome

178
00:14:27,290 --> 00:14:29,160
but other browsers would be the same.

179
00:14:29,300 --> 00:14:35,660
And no J S which is javascript running on the server that's where we're going to stop for this one.

180
00:14:35,720 --> 00:14:38,040
Let's take a quick moment to summarize.

181
00:14:38,060 --> 00:14:41,380
No J.S. is javascript on these server.

182
00:14:41,420 --> 00:14:48,290
This is possible because no J.S. uses the V8 JavaScript engine to run all of the javascript code you

183
00:14:48,290 --> 00:14:49,270
provide.

184
00:14:49,280 --> 00:14:56,060
Now no JSA is able to teach javascript new things by providing C++ bindings to the 8.

185
00:14:56,060 --> 00:15:03,470
This allows JavaScript in essence to do anything that C++ can do and C++ can indeed access the file

186
00:15:03,470 --> 00:15:04,180
system.

187
00:15:04,190 --> 00:15:10,250
So now JavaScript can access the file system through node that's where we're going to stop for this

188
00:15:10,250 --> 00:15:10,730
one.

189
00:15:10,730 --> 00:15:15,770
And don't worry about memorizing all of this as we move through the course and start to see this in

190
00:15:15,770 --> 00:15:16,550
action.

191
00:15:16,550 --> 00:15:22,640
I'll bring up the individual pieces again in the next video we're gonna dive into what is also a very

192
00:15:22,640 --> 00:15:23,830
important question.

193
00:15:23,990 --> 00:15:27,930
Why should I learn node j s I'm excited to get to that.

194
00:15:27,950 --> 00:15:30,980
So let's go ahead and jump right in to the next video.