1 00:00:02,250 --> 00:00:06,840 Now for that, I have a project which you find attached, empty HTML file, 2 00:00:06,840 --> 00:00:13,050 empty script and I want to start, not with a third-party library, but with a functionality built into 3 00:00:13,050 --> 00:00:15,650 Javascript because the idea is the same 4 00:00:15,810 --> 00:00:18,510 and that would be math random. 5 00:00:18,570 --> 00:00:23,950 You learned about this method on the math object, it generates a random number. 6 00:00:23,970 --> 00:00:30,420 Now you could come up with your own random function where you take the current date let's say and some 7 00:00:30,450 --> 00:00:34,420 other things into account to get a pseudo random number. 8 00:00:34,440 --> 00:00:39,810 Now of course, math random is a bit more elaborate than that but the idea is the same, 9 00:00:39,870 --> 00:00:46,170 you get a method here which you also could kind of build on your own but you get it so that you don't 10 00:00:46,170 --> 00:00:52,010 have to build it on your own because getting a random number is something you need fairly often in programming 11 00:00:52,380 --> 00:00:56,420 but you don't always want to rewrite the code to generate that number, 12 00:00:56,490 --> 00:01:03,120 you want to write the code that uses the random number and that's the general idea in programming. 13 00:01:03,120 --> 00:01:10,500 We want to write code that's exclusive, specific to our project and don't reinvent the wheel for such 14 00:01:11,100 --> 00:01:14,190 common tasks like generating a random number. 15 00:01:14,250 --> 00:01:19,980 Now in the case of math random, it's built into the browser and exposed in Javascript and that's not 16 00:01:19,980 --> 00:01:21,260 the case for everything. 17 00:01:21,280 --> 00:01:25,470 Now let's come back to that example where we have two arrays and we want to compare them. 18 00:01:25,470 --> 00:01:36,430 We have customers let's say, where we have Max and Manuel and Anna and we have active customers 19 00:01:36,540 --> 00:01:39,990 and there we have Max and Manuel 20 00:01:39,990 --> 00:01:44,180 let's say. Now for our application, we need to find the difference, 21 00:01:44,190 --> 00:01:49,770 we need to find out which customers are for example in our database from which we might have retrieved 22 00:01:49,860 --> 00:01:56,190 this array and which customers are active because we retrieve them from another database where we had 23 00:01:56,190 --> 00:01:59,310 a look at customers that placed an order in the last year, 24 00:01:59,340 --> 00:02:02,060 anything like that could be what we're trying to do. 25 00:02:02,160 --> 00:02:07,320 So we have two arrays here which of course might be longer but to see what happens, 26 00:02:07,320 --> 00:02:12,930 I am working with these short arrays. Now because these arrays are short, to us humans it's obvious 27 00:02:13,230 --> 00:02:16,850 what the difference is but if they were longer, it might not be obvious 28 00:02:16,860 --> 00:02:23,810 and in addition, this typically would not be hardcoded but we might be fetching this from some database. 29 00:02:24,000 --> 00:02:31,470 So now we want to get the difference, the inactive customers and that's basically the customers array 30 00:02:31,470 --> 00:02:33,360 minus the active customers. 31 00:02:33,420 --> 00:02:38,970 Now customers minus active customers is not something that works in Javascript, 32 00:02:38,970 --> 00:02:46,320 if we try to do that and try to log the result, you will see that if I load this page, we get not a number 33 00:02:46,410 --> 00:02:50,650 because we're trying to do a subtraction here with two values which are not a number. 34 00:02:50,670 --> 00:02:54,210 So getting the difference of two arrays does not work like that, 35 00:02:54,210 --> 00:02:58,410 instead we need to write some function which basically goes through 36 00:02:58,410 --> 00:03:03,930 this array and then checks if this item is part of this array, if this item is part of this array and so 37 00:03:03,930 --> 00:03:04,330 on. 38 00:03:04,410 --> 00:03:10,020 Now we absolutely can write such a function on our own but this is a typical use case where we might 39 00:03:10,020 --> 00:03:16,520 want to use a third-party package and for this specifically, we could use a package called Lodash. 40 00:03:16,650 --> 00:03:18,240 You can just google for Lodash, 41 00:03:18,240 --> 00:03:22,950 it's a quite popular Javascript package and you should find lodash.com. 42 00:03:22,950 --> 00:03:28,950 This is the official page and there, you find explanation of what this Javascript utility library is all 43 00:03:28,950 --> 00:03:30,760 about and how you use it. 44 00:03:30,780 --> 00:03:35,690 Now this is a typical example for a Javascript library and why you might want to use it, 45 00:03:35,700 --> 00:03:44,130 this gives you a broad variety of functions you can use to improve your code or to get certain functionalities, 46 00:03:44,340 --> 00:03:48,820 you can click on documentation to get an overview of all the built-in functions 47 00:03:48,820 --> 00:03:55,800 and for example there, you'll see there is this difference function and this indeed takes an array and 48 00:03:55,830 --> 00:04:01,810 then another array and it compares that and gives you the difference of arrays, 49 00:04:01,830 --> 00:04:08,610 here you see an example of how this function would be applied. Now to use Lodash, we have to add it 50 00:04:08,640 --> 00:04:13,180 to our project though, we can't just call this code here. 51 00:04:13,200 --> 00:04:19,470 So if we try to execute this code, of course it won't work because we use this special underscore thing 52 00:04:19,590 --> 00:04:24,720 and actually that's just a variable, you learned that variables can start with an underscore and that's 53 00:04:24,720 --> 00:04:29,650 actually a variable which consists of nothing more than an underscore but it is a regular variable therefore 54 00:04:29,820 --> 00:04:34,180 but of course it is a variable which our project doesn't know because we haven't defined it 55 00:04:34,260 --> 00:04:37,160 and it's also not a standard Javascript variable. 56 00:04:37,620 --> 00:04:41,430 So executing this code here will not work, 57 00:04:41,700 --> 00:04:48,010 if I try to do it, I get an error that underscore is not defined because as I explained, it's not a 58 00:04:48,010 --> 00:04:49,800 default variable. 59 00:04:49,900 --> 00:04:52,890 Now it is not defined because Lodash defines it, 60 00:04:52,990 --> 00:04:59,620 now to have lodash define it, we need to add lodash to our project. Now to include a library, 61 00:04:59,620 --> 00:05:04,480 we typically find installation steps, installation descriptions on the library page. 62 00:05:04,600 --> 00:05:07,500 Here we find a bunch of different installation options, 63 00:05:07,510 --> 00:05:10,110 that also depends on how your project is set up, 64 00:05:10,120 --> 00:05:16,150 we'll have a look at how we can set up more complex Javascript projects in the tooling module later 65 00:05:16,870 --> 00:05:22,750 but you typically always can just download the script or use a CDN and I'll come back to what a CDN 66 00:05:22,750 --> 00:05:23,830 is in a second as well. 67 00:05:24,310 --> 00:05:30,040 So here we need the full build and we can click on this and it will essentially open a Javascript file 68 00:05:30,040 --> 00:05:30,360 here, 69 00:05:30,400 --> 00:05:34,430 you can just download this file or copy all the content in there, 70 00:05:34,960 --> 00:05:42,570 here I'll just right click on full build and save link as to download this Javascript file and I'll 71 00:05:42,570 --> 00:05:45,030 store it in my project folder here. 72 00:05:45,090 --> 00:05:50,570 Now by doing this, this lodash.js file was added and this now basically contains all the features 73 00:05:50,580 --> 00:05:53,980 the lodash library provides and we can just use that. 74 00:05:54,060 --> 00:05:56,160 Now that's one way of importing it, 75 00:05:56,230 --> 00:06:03,800 another way is to use that optimized version, so I'll download this and save this link as lodash.min.js 76 00:06:03,810 --> 00:06:07,500 and the difference simply is that 77 00:06:07,510 --> 00:06:13,770 this is now a script which contains the same features but is optimized, it's simply smaller in code because 78 00:06:13,800 --> 00:06:20,880 all the function names which aren't important and so on were shortened and therefore this is faster to load 79 00:06:21,030 --> 00:06:22,000 for the browser. 80 00:06:22,110 --> 00:06:27,630 Now in a later module, we'll also learn how we can optimize our own code like this because of course 81 00:06:27,630 --> 00:06:32,080 we don't have to write it like this to use it. So you can use either of the two, 82 00:06:32,080 --> 00:06:36,610 typically you want to go for the optimized version so that you have a smaller script and the browser 83 00:06:36,610 --> 00:06:41,990 has less to download and now you just need to include it. So in index.html, you want to add another 84 00:06:42,130 --> 00:06:47,010 script import before your script import and the order is important 85 00:06:47,020 --> 00:06:49,190 so that you import the library 86 00:06:49,210 --> 00:06:52,450 your script depends on before your script runs, 87 00:06:52,450 --> 00:06:58,180 otherwise your script will run too early and we'll search for features which weren't defined globally 88 00:06:58,180 --> 00:07:03,720 yet. So therefore we want to add a script import here before our script and import one of the two lodash 89 00:07:03,760 --> 00:07:04,330 files, 90 00:07:04,420 --> 00:07:09,430 here I'll go for the minified version and add defer here because I got defer on my script as 91 00:07:09,430 --> 00:07:10,480 well 92 00:07:10,480 --> 00:07:13,430 and with that if we save that and reload, 93 00:07:13,570 --> 00:07:17,880 now you see this works and we get an array of one as a result 94 00:07:19,150 --> 00:07:21,070 of this operation. 95 00:07:21,220 --> 00:07:25,360 Now here, we get one as a result because I'm comparing these two arrays. 96 00:07:25,390 --> 00:07:30,660 Now of course, we can use customers and active customers here as well 97 00:07:30,730 --> 00:07:37,150 and if we save that and reload, we get Anna which indeed is the difference between the two arrays. 98 00:07:37,150 --> 00:07:41,130 So this is how we can add and use a third-party library. 99 00:07:41,140 --> 00:07:43,510 Now I mentioned there would be one other way of adding it, 100 00:07:43,630 --> 00:07:50,380 most libraries also support CDNs, here you also find a CDN copies link and this in the end gives 101 00:07:50,380 --> 00:07:51,510 you a link 102 00:07:51,610 --> 00:07:58,150 you can include so that you don't need to download the package, the file and manually import it but 103 00:07:58,150 --> 00:08:04,520 instead you have such externally hosted file where you can import the external hosting link. 104 00:08:04,530 --> 00:08:09,600 Now here in the case of Lodash, this means we can just grab this link by clicking on copy 105 00:08:09,610 --> 00:08:10,680 URL here, copy to 106 00:08:10,720 --> 00:08:18,100 clipboard, copy URL and then in your index.html file, you can replace your local import 107 00:08:18,100 --> 00:08:22,150 here and I'm just commenting it out here so that we still have it for reference 108 00:08:22,150 --> 00:08:24,400 with that CDN import. 109 00:08:24,400 --> 00:08:28,990 So here, you then add a script where the source is this link. 110 00:08:29,050 --> 00:08:31,870 So now this is not hosted on your own servers, 111 00:08:31,870 --> 00:08:33,720 it's not part of your own project, 112 00:08:33,730 --> 00:08:39,970 we could delete these two Lodash files here but we're getting it from some other external server. 113 00:08:39,970 --> 00:08:46,360 The advantage can be that this might even be faster, it might be serving it faster than your own server because 114 00:08:46,360 --> 00:08:52,690 these CDN servers often are quite fast and you don't have to worry about downloading it and managing 115 00:08:52,690 --> 00:08:53,960 it on your own. 116 00:08:54,040 --> 00:08:59,560 So both is possible, you can go for either approach, important is just that you do add it and that you 117 00:08:59,560 --> 00:09:07,510 do add it correctly before your script executes it and with that, as you see, we can successfully run this code.