Original subtitles

0 All right. 1

So, let's now finally use NPM for the first time. 2

And remember, NPM stands for Node Package Manager, 3

and it's both a software on our computer 4

and a package repository. 5

Now, before we jump straight into NPM, let's start 6

by understanding why we actually need something like NPM. 7

So, why do we actually need a way of managing packages 8

or dependencies in our project? 9

Well, back in the day before we had NPM, 10

we used to include external libraries right into our HTML. 11

So, basically using the script tag. 12

And this would then expose a global variable 13

that we could use, and actually that's exactly 14

what we did earlier in our Mapty project. 15

So, let's actually use or open that here. 16

So, Mapty and just the index.html file. 17

And so here it is, and you see that indeed, 18

we simply included the leaflet.js file basically using 19

a script tag and did that before or own script 20

so that our own script could then use the global variable 21

that was exposed by this library here, right? 22

Remember that? 23

Now, this actually creates a couple of problems, 24

at least in a big project so maybe not 25

in this particular project that is really small, 26

but in a huge project and a huge team, 27

this is just not manageable. 28

First, it doesn't make much sense having the HTML loading 29

all of JavaScript, that is just really messy. 30

Also many times we would actually download a library file 31

to our computer directly, for example, 32

a jQuery JavaScript file. 33

But then whenever a new version would come out, 34

we would have to manually go to the site, 35

download the new version, 36

change the file in our file system manually, 37

and then include it here again, maybe with some other name, 38

with some other version number. 39

And that was just a huge pain, believe me. 40

And a third reason is that before NPM, there simply wasn't 41

a single repository that contained all the packages 42

that we might need. 43

And so this made it even worse and more difficult 44

to manually download libraries and manage them 45

on our computers. 46

So in summary, this all used to be a huge pain 47

and a huge mess. 48

And maybe you even remember this yourself, 49

like the old days of jQuery and dozens of jQuery plugins 50

that you would have to keep updated. 51

But anyway, all of this is just to say that we really need 52

a way to manage our dependencies in a better 53

and more modern way. 54

And NPM is exactly how we do that. 55

And so, let's start by using the NPM software now. 56

Now right, so actually we will need to this terminal now, 57

so let me clear it. 58

And we start by checking if we actually have NPM installed. 59

So to do that, just type NPM dash V. 60

So, this will check for diversion 61

and if you get any number here and it doesn't matter 62

which one, then you're good. 63

Well, in fact it should actually be greater than six, okay? 64

So, anything that you have greater than six is good, 65

but if you did get an error 66

because you didn't install Node.js in one of 67

the previous sections, then please go to this website now. 68

So, Nodejs.org and then download and install the version 69

for your computer. 70

So, you can just use this LTS version, 71

you don't have to go with the current one. 72

And by the time you're watching this, 73

LTS is probably already at 14 or 16 or 18, who knows, 74

but that doesn't matter. 75

So, all that matters is that you install Node.js 76

and then as you run this command, 77

you just need to get some number here, 78

and then you're good to go. 79

Now in each project in which we want to use NPM, 80

we need to start by initializing it. 81

And so for that, we write NPM in it, 82

and this will then ask us a couple of question 83

in order to create a package.json file. 84

So, the questions are down here. 85

So, first the package name, and if we just had enter, 86

then whatever is here in these parenthesis will be 87

the default. 88

And so for now, we are just good with all of these defaults. 89

So, just keep pressing enter. 90

And of course you could define things like the author, 91

keywords or whatever, 92

but that doesn't really matter for now. 93

So, is this okay? 94

Yes, it is. 95

And then we end up with a special file called package.json, 96

which is this one. 97

So, this is the file that NPM just created 98

for our project here. 99

Now, this file here is basically what stores 100

the entire configuration of our project. 101

So, as you see it's stuff like the project name itself, 102

the version that we can keep on updating and yeah, 103

the author and all kinds of stuff. 104

So for now, that's not really interesting, 105

but it will be in a second, okay? 106

Let's just close these files we don't need. 107

This can become smaller and let's also clear it. 108

Okay. 109

And now let's actually install the leaflet library 110

that we used before, but this time using NPM. 111

So, let's just search for the documentation page again. 112

And so here, I already showed it to you before, 113

but let's take a look at it again. 114

So here, using a JavaScript package manager, 115

all we have to do is indeed NPM install leaflet. 116

And so this is how it will always work. 117

So, you write NPM to run the NPM program, then install, 118

and then the name of the package. 119

So, leaflet like this, and then it will start downloading 120

and that's it. 121

Now, that way of installing it, 122

so this one here was the long version, 123

but we can also write just NPM I, 124

and then leaflet like this. 125

So, that's gonna be the same thing. 126

And now you'll see that two things happened. 127

So first of all, in our package.json file, 128

a new field here was created for the dependencies. 129

And the dependency that we have here now is leaflet 130

that we just installed at version 1.6.0, okay? 131

And more about why this is important 132

a little bit later again, but for now let's take a look at 133

the second thing that happened, 134

which is that we now have this folder called node modules. 135

And this folder itself contains the leaflet folder, 136

as you see here, alright? 137

And so this is the code of this library 138

and here is some more code, 139

but that is not really important. 140

So, you can take a look at it and you will see 141

that it is like, well 15,000 lines of code or something. 142

And so, this is not a small library by any means, okay? 143

And so yeah, this folder contains everything 144

about this library that we need to include in our page. 145

And so yeah, this folder simply contains everything 146

about this package. 147

And of course the more packages we install, 148

they will all get stored into the node modules folder. 149

Okay, so we installed our leaflet library now, 150

but if we wanted to use it, 151

that wouldn't be easy without a module bundler. 152

And that's because this library actually uses 153

the common JS module system. 154

So for the reasons that I explained to you before, 155

and so therefore we cannot directly import it into our code. 156

We could only do that if later we used a module bundler, 157

but for now we are not doing that. 158

And so, let's just not use leaflet for now. 159

So, this was just to show you how to install it. 160

So instead, let me show you how we can install 161

and import one of the most popular JavaScript libraries, 162

which is Lodash. 163

So Lodash, like this and Lodash is essentially 164

a collection of a ton of useful functions for erase, 165

objects, functions, dates, and more. 166

So, it's a lot of like functions that could 167

or should be included in JavaScript, but are not. 168

And so people simply implemented them in Lodash, 169

and so now we can use them. 170

So, down here we have to installation 171

and here you see again, the old way of doing it 172

as I explained it before. 173

So, that would be downloading it 174

and then including it manually. 175

Then here we have the NPM way, but there also should be 176

something else here I'm looking for, 177

but here is how we actually install it using NPM. 178

So as always, NPM install and then Lodash. 179

However, I'm not looking for just the normal Lodash version, 180

because once again, that one actually uses common JS. 181

And so we can't use common JS modules without 182

a module bundler. 183

And so I'm looking for a special version 184

and that one is called Lodash ES. 185

And so, ES is because of ES modules, all right? 186

So, here we say NPM I for install and then Lodash dash ES, 187

then wait for it, and here it is in our dependencies. 188

Let's take a look at it here as well. 189

So, here is Lodash. 190

And so here, we now basically have one file for each of 191

the methods that are available in Lodash, 192

and you see it is a lot of them, okay? 193

And the one that I want to include now is the one 194

for cloning objects. 195

So, that's called cloneDeep.js. 196

And so, let's simply import it exactly like we used to do it 197

so import and well, let's check it out again, 198

just to show you what the file looks like 199

and how we can import it. 200

So, cloneDeep. 201

So, what matters here is 202

that it uses export default cloneDeep, okay? 203

So, it's a default export and so we could give it any name 204

that we want, but I will still just call it cloneDeep. 205

And then of course, from and then the path. 206

So, node modules, Lodash ES and thankfully 207

a vs code is very helpful by showing us the path. 208

Okay, let's see. 209

And we get no errors here, which is already a good sign. 210

Now, why did I actually include cloneDeep 211

and not something else? 212

Well, it's because I actually already mentioned Lodash 213

before when we talked about copying objects. 214

So, remember that it's very hard to copy a nested object. 215

So, let's quickly create one here because I think 216

that this is pretty interesting. 217

So, let's say we have some cards in here and this itself is 218

an array, which itself contains some objects. 219

So, product bread, and then quantity, let's say five. 220

And then pizza, let's say five again. 221

And then we have a user which also has some object, 222

let's say logged in true. 223

So, this is a deeply nested object, right? 224

And so, let's see what happens 225

when we copy it using JavaScript. 226

So, state clone, and remember we use object.assign to create 227

a copy of an object. 228

And so we create an empty object and then we basically merge 229

that with the state. 230

So, let's take a look at the stateClone. 231

And so indeed it looks exactly the same as the state, right? 232

However, what happens when we change one of 233

the nested objects in there? 234

So, when we now say state dot user dot logged in 235

and set it to false, then see what happens to the logged in, 236

in the copy, so you see that it is also false. 237

And so, that's for all the reasons 238

that we already learned before. 239

And so remember that back then I said 240

that using Lodash would probably be a good idea, 241

instead of using object dot assign, 242

because if we wanted to manually create a deep copy 243

or a deep clone, well, that would be a lot of work. 244

And so instead we, can simply use this function 245

that Lodash gives us so that 246

some people already implement it for us 247

and which is also battle tested already. 248

So, cloneDeep state. 249

And so watch what happens with this one. 250

So again, this one here is the stateClone, 251

which of course now changed the logged in to false, 252

but this one it's also false. 253

But the reason for that is that we copied the object 254

after we changed it. 255

So, that's just wrong, but now it should work. 256

So again, this one changed to false, 257

but this one now is still true, even though we changed it 258

in the original object, okay? 259

And so this is a good solution for a deep clone 260

that we just got from NPM. 261

And that's great, right? 262

So, we just used a piece of open source software to solve 263

a problem that we have sometimes in JavaScript. 264

Great, that's just awesome. 265

So again, you're now one step closer to working like 266

a real JavaScript developer, 267

because this is just what everyone does all the time. 268

So, this is the function that does the work, 269

but actually it is this one here, 270

but well, that's not inspected, 271

but of course you can have some fun and take a look at 272

how they implemented this, okay? 273

But I actually want to go back to this package.json file 274

because it is actually very important. 275

So, let's say that you want to move your project 276

to another computer, or also share it with another developer 277

or even check it into version control like Git. 278

Now in all of these scenarios, you should never ever include 279

the node modules folder. 280

So again, when you copy your project to somewhere else, 281

there is no reason to include this huge node modules folder, 282

because in a real project, 283

it will actually be really, really huge. 284

So, I have had a folders here with tens of thousands 285

of files, and so that will just slow you down. 286

And it doesn't make much sense either 287

because all of these files, they are already at NPM. 288

And so, you can always get them back from there. 289

But now you might ask, well, if I copy my project without 290

the node modules folder, so without the dependencies, 291

will I have to install all of them, one by one? 292

What if I have 20 or 200 dependencies? 293

Well, that's again 294

where this important package.json file comes into play. 295

So, let's actually simulate that by deleting this folder. 296

So, move to trash. 297

And so now of course this does not work anymore, 298

but there is fortunately a very easy way to get it back. 299

All we have to do is NPM and then install or I, 300

but just without any package name. 301

And so then, NPM will reach into your package.json file, 302

look at all the dependencies and install them back. 303

And so, you see that or folder, well, it should be back. 304

And yeah, so here it is just like before. 305

Okay. 306

And so with this, you now have a basic, 307

but I think good understanding of how to work 308

with NPM downloading packages and also include them 309

in your code. 310

However, importing packages like we did here, for example, 311

by specifying this entire path is not practical at all. 312

And so in the next video, 313

it's time to finally use Parcel to fix this.