1 00:00:02,330 --> 00:00:09,380 We've ventured pretty far into Javascript land and the more and more we learn about Javascript, the more 2 00:00:09,380 --> 00:00:16,400 and more we see that projects, browser side projects using Javascript can get complex. 3 00:00:16,400 --> 00:00:22,730 For example in the last module, we learned about Javascript modules which basically means splitting our 4 00:00:22,730 --> 00:00:28,220 code across multiple Javascript files, where the files then import each other. 5 00:00:28,220 --> 00:00:31,580 Now there we could already see a huge advantage of this approach, 6 00:00:31,580 --> 00:00:36,480 it makes our code more manageable but we also saw a disadvantage there, 7 00:00:36,500 --> 00:00:43,470 we had a lot of HttpRequests because all these separate files had to be downloaded one-by-one and 8 00:00:43,490 --> 00:00:47,670 the bigger your project grows, the more this might become a problem. 9 00:00:47,680 --> 00:00:55,760 Therefore in this module here, we'll have a look at Javascript tooling which essentially is all about 10 00:00:55,940 --> 00:01:02,690 managing our project with certain tools that automatically optimize our code, combine our code and get 11 00:01:02,750 --> 00:01:03,640 out of our way 12 00:01:03,800 --> 00:01:09,920 when we are writing our code so that we can write our code in the best possible way and still get an 13 00:01:10,010 --> 00:01:13,640 optimized and better output than we're currently doing it. 14 00:01:13,670 --> 00:01:18,680 So in this module, we'll have a look at what exactly we do there and why we do that, 15 00:01:18,680 --> 00:01:22,980 which tools we use and which tools we can use, which tools are popular 16 00:01:23,150 --> 00:01:29,150 and I will also walk you through an example setup where you will see how to work with these tools to 17 00:01:29,150 --> 00:01:31,510 get this optimized project. 18 00:01:31,640 --> 00:01:38,180 Now for that, I am back in the Javascript project we already worked on in the last module where we introduced 19 00:01:38,180 --> 00:01:40,010 these multiple files. 20 00:01:40,010 --> 00:01:46,670 It's the good old project manager where we can drag and drop projects with our different files here 21 00:01:46,730 --> 00:01:47,290 and therefore 22 00:01:47,300 --> 00:01:53,750 as I explained, one issue we have especially if this would be a bigger project is that we have multiple 23 00:01:53,800 --> 00:01:55,280 HttpRequests here 24 00:01:55,310 --> 00:01:58,190 and the more files we add, the more requests we have 25 00:01:58,250 --> 00:02:04,310 and since every request comes with a little bit of overhead even if the file is pretty small, it can 26 00:02:04,310 --> 00:02:10,340 still be annoying and slow down our application if we have to download thousands of files, so we might 27 00:02:10,340 --> 00:02:11,690 want to avoid that 28 00:02:11,810 --> 00:02:14,210 and that's exactly where tooling can help us. 29 00:02:14,360 --> 00:02:20,750 Actually, we are already using one tool, this development server here which we had to use in order to 30 00:02:20,750 --> 00:02:23,100 get certain features to work. Now 31 00:02:23,240 --> 00:02:24,530 that's pretty cool, 32 00:02:24,530 --> 00:02:31,970 this already shows us one example of an extra tool we need to build proper applications with Javascript. 33 00:02:31,970 --> 00:02:38,240 We needed this development server to have a more realistic testing environment, where we actually serve 34 00:02:38,270 --> 00:02:44,100 our web page as if it were served by a web server somewhere on the Internet. 35 00:02:44,100 --> 00:02:50,210 Previously we just double clicked on our index.html file and that therefore did use the file 36 00:02:50,210 --> 00:02:51,190 protocol. 37 00:02:51,380 --> 00:02:57,500 Good enough for many things but with certain limitations as we saw when we started to use Javascript 38 00:02:57,500 --> 00:03:04,430 modules where all of a sudden for security reasons, the file protocol was not supported and we needed 39 00:03:04,430 --> 00:03:07,870 a real web server environment. With that development server, 40 00:03:07,880 --> 00:03:08,900 we have that. 41 00:03:08,900 --> 00:03:15,350 So this is already one example of an extra tool we can use to have a more realistic development environment 42 00:03:15,620 --> 00:03:19,410 and to fully use all the things we can use with Javascript, 43 00:03:19,430 --> 00:03:21,440 it's of course not the only tool though.