Beginner's introduction to modern JavaScript - What are Node.js, npm, ECMAScript, Babel and Webpack?

In this article, I explain about some keywords that supports you to write or understand modern JavaScript. I hope this article helps new JS leaners or server-side devs.

"modern" JavaScript

First of all, what does "modern" mean here? I think achiving modules is most important for JS modernization.

Modules makes it possible to use classes, functions and so on defined in other files. It's pretty common for famous programming languages such as Java, Python, Ruby, PHP, but JavaScript has been too simple to have this functionality.

Structuring your codes as modules is very important for a serious development. And with modules, JavaScript grew up to a language that is capable of complex frontend development, not just moving around carousel images or something like that.

Well, from here, I will introduce you to 5 keywords that consists modern JavaScript - Node.js, npm, ECMAScript, Babel, Webpack. Let me try to explain who they are, as simple as possible.

Node.js

Node.js is one of the JavaScript runtime environments. It was built in order to use JavaScript in server-sides.

JavaScript runtime environment consists of:

1. JavaScript engine that reads and parses syntax.
2. Additional objects (APIs) that helps devs work in each specific environment.

Browsers also have built-in JS engines inside them. And whatever the enviroment is (frontend or server-side), the basic syntax must be the same. "if" is "if" and "Array" is "Array". It's JS engine's job to understand common JS syntax specs.

On top of that engine, there is an environment-specific functionalities.

For exmaple, in browser, we have getElementById that manipulates DOM, or APIs for audio and video. These are necessary only for the browser.

In the same way, Node.js has its own functionalities (Node.js core modules) which are necessary only for the server-side, such as reading / writing files in a server. And it also introduced modules (require) as its core.

Node.js lets you write server-side code like web app in JavaScript, but not only that, it brought huge benefits on frontend development. It enables easy for developers to execute JavaScript code on their computers. Therefore, many development tools based on Node.js have been emerged, such as Babel, Webpack, Browserify, Gulp, etc. They made frontend development more advanced (and cool!).

npm

npm （Node Package Manager） is package manager for Node.js, as it explains itself.

"Package" is, in a word, external (3rd party) libraries.

npm consists of:

1. a database (repository) that collects packages.
2. CLI for:
   • uploading packages to repository
   • publishing packages
   • downloading / updating packages
   • etc.

npm is bundled with Node.js installation. They live together. Node.js introduces modules, and npm helps publishing / using 3rd party modules. I think they are both leading actors of modern JavaScript.

By the way, There is another popular package manager for Node.js, yarn. It uses same repo as npm, and CLI is its own.

ECMAScript

ECMAScript is language specification of JavaScript standarized by Ecma International.

New features of JavaScript are considered and adopted through Ecma International. The process of standarization consists of several stages:

1. Stage 0 (Strawperson - i.e. just an idea)
2. Stage 1 (Proposal)
3. Stage 2 (Draft)
4. Stage 3 (Candidate)
5. Stage 4 (Finished)

On each stage, people in JavaScript community discuss about and review suggested feature. And the feature which survived these stages finally became a part of JavaScript officially.

From 2015, every year new features introduced into ECMAScript. Each version is called after its year, like ES2019 or ES2020.

The important thing here, for frontend developer, is that standarization and implementation of JavaScript are done by different groups.

Ecma determines JavaScript spec, but implementation is up to individual browser vendors. Some browsers may include features that are not in final stage yet, and another browser (well, you know, IE) may not implement newly approved features.

So there is a dilemma. Frontend devs want to use cutting edge features or syntax. But on the other hand, not all browsers would implement these.

Developers should be conscious about this clearly, in order not to write "cool but non-functional" code. You can see sites like Can I Use as a reference.

I think it's frontend-specific problem because in server-side world, you can totally control the environment your code works.

And there is an advenced solution for this dilemma. It's babel, as I show below.

Babel

Babel is a tool that transform your JavaScript code to another version of syntax.

This is a solution for the gap between standard and implementation. It converts new syntax to old syntax that specified browser can understand. So clever.

For exmaple, this code will be transformed to...

const func = a => a * 2;

this snippet of code through babel.

"use strict";

var func = function func(a) {
  return a * 2;
};

This transformation process is called "transpile". It's like "compile" but the difference is that "compile" is high-level language to machine language tranformation, and "transpile" is high-level to high-level.

Babel is also used for transforming out-of-standard syntax like JSX (well knows as a companion of React) into parsable JavaScript.

There is playgound page that you can playing around and confirm its work.

Basically, babel transforms syntax only, like for-of, arrow function and class. It doesn't automatically supplement methods or objects that don't exist in target browsers (it's not just a transformation).

If you add not-yet-implemented methods, you should include additional snippets called polyfills. Still, babel provides the way to inject polyfills into your codebase.

Webpack

Webpack solves dependencies of multiple files and generate browser-friendly JavaScript file(s).

In other words, webpack brings modules to browser-land.

As I mentioned above, Node.js introduces modules. And after that, ECMA standard for modules (import/export) is also adopted.

// Node.js
const myModule = require('./my-module.js');

// EcmaScript
import myModule from './my-module.js';

But unfortunately, there isn't yet common way to use modules in browsers. In fact, there is a standard for browser-side modules, and it even implemented modern browsers in 2017 ~ 2018, but it's not widely accepted because many developers still don't figure out how to apply that feature.

So, webpack help you use modules in frondend codebase. It combines your files and files you required or imported, and generates JavaScript file without module statements.

This process is called "bundle" / "bundling".

For exmaple, when a.js imports b.js, webpack generates a file that includes both contents of a.js and b.js. The generated file is totally workable for browsers.

Let's think a bit more about dependencies and why webpack benefits us.

Think about this exmaple. a.js requires b.js and e.js, and b.js requires c.js and d.js.

If we have to manage this dependencies without modules, it would be like this.

<script src="/js/c.js"></script>
<script src="/js/d.js"></script>
<script src="/js/b.js"></script>
<script src="/js/e.js"></script>
<script src="/js/a.js"></script>

As you might think, this gonna be hard to maintain. Orders of c.js and d.js are OK to replace, but d.js and b.js are not. We cannot figure this out by just seeing HTML. This is really unstable puzzle.

Modules and webpack along together, solve this problem.

All we need is just include generated file. Develpers are free from managing depencencies on their own.

<script src="/js/main.js"></script>

Webpack can even bundle CSS or image files into JavaScript.

One advenced topic here. Webpack generates one JavaScript file with default settings. But it may be a problem, because the file would become gigantic enough to be bad for performance.

In order to handle this situation, webpack provides Code Splitting functionality. It's a technique for separating generated contents into several files.

Wrapping up

In the end, blow is a figure of tools I explained and relations between them.

Well, that's all. In these days, frontend development became complex and just leaning JS syntax is not enough to create real world apps. So it's my pleasure to this article helps beginners grabbing an idea about modern JavaScript world.