Let's start a section with a general overview
of Modern JavaScript Development.
So basically of how we write JavaScript today.
Because when we built applications,
we don't just write all of our code into one big script
send that script as it is to the browser,
and call it a day.
Now it used to be like this,
but the way we built JavaScript applications,
has changed tremendously over the last couple of years.
So back in the day,
we used to write all our codes
into one big script or maybe multiple scripts.
But today, we divide our projects into multiple modules
and these modules can share data between them
and make our code more organized and maintainable.
Now, one great thing about modules
is that we can also include 3rd-party modules
into our own code.
And there are thousands of open source modules,
which we also call packages,
that developers share on the NPM repository.
And we can then use these packages for free in our own code.
For example, the popular React framework or jQuery,
or even the Leaflet library,
that we used before in our Mapty project.
All of these packages are available through NPM.
Now NPM stands for Node Package Manager,
because it was originally developed together
with Node.js and 4Node.js.
However, NPM has established itself
as the go to repository
for all kinds of packages
in Modern JavaScript Development.
Now, in order to actually download
and use and share packages,
we use the NPM software installed on our computer.
And this is just a simple command line interface
that allows us to do all that.
So basically NPM is both the repository
in which packages live and a program that we use
on our computers to install and manage these packages.
So let's say that we are done writing our project code.
So we divided it into multiple modules
and we included some 3rd-party modules as well.
And so now the development step is complete.
However, usually that's not the end of the story.
At least not when rebuilding a real world application.
Instead, our project now needs
to go through a build process,
where one big final JavaScript bundle is built.
And that's the final file,
which we will deploy to our web server for production.
So basically it's the JavaScript file,
that will be sent to browsers in production.
And production simply means that the application
is being used by real users in the real world.
Now, a build process can be something really complex,
but we gonna keep it simple here
and only include two steps.
And the first step, we'll bundle all our modules
together into one big file.
This is a pretty complex process
which can eliminate unused code
and compress or code as well.
Now this step is super important for two big reasons.
First, older browsers don't support modules at all.
And so code that's in a module could not be executed
by any older browser.
And second, it's also better for performance
to send less files to the browser,
and it's also beneficial that
the bundling step compresses our code.
But anyway, as the second step,
we do something called transpiling and polyfilling,
which is basically to convert
all modern JavaScript syntax
and features back to old ES5 syntax,
so that even older browsers can understand
our code without breaking.
And this is usually done using a tool called Babel.
So, remember that I said right in the beginning
of the course, that we were gonna do this,
and in this section, we will finally do it.
So these are the two steps of our build process,
and after these two steps,
we end up with that final JavaScript bundle,
ready to be deployed on a server for production.
Now, of course we don't perform these steps ourselves.
Instead, we use a special tool to implement
this build process for us.
And the most common build tools available,
are probably webpack and Parcel.
And these are called JavaScript bundlers
because well, as the name says they take our raw code
and transform it into a JavaScript bundle.
Now Webpack is the more popular one,
but it can be really hard and confusing to set it up.
So that's because there's a lot of stuff
that we need to configure manually,
in order to make it work properly.
Parcel, on the other hand is a zero configuration bundler,
which simply works out of the box.
And so in this bundler,
we don't have to write any set up code,
which is really amazing.
So I personally absolutely love Parcel
and I use it all the time,
and I think that you will love it too.
And so, that is the JavaScript bundler
that we gonna use later in the section.
Now these development tools are actually
also available on NPM.
So just like packages that we include in our code,
we will download and manage tools using NPM as well.
And these tools include the live-server
that we've been using all along,
the Parcel bundler that we just talked about
or Babel to transpile code back to ES5.
All right, so this is a high level overview,
of how we develop Modern JavaScript applications today.
And if you ask me, this is really exciting stuff,
because this is how professional developers
actually write JavaScript today.
And so in the rest of the section,
you will take a big step in the direction
of becoming a professional developer too.