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:
- NodeJS is a runtime for JS (what?)
- You use NodeJS for both front-end and back-end
- 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.
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 🤯.
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.
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:
This is how you normally would import your favorite frameworks into your site:
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.
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
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?
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.
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! 🙌