1 00:00:02,360 --> 00:00:04,430 So of course this was just a start, 2 00:00:04,430 --> 00:00:11,510 we got more dependencies, we got more files. Tooltip does have no other dependency as far as I can tell 3 00:00:11,930 --> 00:00:15,410 but project item for example has tooltip as a dependency. 4 00:00:15,410 --> 00:00:20,300 Now we can still work with multiple imports as we currently do but actually, I really want to switch 5 00:00:20,300 --> 00:00:23,750 to a module-only setup. So I'll comment out 6 00:00:23,810 --> 00:00:30,800 all these imports here, also the DOM helper and I'll only leave the app.js import here as our root 7 00:00:31,070 --> 00:00:32,540 entry point. 8 00:00:32,580 --> 00:00:34,540 Now that of course breaks everything 9 00:00:34,730 --> 00:00:37,450 and now we therefore have to switch to modules entirely. 10 00:00:37,460 --> 00:00:39,800 So let's start our way from the bottom up, 11 00:00:39,800 --> 00:00:43,160 let's start in app.js because that's our entry file, 12 00:00:43,160 --> 00:00:44,990 this will be the file that is loaded first. 13 00:00:44,990 --> 00:00:46,710 What do we have in there? 14 00:00:46,820 --> 00:00:49,330 We're using project list here, 15 00:00:49,370 --> 00:00:53,940 so project list is a dependency of this app class in the app.js file. 16 00:00:54,110 --> 00:01:00,140 So we should go to the project list Javascript file and export project list here. 17 00:01:00,140 --> 00:01:04,140 Now with that, we can go back to app.js and here, simply import this. 18 00:01:04,250 --> 00:01:13,570 So we add an import of project list between curly braces from the app folder and there from projectlist.js. 19 00:01:13,610 --> 00:01:19,990 Now with that, we make project list, we make this class available in this app.js file and 20 00:01:19,990 --> 00:01:22,210 therefore this line works again. 21 00:01:22,210 --> 00:01:25,380 So if we now save that, we'll see that we'll get a different error, 22 00:01:25,390 --> 00:01:27,700 now project item is not defined. 23 00:01:27,820 --> 00:01:31,780 This error is stemming from project list and that makes sense, 24 00:01:31,780 --> 00:01:35,030 we're able to get the project list into the app file 25 00:01:35,140 --> 00:01:41,320 so now the Javascript code execution moves on to project list and tries to run all that code, set up 26 00:01:41,320 --> 00:01:48,730 this class and it of course will see that project item is simply not known to this file because this 27 00:01:48,730 --> 00:01:52,010 is a dependency of project list which we're not stating yet. 28 00:01:52,030 --> 00:01:59,440 So let's go to project item and as before, export project item and then go to project list again and 29 00:01:59,440 --> 00:02:04,470 import it, import project item from 30 00:02:04,540 --> 00:02:05,830 and now it's in the same folder, 31 00:02:05,830 --> 00:02:08,510 so just ./projectitem.js 32 00:02:08,510 --> 00:02:16,720 If we do this and we save that, we get a different error, project item doesn't find the DOM helper. 33 00:02:16,720 --> 00:02:18,860 So let's go to project item, 34 00:02:18,940 --> 00:02:23,080 make sure we import the DOM helper by first of all going to the DOM helper, 35 00:02:23,080 --> 00:02:32,830 exporting it and then here, let's go back to project item and in this file, import from, go up one level, 36 00:02:32,920 --> 00:02:35,980 go into the utility folder, then DOM helper 37 00:02:36,070 --> 00:02:42,150 and here I want to import the DOM helper class, so that this is available in project item. 38 00:02:42,250 --> 00:02:44,880 I also already know that I'll need the tooltip, 39 00:02:44,950 --> 00:02:51,000 so let's go to tooltip.js and actually export the tooltip and you can have an import in a file and an 40 00:02:51,010 --> 00:02:52,630 export at the same time as well, 41 00:02:52,690 --> 00:02:55,230 we already did this in project list, this is of course 42 00:02:55,240 --> 00:02:55,810 absolutely 43 00:02:55,810 --> 00:02:56,450 OK 44 00:02:56,860 --> 00:03:02,950 and here I'm exporting the tooltip. Now in project item, we can therefore not just import DOM helper but 45 00:03:02,950 --> 00:03:07,240 simply in a new line, add another import from another file. 46 00:03:07,360 --> 00:03:11,160 So here import from the tooltip.js 47 00:03:11,180 --> 00:03:15,260 this tooltip class here 48 00:03:15,560 --> 00:03:22,000 and if we do that and we save this and we then reload, we just got an error regarding the DOM helper, 49 00:03:22,020 --> 00:03:23,610 yes because I forgot to 50 00:03:23,640 --> 00:03:26,060 .js here, let's fix this in this import, 51 00:03:26,070 --> 00:03:28,880 let's now retry and now this works again 52 00:03:28,890 --> 00:03:35,080 but if I drag and drop, I still get an error that in project list I also use the DOM helper. 53 00:03:35,160 --> 00:03:36,810 So forgot to import it there, 54 00:03:36,810 --> 00:03:42,000 so let's switch over to projectlist.js, this by the way also shows the advantage of having multiple 55 00:03:42,000 --> 00:03:42,580 files, 56 00:03:42,690 --> 00:03:45,300 it's super easy to find the failing part 57 00:03:45,450 --> 00:03:53,750 and here we can also import DOM helper from the utility folder and then DOMhelper.js. 58 00:03:54,300 --> 00:03:55,460 So let's save that, 59 00:03:55,470 --> 00:04:02,540 make sure all files are saved and then reload again, try switching this and it works. 60 00:04:02,560 --> 00:04:05,420 So this is now how we can use modules, 61 00:04:05,440 --> 00:04:11,290 now there are more features related to them but this is the starting point. It's super important of course 62 00:04:11,500 --> 00:04:19,510 because this really allows us to structure our code in a more readable way and every file defines its 63 00:04:19,510 --> 00:04:23,910 dependencies on its own, so that you don't have to micromanage imports here.