NodeJS - A Can of Worms

NodeJS, a Local Runtime... Whut?

Haha, yes, I didn't really understand what NodeJS was about either. Let's try and describe it from a layman's point of view. You see, JS was first designed to run within a web browser, and it couldn't really in any other environment. Well, not that it couldn't, but there was no runtime environment for JS to execute codes in the context of your local computer processor.

But that's where NodeJS comes in. The first feature of Node is that it's an open-source JS runtime environment that allows you to execute JS code in your local computer terminal. It runs the so-called V8 JS engine, which forms the core of Google Chrome, outside of the browser. Better still, it's cross-platform (i.e. works across windows, MacOS etc.).

Just remember, NodeJS is not a programming language! It's basically something that upgrades JS so as to speak. Loads of other advantages and features, but not too important for the React beginner. Let's get into it!

Installing NodeJS

I'm assuming you're a beginner like me, so headover to the Node.js website and download the corresponding installer for your platform. Run it and well, that's about it really.

The next step is to verify that the installation went through successfully. So load up your terminal or your commandline equivalent, and type in the following command:

Node --version

If Node was installed successfully, you should see the version number of Node as the output, something like this:

Output:
v16.15.0

Okay, So What Can We Do With Node?

Remember I said you can now run JS from your computer terminal? That's what you can do with Node now, minimally. So let's try writing a very simple JS code block, and save it as "node-try-try.js":

// Your code goes here:
const greeting = "hello React!";
console.log(greeting);

And where your JS file is, run the following command in your terminal:

node node-try-try.js

And like magic, code is executed in your terminal:

Output:
hello React!

So What's the Deal with Node?

Chances are, if you're anything like me, you just used Node because, well, someone told you to do so. What exactly is it, other than a runtime environment? Here comes the dealbreaker - NodeJS is a runtime environment that supports JS in both client- and server-side codes.

The client-side code, or frontend, is the one that governs the interactions with the user. So how you interact with a webpage via your browser? That's called the frontend. Webpage design? Yup. And typically, frontend coding uses things like HTML, CSS, JS and other JS frameworks.

What about the server-side? That's called the backend. The code here deals with things like storage and arrangement of data, writing APIs, creating libraries, dealing with data requests etc. And typically, you work in coding languages like Java, Python, PHP or C++.

And that's what makes NodeJS so convenient and powerful. You can now code backend in JavaScript! Of course you need to know the backend coding principles - but you can jump right in with JS, and that makes the learning curve a lot gentler.

One cool feature of NodeJS is that working in Node allows you to code asynchronously in web applications. Great, now that I've opened a whole new can of worms - what is asynchronous coding (or synchronous for that matter)?

Synchronous Coding

Let's write a very simple JS code block to illustrate what synchronous coding means:

const greeting = "hello React!";
const response = `I see "${greeting}" being displayed`;
console.log(response);

Now, this is synchronous coding because the code is effective being run one line at a time, in the exact order we wrote it. Not only that, we have to wait until each line of code finishes before we can go on to the next, because each line of code is dependent on the previous line of code.

It goes without saying that we run into a problem when we have a really complex asynchronous code that takes a very long time to run. When your synchronous code is running, your program just can't do anything else!

Okay... How Do We Perform Asynchronous Coding?

So if only we could have a piece of code that returns to us, so that the entire program chugs along and allows it to run until it's completed. "But surely all programming languages are synchronous and codes are executed step-wise!" Yeah, that's kinda true. You can't quite use JS as it is to write an asynchronous code.

Or can you? Heh, in modern JS, we use something called a "promise". A promise is an object that is returned by a function that represents the current state of the computation being executed. At the time of the delivery of the promise, the computation isn't completed, but the promise object itself has methods within it to handle the eventual outcome of the computation.

And like real life, a promise can be in one of three states:

• pending: you've created a promise but the computation is still running. This is as good a Schrödinger's cat as we can get in coding.
• fulfilled: goody, the computation somehow succeeded! When this happens, your promise then initiates a "then()" method to handle the result of the computation.
• rejected: kinda sucks, this means the computation failed. So your promise then calls a "catch()" method to handle the error.

How's This Related to Node?

A NodeJS app is well, asynchronous code. It's able to run in a single process, without creating a new thread for each data request and wasting CPU cycles waiting blindly for operations to finish running. It's able to do so because it provides a set of asynchronous I/O code components in its library, to well, write asynchronous code.

And so, with a single server, your app is now able to handle many concurrent data requests without blocking the entire program. Sweet.

Find more ReactJS stories on my blog. Have a suggestion? Contact me at [email protected].