Narrator: Now that we know what this project is all about
let's take a look at modern JavaScript.
So the way we write JavaScript has changed tremendously
during the last couple of years.
Today, we compile ES6, and even newer JavaScript versions,
down to ES5.
We use module bundlers, task runners,
external packages, and other dev tools.
So, up until this point of the course,
we have always coded JavaScript
in the kind of old school way, okay?
But that's about to change with this project
where we're finally gonna use JavaScript
the more modern, real world way.
Now, modern JavaScript is not so much
about the language itself.
But it's more about the whole JavaScript ecosystem,
and environment that we use to write it in, okay?
And this one is important to understand.
So, we still write the exact same JavaScript
but we use it together with a set of tools
that make it easier and better to work with.
And the foundation of all these tools
is the Node Js and NPM ecosystem
Where we can find all kind of third party open source tools
and libraries and frameworks needed
for modern web development.
And with libraries and frameworks
that means stuff like Reactor, Angular,
or libraries like Lodash, or even Jquery.
Then, we also have development tools,
like for task automations,
automatic browser reloading,
or to compile JavaScript down to ES5.
Now, in order to use and share these packages,
we need some kind of tool to install and to manage them.
And that's where the node package manager,
or NPM, comes in.
So NPM is just a simple command line interface
that allows us to do exactly that.
Plus, NPM also allows us to write scripts
to use our development tools, but more on that a bit later.
Alright, so the first tool that we use
in modern JavaScript is Babel.
In order to convert cutting edge JavaScript
like ES6, ES7, or even ES8,
which together are simply called ESNext, back to ES5.
So if all browsers are capable of understanding our code.
In a couple of years, this might no longer be necessary
but for now, this is an important step
in our development process.
Next up we want to use ES6 modules
in order to make our code more modular
and therefore, easier to maintain.
By separating different parts of our amp
into different files.
And ES6 brought us exactly that possibility
by implementing modules.
Now the problem with these modules is that, right now,
browsers can not really support this functionality yet.
And so we have to bundle these modules together
into a single file using something called a module bundler,
and the most popular one out there is called Webpack.
And so that's the one that we're gonna use in this project.
Now webpack can actually do so much more
than just bundling modules
like codesplitting, loading menu types of assets
like sas or images, decreasing our JavaScript bundle size
using an algorithm called treeshaking
and much, much more.
But in this project, we're not gonna do any of that.
We just want to use Webpack
to bundle all the modules together.
And there are other, way more simple ways to do only this,
but I wanted to show you Webpack because, once again,
it's really the most popular choice out there.
So Babel and Webpack are the main tools that we're gonna use
and as I mentioned, these are NPM packages.
And the easiest way to run these packages
is by using something called NPM scripts
which allows us to run all these tools
automatically and very easily in our command line interface.
Alright?
And that's actually all we need
in order to build our modern JavaScript setup.
So, now that we know all about it,
let's set up our development workflow
over the next couple of lectures
with NPM packages, Webpack, and Babel.