Why do front end frameworks need node.js? Is not it server side?

Many of the developers who are just getting started with front end have questions like “Is not Node.js backend framework?”, “Why is it necessary to install Node.js for running my React application? Can’t I just link the CDN script and develop?”, “Are node.js and Javascript same?”. Don’t worry! This article will give you better clarity about Node.js and its role in both front-end and back-end applications.

Are javascript and node.js the same?

The answer is No. While Javascript is a programming language that can be used to create beautiful, interactive websites that run in a browser ecosystem, node.js is a server-side ecosystem built that allows the javascript to be run on the server-side.

Now, you may wonder what is the difference between running javascript in the browser and in the node.js run time?

Both browser run time and node.js run time use javascript as a programming language. node.js is built using Chrome’s v8 javascript engine. In browser, you will have access to cookies, web apis, document and window objects which do not exist in node.js. However, node.js has access to file system and support module systems like CommonJs and ES. As Javscript keeps evolving, node.js quickly incorporates the latest updates and make them available in the ecosystem. But browsers are bit slow to upgrade. In node.js ecosystem, import statements are supported out-of-the-box where as browser has limited support.

Now that, we have understood how javascript is used in browser runtime and node.js run time. Let’s see how node.js is used in front-end.

Let’s say you want to use react.js most of the tutorials ask you to install node and NPM unless you are explicitly searching to develop from cdn library. Why?? Let’s see..

The role of Node.js in front-end frameworks and libraries:
Even though Front-end frameworks can run seamlessly without relying node.js, in certain ways node.js plays a crucial role in improving the developer experience, optimising the overall architecture and providing a large-scale eco system to build the applications.

Lets talk about a few examples here,

• Latest JavaScript features: As mentioned earlier, javascript version supported by node.js is way advanced than browser. It is running Chrome’s v8 engine and stays up-to-date with all new javascript features. Developers can start leveraging the latest features like import and reusable module systems. But, we can use transpilers to transform the javascript files to browser understandable formats.
• NPM — Node Package Manager — It hosts wide range of both front end and backend javascript based packages running on the node.js run time. Unlike the traditional way in which we need to manually download the libraries to consume in the projects, npm provides a cool cli to install and manage packages. Build tools such as webpack, Browserify, Gulp and Grunt which are written in node.js and designed to be used with npm. Developers can leverage this type of building and bundling tools in their applications. Before arrival of these tools in npm, the backend systems were taking care of building and bundling tasks.
• Code quality tools like Linters which help in identifying the issues related to syntax and even allow the developers to set the custom standards. These tools are built on top of node.js and can be leveraged in front-end applications.
• There are many css preprocessors such as Sass, Less and packages like styled-component are available in npm. Testing — Frameworks like jest allows the developers to write unit tests which can help them capture the bug if code is modified in future.
• node.js also helps in hot reloading with which, on every code save, the page would be refreshing automatically.

In summary, node.js is used in both front end and back end. In front-end, its mainly used for dependency management, building, testing and even server-side rendering. In backend, its used to build server side applcications and APIs. Overall, it provides a flexible platform with improved developer experience.