WEBVTT 0 00:01.070 --> 00:02.000 All right. 1 00:02.000 --> 00:06.550 So, let's now finally use NPM for the first time. 2 00:06.550 --> 00:11.230 And remember, NPM stands for Node Package Manager, 3 00:11.230 --> 00:14.580 and it's both a software on our computer 4 00:14.580 --> 00:16.563 and a package repository. 5 00:17.960 --> 00:21.880 Now, before we jump straight into NPM, let's start 6 00:21.880 --> 00:26.880 by understanding why we actually need something like NPM. 7 00:26.880 --> 00:30.950 So, why do we actually need a way of managing packages 8 00:30.950 --> 00:33.860 or dependencies in our project? 9 00:33.860 --> 00:37.180 Well, back in the day before we had NPM, 10 00:37.180 --> 00:41.700 we used to include external libraries right into our HTML. 11 00:41.700 --> 00:44.590 So, basically using the script tag. 12 00:44.590 --> 00:47.240 And this would then expose a global variable 13 00:47.240 --> 00:50.960 that we could use, and actually that's exactly 14 00:50.960 --> 00:54.520 what we did earlier in our Mapty project. 15 00:54.520 --> 00:58.610 So, let's actually use or open that here. 16 00:58.610 --> 01:02.293 So, Mapty and just the index.html file. 17 01:03.710 --> 01:07.720 And so here it is, and you see that indeed, 18 01:07.720 --> 01:12.720 we simply included the leaflet.js file basically using 19 01:14.150 --> 01:18.570 a script tag and did that before or own script 20 01:18.570 --> 01:22.320 so that our own script could then use the global variable 21 01:22.320 --> 01:27.020 that was exposed by this library here, right? 22 01:27.020 --> 01:28.540 Remember that? 23 01:28.540 --> 01:31.800 Now, this actually creates a couple of problems, 24 01:31.800 --> 01:34.654 at least in a big project so maybe not 25 01:34.654 --> 01:38.560 in this particular project that is really small, 26 01:38.560 --> 01:41.200 but in a huge project and a huge team, 27 01:41.200 --> 01:43.810 this is just not manageable. 28 01:43.810 --> 01:47.720 First, it doesn't make much sense having the HTML loading 29 01:47.720 --> 01:51.510 all of JavaScript, that is just really messy. 30 01:51.510 --> 01:55.330 Also many times we would actually download a library file 31 01:55.330 --> 01:58.050 to our computer directly, for example, 32 01:58.050 --> 02:00.820 a jQuery JavaScript file. 33 02:00.820 --> 02:03.600 But then whenever a new version would come out, 34 02:03.600 --> 02:06.030 we would have to manually go to the site, 35 02:06.030 --> 02:07.550 download the new version, 36 02:07.550 --> 02:10.750 change the file in our file system manually, 37 02:10.750 --> 02:14.370 and then include it here again, maybe with some other name, 38 02:14.370 --> 02:16.470 with some other version number. 39 02:16.470 --> 02:20.320 And that was just a huge pain, believe me. 40 02:20.320 --> 02:24.680 And a third reason is that before NPM, there simply wasn't 41 02:24.680 --> 02:28.080 a single repository that contained all the packages 42 02:28.080 --> 02:29.600 that we might need. 43 02:29.600 --> 02:32.520 And so this made it even worse and more difficult 44 02:32.520 --> 02:35.330 to manually download libraries and manage them 45 02:35.330 --> 02:37.230 on our computers. 46 02:37.230 --> 02:40.581 So in summary, this all used to be a huge pain 47 02:40.581 --> 02:42.590 and a huge mess. 48 02:42.590 --> 02:45.410 And maybe you even remember this yourself, 49 02:45.410 --> 02:50.330 like the old days of jQuery and dozens of jQuery plugins 50 02:50.330 --> 02:52.960 that you would have to keep updated. 51 02:52.960 --> 02:57.060 But anyway, all of this is just to say that we really need 52 02:57.060 --> 03:00.430 a way to manage our dependencies in a better 53 03:00.430 --> 03:02.220 and more modern way. 54 03:02.220 --> 03:06.050 And NPM is exactly how we do that. 55 03:06.050 --> 03:09.850 And so, let's start by using the NPM software now. 56 03:09.850 --> 03:14.630 Now right, so actually we will need to this terminal now, 57 03:14.630 --> 03:16.660 so let me clear it. 58 03:16.660 --> 03:21.170 And we start by checking if we actually have NPM installed. 59 03:21.170 --> 03:25.570 So to do that, just type NPM dash V. 60 03:25.570 --> 03:28.120 So, this will check for diversion 61 03:28.120 --> 03:31.070 and if you get any number here and it doesn't matter 62 03:31.070 --> 03:32.873 which one, then you're good. 63 03:33.750 --> 03:38.750 Well, in fact it should actually be greater than six, okay? 64 03:38.800 --> 03:43.020 So, anything that you have greater than six is good, 65 03:43.020 --> 03:44.660 but if you did get an error 66 03:44.660 --> 03:47.190 because you didn't install Node.js in one of 67 03:47.190 --> 03:51.073 the previous sections, then please go to this website now. 68 03:51.073 --> 03:55.370 So, Nodejs.org and then download and install the version 69 03:55.370 --> 03:57.380 for your computer. 70 03:57.380 --> 04:00.500 So, you can just use this LTS version, 71 04:00.500 --> 04:02.990 you don't have to go with the current one. 72 04:02.990 --> 04:05.370 And by the time you're watching this, 73 04:05.370 --> 04:10.370 LTS is probably already at 14 or 16 or 18, who knows, 74 04:11.410 --> 04:13.310 but that doesn't matter. 75 04:13.310 --> 04:16.140 So, all that matters is that you install Node.js 76 04:16.140 --> 04:17.920 and then as you run this command, 77 04:17.920 --> 04:19.890 you just need to get some number here, 78 04:19.890 --> 04:22.150 and then you're good to go. 79 04:22.150 --> 04:25.860 Now in each project in which we want to use NPM, 80 04:25.860 --> 04:28.770 we need to start by initializing it. 81 04:28.770 --> 04:32.580 And so for that, we write NPM in it, 82 04:32.580 --> 04:35.030 and this will then ask us a couple of question 83 04:35.030 --> 04:38.013 in order to create a package.json file. 84 04:39.450 --> 04:41.940 So, the questions are down here. 85 04:41.940 --> 04:45.208 So, first the package name, and if we just had enter, 86 04:45.208 --> 04:48.337 then whatever is here in these parenthesis will be 87 04:48.337 --> 04:49.700 the default. 88 04:49.700 --> 04:54.120 And so for now, we are just good with all of these defaults. 89 04:54.120 --> 04:57.000 So, just keep pressing enter. 90 04:57.000 --> 04:59.780 And of course you could define things like the author, 91 04:59.780 --> 05:02.170 keywords or whatever, 92 05:02.170 --> 05:04.670 but that doesn't really matter for now. 93 05:04.670 --> 05:06.160 So, is this okay? 94 05:06.160 --> 05:07.965 Yes, it is. 95 05:07.965 --> 05:12.340 And then we end up with a special file called package.json, 96 05:12.340 --> 05:13.313 which is this one. 97 05:14.810 --> 05:17.650 So, this is the file that NPM just created 98 05:17.650 --> 05:19.123 for our project here. 99 05:20.360 --> 05:23.270 Now, this file here is basically what stores 100 05:23.270 --> 05:26.490 the entire configuration of our project. 101 05:26.490 --> 05:29.930 So, as you see it's stuff like the project name itself, 102 05:29.930 --> 05:33.512 the version that we can keep on updating and yeah, 103 05:33.512 --> 05:36.013 the author and all kinds of stuff. 104 05:37.150 --> 05:39.910 So for now, that's not really interesting, 105 05:39.910 --> 05:42.293 but it will be in a second, okay? 106 05:43.830 --> 05:46.380 Let's just close these files we don't need. 107 05:46.380 --> 05:50.301 This can become smaller and let's also clear it. 108 05:50.301 --> 05:51.470 Okay. 109 05:51.470 --> 05:54.710 And now let's actually install the leaflet library 110 05:54.710 --> 05:58.203 that we used before, but this time using NPM. 111 06:01.030 --> 06:06.030 So, let's just search for the documentation page again. 112 06:06.420 --> 06:09.390 And so here, I already showed it to you before, 113 06:09.390 --> 06:12.070 but let's take a look at it again. 114 06:12.070 --> 06:15.010 So here, using a JavaScript package manager, 115 06:15.010 --> 06:18.703 all we have to do is indeed NPM install leaflet. 116 06:19.700 --> 06:22.530 And so this is how it will always work. 117 06:22.530 --> 06:27.530 So, you write NPM to run the NPM program, then install, 118 06:28.220 --> 06:29.870 and then the name of the package. 119 06:30.840 --> 06:35.394 So, leaflet like this, and then it will start downloading 120 06:35.394 --> 06:36.763 and that's it. 121 06:37.870 --> 06:39.920 Now, that way of installing it, 122 06:39.920 --> 06:42.470 so this one here was the long version, 123 06:42.470 --> 06:45.500 but we can also write just NPM I, 124 06:45.500 --> 06:49.440 and then leaflet like this. 125 06:49.440 --> 06:51.820 So, that's gonna be the same thing. 126 06:51.820 --> 06:54.370 And now you'll see that two things happened. 127 06:54.370 --> 06:57.400 So first of all, in our package.json file, 128 06:57.400 --> 07:01.300 a new field here was created for the dependencies. 129 07:01.300 --> 07:04.560 And the dependency that we have here now is leaflet 130 07:04.560 --> 07:09.560 that we just installed at version 1.6.0, okay? 131 07:10.790 --> 07:13.260 And more about why this is important 132 07:13.260 --> 07:17.100 a little bit later again, but for now let's take a look at 133 07:17.100 --> 07:18.980 the second thing that happened, 134 07:18.980 --> 07:23.830 which is that we now have this folder called node modules. 135 07:23.830 --> 07:27.610 And this folder itself contains the leaflet folder, 136 07:27.610 --> 07:30.460 as you see here, alright? 137 07:30.460 --> 07:32.410 And so this is the code of this library 138 07:33.670 --> 07:35.910 and here is some more code, 139 07:35.910 --> 07:38.893 but that is not really important. 140 07:39.890 --> 07:42.220 So, you can take a look at it and you will see 141 07:42.220 --> 07:47.220 that it is like, well 15,000 lines of code or something. 142 07:48.800 --> 07:53.083 And so, this is not a small library by any means, okay? 143 07:55.400 --> 07:58.500 And so yeah, this folder contains everything 144 07:58.500 --> 08:02.690 about this library that we need to include in our page. 145 08:02.690 --> 08:06.440 And so yeah, this folder simply contains everything 146 08:06.440 --> 08:08.030 about this package. 147 08:08.030 --> 08:10.510 And of course the more packages we install, 148 08:10.510 --> 08:13.493 they will all get stored into the node modules folder. 149 08:15.010 --> 08:19.850 Okay, so we installed our leaflet library now, 150 08:19.850 --> 08:22.030 but if we wanted to use it, 151 08:22.030 --> 08:25.460 that wouldn't be easy without a module bundler. 152 08:25.460 --> 08:27.890 And that's because this library actually uses 153 08:27.890 --> 08:30.350 the common JS module system. 154 08:30.350 --> 08:33.290 So for the reasons that I explained to you before, 155 08:33.290 --> 08:37.670 and so therefore we cannot directly import it into our code. 156 08:37.670 --> 08:41.200 We could only do that if later we used a module bundler, 157 08:41.200 --> 08:43.410 but for now we are not doing that. 158 08:43.410 --> 08:46.900 And so, let's just not use leaflet for now. 159 08:46.900 --> 08:50.100 So, this was just to show you how to install it. 160 08:50.100 --> 08:53.090 So instead, let me show you how we can install 161 08:53.090 --> 08:57.080 and import one of the most popular JavaScript libraries, 162 08:57.080 --> 08:58.373 which is Lodash. 163 09:00.965 --> 09:05.147 So Lodash, like this and Lodash is essentially 164 09:06.110 --> 09:10.430 a collection of a ton of useful functions for erase, 165 09:10.430 --> 09:14.130 objects, functions, dates, and more. 166 09:14.130 --> 09:17.820 So, it's a lot of like functions that could 167 09:17.820 --> 09:21.600 or should be included in JavaScript, but are not. 168 09:21.600 --> 09:24.610 And so people simply implemented them in Lodash, 169 09:24.610 --> 09:26.283 and so now we can use them. 170 09:27.130 --> 09:29.090 So, down here we have to installation 171 09:29.950 --> 09:33.450 and here you see again, the old way of doing it 172 09:33.450 --> 09:34.853 as I explained it before. 173 09:35.800 --> 09:38.020 So, that would be downloading it 174 09:38.020 --> 09:40.050 and then including it manually. 175 09:40.050 --> 09:45.050 Then here we have the NPM way, but there also should be 176 09:47.312 --> 09:49.613 something else here I'm looking for, 177 09:51.460 --> 09:55.350 but here is how we actually install it using NPM. 178 09:55.350 --> 09:58.743 So as always, NPM install and then Lodash. 179 09:59.860 --> 10:04.150 However, I'm not looking for just the normal Lodash version, 180 10:04.150 --> 10:08.280 because once again, that one actually uses common JS. 181 10:08.280 --> 10:11.320 And so we can't use common JS modules without 182 10:11.320 --> 10:12.800 a module bundler. 183 10:12.800 --> 10:15.140 And so I'm looking for a special version 184 10:19.980 --> 10:23.090 and that one is called Lodash ES. 185 10:23.090 --> 10:27.363 And so, ES is because of ES modules, all right? 186 10:28.220 --> 10:33.220 So, here we say NPM I for install and then Lodash dash ES, 187 10:37.530 --> 10:41.463 then wait for it, and here it is in our dependencies. 188 10:42.570 --> 10:45.183 Let's take a look at it here as well. 189 10:47.220 --> 10:48.383 So, here is Lodash. 190 10:49.360 --> 10:52.910 And so here, we now basically have one file for each of 191 10:52.910 --> 10:56.073 the methods that are available in Lodash, 192 10:56.990 --> 11:01.943 and you see it is a lot of them, okay? 193 11:03.190 --> 11:06.700 And the one that I want to include now is the one 194 11:06.700 --> 11:08.960 for cloning objects. 195 11:08.960 --> 11:12.503 So, that's called cloneDeep.js. 196 11:13.670 --> 11:17.910 And so, let's simply import it exactly like we used to do it 197 11:19.060 --> 11:22.723 so import and well, let's check it out again, 198 11:24.270 --> 11:27.920 just to show you what the file looks like 199 11:27.920 --> 11:30.070 and how we can import it. 200 11:30.070 --> 11:31.303 So, cloneDeep. 201 11:33.930 --> 11:35.440 So, what matters here is 202 11:35.440 --> 11:40.170 that it uses export default cloneDeep, okay? 203 11:40.170 --> 11:43.800 So, it's a default export and so we could give it any name 204 11:43.800 --> 11:48.193 that we want, but I will still just call it cloneDeep. 205 11:49.648 --> 11:53.640 And then of course, from and then the path. 206 11:55.220 --> 12:00.220 So, node modules, Lodash ES and thankfully 207 12:01.840 --> 12:06.840 a vs code is very helpful by showing us the path. 208 12:08.520 --> 12:10.690 Okay, let's see. 209 12:10.690 --> 12:15.690 And we get no errors here, which is already a good sign. 210 12:16.300 --> 12:19.460 Now, why did I actually include cloneDeep 211 12:19.460 --> 12:20.933 and not something else? 212 12:21.840 --> 12:25.180 Well, it's because I actually already mentioned Lodash 213 12:25.180 --> 12:29.090 before when we talked about copying objects. 214 12:29.090 --> 12:32.803 So, remember that it's very hard to copy a nested object. 215 12:34.129 --> 12:38.240 So, let's quickly create one here because I think 216 12:38.240 --> 12:39.840 that this is pretty interesting. 217 12:40.820 --> 12:45.390 So, let's say we have some cards in here and this itself is 218 12:45.390 --> 12:49.600 an array, which itself contains some objects. 219 12:49.600 --> 12:54.600 So, product bread, and then quantity, let's say five. 220 12:58.690 --> 13:02.423 And then pizza, let's say five again. 221 13:03.628 --> 13:08.110 And then we have a user which also has some object, 222 13:08.110 --> 13:11.083 let's say logged in true. 223 13:12.270 --> 13:16.650 So, this is a deeply nested object, right? 224 13:16.650 --> 13:18.010 And so, let's see what happens 225 13:18.010 --> 13:21.240 when we copy it using JavaScript. 226 13:21.240 --> 13:26.240 So, state clone, and remember we use object.assign to create 227 13:28.080 --> 13:30.230 a copy of an object. 228 13:30.230 --> 13:34.160 And so we create an empty object and then we basically merge 229 13:34.160 --> 13:36.073 that with the state. 230 13:38.110 --> 13:40.440 So, let's take a look at the stateClone. 231 13:41.880 --> 13:46.880 And so indeed it looks exactly the same as the state, right? 232 13:48.070 --> 13:51.030 However, what happens when we change one of 233 13:51.030 --> 13:53.490 the nested objects in there? 234 13:53.490 --> 13:58.490 So, when we now say state dot user dot logged in 235 14:01.070 --> 14:06.070 and set it to false, then see what happens to the logged in, 236 14:06.290 --> 14:11.290 in the copy, so you see that it is also false. 237 14:11.880 --> 14:13.600 And so, that's for all the reasons 238 14:13.600 --> 14:16.110 that we already learned before. 239 14:16.110 --> 14:18.610 And so remember that back then I said 240 14:18.610 --> 14:22.010 that using Lodash would probably be a good idea, 241 14:22.010 --> 14:24.930 instead of using object dot assign, 242 14:24.930 --> 14:28.660 because if we wanted to manually create a deep copy 243 14:28.660 --> 14:32.800 or a deep clone, well, that would be a lot of work. 244 14:32.800 --> 14:35.520 And so instead we, can simply use this function 245 14:35.520 --> 14:38.150 that Lodash gives us so that 246 14:38.150 --> 14:40.280 some people already implement it for us 247 14:43.090 --> 14:45.973 and which is also battle tested already. 248 14:48.600 --> 14:51.163 So, cloneDeep state. 249 14:53.690 --> 14:57.373 And so watch what happens with this one. 250 14:58.900 --> 15:02.330 So again, this one here is the stateClone, 251 15:02.330 --> 15:05.223 which of course now changed the logged in to false, 252 15:06.710 --> 15:09.900 but this one it's also false. 253 15:09.900 --> 15:12.910 But the reason for that is that we copied the object 254 15:12.910 --> 15:14.463 after we changed it. 255 15:15.610 --> 15:20.563 So, that's just wrong, but now it should work. 256 15:21.590 --> 15:23.880 So again, this one changed to false, 257 15:23.880 --> 15:27.310 but this one now is still true, even though we changed it 258 15:27.310 --> 15:30.470 in the original object, okay? 259 15:30.470 --> 15:34.480 And so this is a good solution for a deep clone 260 15:34.480 --> 15:37.010 that we just got from NPM. 261 15:37.010 --> 15:39.580 And that's great, right? 262 15:39.580 --> 15:43.570 So, we just used a piece of open source software to solve 263 15:43.570 --> 15:46.283 a problem that we have sometimes in JavaScript. 264 15:47.400 --> 15:50.550 Great, that's just awesome. 265 15:50.550 --> 15:54.630 So again, you're now one step closer to working like 266 15:54.630 --> 15:56.283 a real JavaScript developer, 267 15:57.140 --> 16:00.393 because this is just what everyone does all the time. 268 16:01.490 --> 16:03.910 So, this is the function that does the work, 269 16:03.910 --> 16:06.640 but actually it is this one here, 270 16:06.640 --> 16:10.030 but well, that's not inspected, 271 16:10.030 --> 16:12.900 but of course you can have some fun and take a look at 272 16:12.900 --> 16:15.960 how they implemented this, okay? 273 16:15.960 --> 16:20.450 But I actually want to go back to this package.json file 274 16:20.450 --> 16:22.950 because it is actually very important. 275 16:22.950 --> 16:25.920 So, let's say that you want to move your project 276 16:25.920 --> 16:30.430 to another computer, or also share it with another developer 277 16:30.430 --> 16:34.600 or even check it into version control like Git. 278 16:34.600 --> 16:38.780 Now in all of these scenarios, you should never ever include 279 16:38.780 --> 16:40.940 the node modules folder. 280 16:40.940 --> 16:44.930 So again, when you copy your project to somewhere else, 281 16:44.930 --> 16:49.678 there is no reason to include this huge node modules folder, 282 16:49.678 --> 16:51.680 because in a real project, 283 16:51.680 --> 16:55.050 it will actually be really, really huge. 284 16:55.050 --> 16:58.530 So, I have had a folders here with tens of thousands 285 16:58.530 --> 17:02.020 of files, and so that will just slow you down. 286 17:02.020 --> 17:04.160 And it doesn't make much sense either 287 17:04.160 --> 17:08.070 because all of these files, they are already at NPM. 288 17:08.070 --> 17:11.210 And so, you can always get them back from there. 289 17:11.210 --> 17:15.078 But now you might ask, well, if I copy my project without 290 17:15.078 --> 17:18.890 the node modules folder, so without the dependencies, 291 17:18.890 --> 17:22.160 will I have to install all of them, one by one? 292 17:22.160 --> 17:26.000 What if I have 20 or 200 dependencies? 293 17:26.000 --> 17:27.460 Well, that's again 294 17:27.460 --> 17:31.393 where this important package.json file comes into play. 295 17:32.370 --> 17:35.633 So, let's actually simulate that by deleting this folder. 296 17:37.100 --> 17:38.900 So, move to trash. 297 17:38.900 --> 17:41.823 And so now of course this does not work anymore, 298 17:43.020 --> 17:47.190 but there is fortunately a very easy way to get it back. 299 17:47.190 --> 17:51.625 All we have to do is NPM and then install or I, 300 17:51.625 --> 17:54.720 but just without any package name. 301 17:54.720 --> 17:59.110 And so then, NPM will reach into your package.json file, 302 17:59.110 --> 18:02.583 look at all the dependencies and install them back. 303 18:03.450 --> 18:07.710 And so, you see that or folder, well, it should be back. 304 18:07.710 --> 18:10.703 And yeah, so here it is just like before. 305 18:11.640 --> 18:12.580 Okay. 306 18:12.580 --> 18:15.300 And so with this, you now have a basic, 307 18:15.300 --> 18:18.370 but I think good understanding of how to work 308 18:18.370 --> 18:22.130 with NPM downloading packages and also include them 309 18:22.130 --> 18:23.620 in your code. 310 18:23.620 --> 18:28.280 However, importing packages like we did here, for example, 311 18:28.280 --> 18:33.120 by specifying this entire path is not practical at all. 312 18:33.120 --> 18:34.830 And so in the next video, 313 18:34.830 --> 18:37.833 it's time to finally use Parcel to fix this.