We've ventured pretty far into Javascript land and the more and more we learn about Javascript, the more
and more we see that projects, browser side projects using Javascript can get complex.
For example in the last module, we learned about Javascript modules which basically means splitting our
code across multiple Javascript files, where the files then import each other.
Now there we could already see a huge advantage of this approach,
it makes our code more manageable but we also saw a disadvantage there,
we had a lot of HttpRequests because all these separate files had to be downloaded one-by-one and
the bigger your project grows, the more this might become a problem.
Therefore in this module here, we'll have a look at Javascript tooling which essentially is all about
managing our project with certain tools that automatically optimize our code, combine our code and get
out of our way
when we are writing our code so that we can write our code in the best possible way and still get an
optimized and better output than we're currently doing it.
So in this module, we'll have a look at what exactly we do there and why we do that,
which tools we use and which tools we can use, which tools are popular
and I will also walk you through an example setup where you will see how to work with these tools to
get this optimized project.
Now for that, I am back in the Javascript project we already worked on in the last module where we introduced
these multiple files.
It's the good old project manager where we can drag and drop projects with our different files here
and therefore
as I explained, one issue we have especially if this would be a bigger project is that we have multiple
HttpRequests here
and the more files we add, the more requests we have
and since every request comes with a little bit of overhead even if the file is pretty small, it can
still be annoying and slow down our application if we have to download thousands of files, so we might
want to avoid that
and that's exactly where tooling can help us.
Actually, we are already using one tool, this development server here which we had to use in order to
get certain features to work. Now
that's pretty cool,
this already shows us one example of an extra tool we need to build proper applications with Javascript.
We needed this development server to have a more realistic testing environment, where we actually serve
our web page as if it were served by a web server somewhere on the Internet.
Previously we just double clicked on our index.html file and that therefore did use the file
protocol.
Good enough for many things but with certain limitations as we saw when we started to use Javascript
modules where all of a sudden for security reasons, the file protocol was not supported and we needed
a real web server environment. With that development server,
we have that.
So this is already one example of an extra tool we can use to have a more realistic development environment
and to fully use all the things we can use with Javascript,
it's of course not the only tool though.