1
00:00:02,210 --> 00:00:10,700
NPM was created for developers to be able to share JavaScript code that they have written. This way

2
00:00:10,790 --> 00:00:16,660
any developer around the world can grab somebody else's code that may solve his or her problem.

3
00:00:17,780 --> 00:00:23,780
This creates a great knowledge base of scripts that people can constantly update or improve and build

4
00:00:23,780 --> 00:00:26,330
on top of. As a matter of fact,

5
00:00:26,330 --> 00:00:32,140
it is very rare that an app or a Web site these days are built purely from scratch.

6
00:00:32,990 --> 00:00:39,140
By using the collective intelligence we can grab pieces of code that are really good and build on top

7
00:00:39,140 --> 00:00:40,950
of it to create our product.

8
00:00:41,710 --> 00:00:48,070
For example using JavaScript you can write virtual reality applications but you don't have to figure

9
00:00:48,070 --> 00:00:50,120
out everything yourself.

10
00:00:50,140 --> 00:00:56,980
Someone out there already worked on being able to use JavaScript VR So you use that person's code to

11
00:00:56,980 --> 00:00:58,200
start your project.

12
00:00:58,270 --> 00:01:01,190
Lets talk about how NPM works.

13
00:01:02,650 --> 00:01:05,489
NPM looks like this.

14
00:01:05,560 --> 00:01:13,180
A Web site with a search bar kind of looks like Google but here you can search for what we call Packages

15
00:01:15,210 --> 00:01:23,180
and these packages are located in the NPM Registry and this Registry keeps track of files that have

16
00:01:23,180 --> 00:01:25,130
been submitted.

17
00:01:25,180 --> 00:01:33,100
Anybody can submit these files that are called packages or modules and they contain two things;

18
00:01:33,100 --> 00:01:35,640
A JavaScript file and a package.json file.

19
00:01:35,680 --> 00:01:43,010
and the package.json file which you've never seen before is a metafile that describes

20
00:01:43,280 --> 00:01:45,020
this package.

21
00:01:45,230 --> 00:01:54,540
So you can see here that this NPM registry is just a registry of all these files of JavaScript that

22
00:01:54,570 --> 00:01:55,770
other people have written.

23
00:01:56,850 --> 00:02:03,090
And the idea is to have small JavaScript files that do one thing really really well so that other people

24
00:02:03,270 --> 00:02:03,950
can use it.

25
00:02:05,140 --> 00:02:16,820
You then compose or combine different pieces of code and different packages on your project to add functionality

26
00:02:17,660 --> 00:02:22,400
and not have to rewrite something that has already been written by another person.

27
00:02:23,110 --> 00:02:29,980
So as you can see here I have let's say a person that has just written a JavaScript file that is really

28
00:02:29,980 --> 00:02:30,970
really useful.

29
00:02:30,970 --> 00:02:39,100
Well they think that other people might be able to use it so they push it up to the NPM Registry and

30
00:02:39,100 --> 00:02:46,670
by using the search bar over here somebody can find your package maybe they're looking to have a script file

31
00:02:46,720 --> 00:02:52,460
that creates a list of arrays for people interested in cats.

32
00:02:52,570 --> 00:03:02,100
Well then they are able to find this file and download it from NPM Registry onto their computer.

33
00:03:02,170 --> 00:03:05,140
So let's talk about the benefits from this.

34
00:03:06,470 --> 00:03:11,360
Well you get expertise from others, maybe you don't know everything,

35
00:03:11,370 --> 00:03:13,560
maybe others are better than you at

36
00:03:13,630 --> 00:03:18,280
this certain thing well you use that collective knowledge to use their code.

37
00:03:19,180 --> 00:03:21,580
But there's also a downside to this.

38
00:03:21,780 --> 00:03:24,770
Not all packages are good code.

39
00:03:24,840 --> 00:03:34,080
Anybody can put up their file to NPM, and you're also adding more bytes to your project which makes your

40
00:03:34,080 --> 00:03:36,210
project size even bigger.

41
00:03:36,210 --> 00:03:43,940
If you got all these files down into your project, well, that's a lot of files and each one is going to

42
00:03:43,940 --> 00:03:47,820
have to be sent from the server to the browser.

43
00:03:48,050 --> 00:03:54,110
And as you know from previous sections we want to minimize the size of our project so we built fast

44
00:03:54,250 --> 00:04:01,540
web apps and there is an art to finding good NPM packages and you will get used to it after a bit of

45
00:04:01,540 --> 00:04:02,300
experience.

46
00:04:02,320 --> 00:04:04,000
So don't worry.
 

47
00:04:04,270 --> 00:04:08,380
Now you also see here that I have something called the yarn.

48
00:04:08,690 --> 00:04:15,320
yarn still uses the NPM Registry but you might see it every once in a while just like NPM.

49
00:04:15,370 --> 00:04:19,010
It's a tool to grab things from the NPM Registry.

50
00:04:19,029 --> 00:04:26,560
We won't talk about it in this course but just keep in mind that both yarn and NPM are very very similar.

51
00:04:26,560 --> 00:04:32,800
If you learn one then you know the other so don't be afraid if you hear of a project that uses yarn

52
00:04:32,800 --> 00:04:38,470
instead of NPM. Now you can browse NPM and find things.

53
00:04:38,790 --> 00:04:42,840
But there's usually three types of packages.

54
00:04:43,060 --> 00:04:46,640
One is packages that you can use on the browser.

55
00:04:46,640 --> 00:04:52,390
So on the Front End, so that is you can download JQuery from NPM.

56
00:04:52,850 --> 00:04:58,010
You can download all sorts of scripts that help you with front end workflow.

57
00:04:58,030 --> 00:05:04,330
The second type are ones that give you new commands that you can use on the command line and I'll show you

58
00:05:04,330 --> 00:05:06,760
an example that later on in this section.

59
00:05:06,790 --> 00:05:15,100
And finally the third type of NPM package is once that you can use on Node.js on the Back End. 

60
00:05:15,100 --> 00:05:21,640
And that might sound scary to you but don't worry when we get to the Node.js section, I'll show you some of the Node packages

61
00:05:21,640 --> 00:05:25,240
that you can use, but it's pretty much the same thing as JavaScript.

62
00:05:25,480 --> 00:05:29,610
As a matter of fact NPM stands for Node Package Manager.

63
00:05:29,620 --> 00:05:35,200
It was initially built for node but it was so good and so popular that you can now use it for the Front End

64
00:05:35,200 --> 00:05:36,220
as well.

65
00:05:36,930 --> 00:05:38,820
But it's all the same thing.

66
00:05:38,820 --> 00:05:40,430
It all works the same.

67
00:05:40,530 --> 00:05:43,330
Like I said before they're just scripts that are

68
00:05:43,350 --> 00:05:49,710
you're able to use that other people have written and we're going to be using them a lot in this course.

69
00:05:49,710 --> 00:05:53,730
Now you might be asking yourself, why are we learning this.

70
00:05:53,790 --> 00:05:57,600
and this course? I mean, is it really that important?

71
00:05:57,960 --> 00:06:00,710
Yeah, actually there are three must do things.

72
00:06:00,810 --> 00:06:06,570
Now when starting a project and you'll see it in every single project.

73
00:06:06,570 --> 00:06:09,690
One is that -well, they have an HTML file,

74
00:06:09,820 --> 00:06:12,610
CSS file or JavaScript file.

75
00:06:12,960 --> 00:06:18,660
They may have -they might have multiple of these but all projects have those especially ones that are

76
00:06:18,660 --> 00:06:19,820
web based.

77
00:06:19,830 --> 00:06:27,060
You also have to have your project on github and use source control like Git. Nobody stores their own

78
00:06:27,060 --> 00:06:28,260
project on their computer.

79
00:06:28,260 --> 00:06:31,820
They always have it with source control.

80
00:06:31,950 --> 00:06:39,090
And finally you manage dependencies which is packages that other people have written. With NPM using

81
00:06:39,300 --> 00:06:41,480
package.json file.

82
00:06:41,490 --> 00:06:48,300
So in this section we're going to be working on this and finishing up our set up of how a typical project

83
00:06:48,300 --> 00:06:52,520
looks like and we know how to do the first two, right?

84
00:06:52,770 --> 00:06:58,650
Now in the next two videos I'm going to show you how to start using NPM to download files and using

85
00:06:58,650 --> 00:07:01,900
package.json to manage those files.

86
00:07:02,250 --> 00:07:07,060
It is a critical part of a developer workflow. So I'll see you in the next one. byebye.