Why NodeJS in Front Ends?

Why I wrote this

Back when I started web development, I watched (and still watching) web developers' channels on Youtube (such as Fireship.io). One of the things that kept bugging me is the fact that they use NodeJS when working with front end frameworks or library.

Like most developers, I googled the topics. After a few hours of banging my keyboards (both with hands and head 🙃), the things that I gathered are:

1. NodeJS is a runtime for JS (what?)
2. You use NodeJS for both front-end and back-end
3. Most "Getting Started" tutorials talk about using Node JS as server and back-end stuff (i.e: the complete opposite of front-end dev.)

None of them answered my questions of why do you use NodeJS in front end environment.

Fast forward a few NodeJS intros and reading docs of front end frameworks, I finally grasped the why's and how's. And here, I would like to save the hassle of other web developers who are dipping their toes in the water.

A bit-sized intro to NodeJS

Here's my best one-liner for this: "It's the browser's console without GUIs". You give it JS code, and it will run them. NodeJS is actually based on Chrome's V8 JS engine, so it really is an upgraded component of a browser 🤯.

It's only job is to run JavaScript, while giving access to other stuff not commonly done on browser (read/write files, executing shell scripts, etc.)

So it's a back-end software?

Technically yes, it sits on your computer (or servers), not on the browser.

Then why in the world would you develop front-end stuff with that?

As always, the truth is always a tad bit complicated.

Purpose of NodeJS on Front End dev.

If you have been exposed to Python long enough to acquire Slowness II effect, you may have heard of PIP. It's a package manager, meaning that it helps you install libraries, uninstall them, and keep tracks of what you have installed.

Similarly, NodeJS has NPM (though there are others, this one is the default).

NPM have packages that you might expect: Express for back-end, http library to listen to requests, etc.

But it also have front end frameworks as packages: React, Vue, Svelte, etc.

Why it's there when we have CDN links? Which one should I use now?

And here are the reasons:

1. Easier package management

This is how you normally would import your favorite frameworks into your site:

<script src="https://cdn.js/myframework/doDSF923HkHWEdss=="></script>

What's wrong with that, you ask? Well, if you have multiple frameworks, the order of tags inside the HTML file become critical. Some script tags have to be put at a higher order, while have to be placed lower.

Mess this up, and get ready for an afternoon debugging session 😵.

NodeJS uses the CommonJS syntax for exporting and importing "modules" (e.g: importing your frameworks). So instead of script tags in HTML, you use this in your JS file:

const MyFramework = require("myframework")

I do admit, it's kinda an edge case, but the next one would surely benefit everyone.

2. JS for programming development tools

A neat aspect of NodeJS is that it allows building tools that can seamlessly interact with your front end code, because it natively uses JS. Development tools can include:

• Module bundlers, which combine all your JS code and its dependencies into one massive file. Examples include webpack and browserify.
• Tree shakers, which "shakes" unused or dead codes from your JS files. One of them is common-shakeify

and others...

Sure, you can use any language under the sun to program these, but parsing JS code is better done with JS itself.

And to use JS, you need a way to run JS without browser, hence NodeJS.

Also, front-end developers don't have to force another programming language's syntax inside their head just to make a dev tool 😵‍💫. They understand what they want, so why don't we give them a little push?

Closing words

So, I guess that's all I have to say about this. TLDR; people use NodeJS because it's easier to manage libraries, while having access to lots of dev tools.

There are certainly other alternatives to NodeJS, like bun and deno. These are the same stuff (with additional... stuff), their function is to run JS outside of your browser.

They are the same stuff at the end of the day, and you can choose whatever you like. Though NodeJS is way more popular.

Happy coding! 🙌