Basic Architecture of NodeJS and Web Creation..

Photo by Pankaj Patel on Unsplash

In this article we will go through the basic concept and architecture of NodeJS. We will go through how web works, and how NodeJS executes the code under the hood. So we will segregate our discussion into several segment.

  1. What is Node Js ?
  2. How to Web works ?
  3. Architecture behind NodeJS ?

1. What is Node Js ?

Node Js is a JavaScript runtime built on Google open source V8 js engine. Node Js is just a JavaScript outside of the browser. JavaScript is run in V8 engine provided by Google.

What is the perfect condition for using Node Js as a web server ?

We can use JavaScript on the server side of web development , in order to build fast , highly scalable network applications (Backend)

Why and when to use NodeJS ?

Node Js Pros:

  1. For single threaded based on event driven , non blocking I/O model.
  2. Perfect for building fast and scalable data- intensive apps.

Use Node Js:

  1. API with databases behind it.
  2. Data streaming real time chat application.
  3. Server side web application.

Don’t use NodeJS :

Application with heavy server side processing (CPU-intensive).

Features of NodeJS:

Companies like Netflix, Uber, PayPal, eBay have started using NodeJS in production.

Since NodeJS is having JS across the entire stack it makes faster and more efficient development.

NPM:- Node package Manager is a huge library of open source packages available for everyone for free.

NodeJS is having very active developer community.

So to proceed with our discussion , we should know what are different approach by which NodeJS works:

Synchronous Approach:

const fs=require (‘fs’)

const input =fs.readFileSync(‘input.txt’, ‘utf-8’);

console.log(input)

Asynchronous Approach:

const fs=require(‘fs’)

fs.requireFile(‘input.txt’ ‘utf-8’ ,(err, data)=>{

console.log(data)

});

console.log(‘Reading file’);

So these are two approach we can apply NodeJS. So NodeJS Process is the place where our application runs. If one user got access to the single thread in synchronous way others have to wait for it to get complete. This scenario is called callback Hell which is a disadvantage of synchronous approach. But in asynchronous approach , the more time consuming tasks should be executed in background, so that other processes need not to wait for that process to get complete.

2. How the Web works ?

So what happens when we access a webpage.

DNS <=>DNS Lookup<=>Client (browser)<=>TCP/IP Socket<=>Server

https://www.google.com/maps

Now we let analysis Google map url as example. Here ‘https’ is the protocol, ‘www.google.com’ is the domain name and ‘maps’ is the resource.

We need to have something to convert domain name to real name of the server. DNS (Domain Name Server), is special server which are basically like a phone book of the internet. Browser makes request to DNS , this DNS then simply match the web address that we type into the browser to the server with real ip address .This happens with ISP( Internet Server Provider) .Domain is not the real address , DNS will convert it to the real ip address which your browser can then call after it been send back to our browser.

https://216.58.211.206:443

‘http’ is the protocol, 216.58.211.206 is the IP address, 443 is the port number , by default 443 is the port number for https and 80 is for http.

Once we have the real web address , a TCP/IP socket connection gets established between client and server, this connection is typically kept alive for entire time for transferring all the files on website.

What are TCP/IP ?

TCP is the transmission controlling protocol, and IP is the internet protocol, and together they are connection protocol that define exactly how data travel across the web. They are basically the internet fundamental control system, they are the one who set the rules about how data moves.

Client==> Http Request==>Server

Communication protocol is simply a system of rules of two or more parties to communicate. In case of http it’s just a protocol that allow client and web server to communicate by sending request and response message from client to server back.

Request message looks like this:

Start Line (Http method+request target+HTTP version)→ GET/maps/HTTP/1.1

Host:www.google.com

User-Agent: Mozilla/5.0

Accept-Language: en-us

<Body> → Request Body

GET is used to get data, POST is used send data, PUT and PATCH is used to basically modify data.

then Http response header looks like this:

Start Line (HTTP version+ Status code+ Status message)→HTTP/1.1 200 OK

Date: Fri, 18 Jan 2021

Content-Type: Text/html

Transfer-Encoding: checked

<Body> →

Response Body

Then index.html is the first to be loaded , then it scan for assets like JS, CSS and images. Then the process is repeated for each file. TCP actually breakup the response into thousand of small chunks, before they are set. Once they get their destination it will reassemble those into the original required response, which will be automatically seen in the browser. IP is used to send routes for all of the packets to the internet which are nothing but the ip address of each packets.

Frontend VS Backend Web Development

Server: A base server is real component that is connected to internet, which stores full HTML, CS, JS and runs http server, which is capable of performing request and response.

Static VS Dynamic VS Api:

Static application will be having html , css and JavaScript files in the web server. There will be no backend code for static websites.

Html, Css , JavaScript →browser →Ui

Dynamic application is actually server side rendering.

Database →get data →build Web using Template →Html, Css, JavaScript →browser →Ui

Web Application =Dynamic website + Functionality.

API →Database →Get Data →JSON →Browser →Build Website using Template →Ui

3. Architecture behind NodeJS ?

|V8 JS →Machine Engine| →|Libuv →free source library with strong focus JS and synchronous output + C++ + event loop |

V8 is the machine engine for NodeJS, and it uses library called Libuv which free source library with strong focus on JS , NodeJs is the combination of JavaScript and C++. It having a feature called event loop which manages the threads and event execution.

Using node on a computer means there will be a NodeJS process(instance of a program in execution on a computer).

Single Thread(Sequence of instruction)

If you run node application , we will run on a single thread.

Initialize program →execute ‘top-level’ code →require modules →register event callbacks →start event loop

So when event are hard they could not be done in start event , those are handled by thread pool.

Thread Pool:

Thread pool can have additional 4 or more Thread or tasks running parallelly , It also takes offload works from the event loop, it is also capable to handle heavy tasks such as File System APIS, Cryptography, Compression and DNS Lookups.

Event Loops:

All the application code that is inside callback functions (non top / top level code) are handled by event loop . NodeJS is build around callback function.

Event Driven Architecture:

Event Loop →start →Expired Timer Callback →I/O polly and callback →[Next Tick() Queue] →set Immediately callback →[Other Microtasks Queue] →close callbacks →Any pending timer or I/O tasks ? →(Yes) →Back to Expired Timer Callbacks/ else it will Exit.

So first event are emitted, event loops picks them up and callbacks are called. Event loop does the orchestration , it receives events, calls there callback functions , and offers more expensive tasks to the Thread pull. Event loops make asynchronous possible in NodeJS. So It don’t block the tasks, don’t use synchronous version of function in fs.crypto and zlib modules in our callback function, don’t perform complex calculation, becomes careful with the JSON in large objects, don’t use too complex regular expressions. The event loop actually works for all these stuff to happen .The poll phase is the phase where I/O callbacks are handled, So when the queue of callbacks is empty, we have no I/O callbacks. Event loop will wait in this phase until there is an expired timer, But if we scheduled a callback using setImmediate, then that callback will actually be executed right away after the polling phase and even before expired timer. If there is one such tasks , in that case the timer expires right away after zero second, for that the event loop actually waits , so it pauses the polling phase, so that setImmediate callback is actually executed first. Next Ticks was a task of microtasks, and a queue that gets executed after each phase, not just after one entire tick .So to summarize ,setImmediate actually executes once per tick, while next Ticks gets executed immediately.

So in node, there are certain object called event emitters that emit events as soon as something important happens in the application. This events can then be picked up by event listener that we developers set up, which will fire off callback first that are attached to each listener.

Event Emitter →emits event →Event listener →calls →Attached callback function

NEW REQUEST ON SERVER

127.0.0.1:8000 → Listener:

const server=http.createServer()

server.on(‘request’,(req,res)=>{

console.log(‘Request received’);

res.end(‘Request received’);

})

So here we are creating a listener .When a new request is made, the server acts as an emitter, and will automatically emit an event called ‘request’, each time that request hits the server. Then since we already have a listener setup for the exact event, the callback function that we attach to the listener will be called, it will simple send the same data back to the client, Now it works this way because behind the scene the server is actually an instance of the NodeJS, event Emitter class. So it inherits all the event listening logic from that Event Emitter class. [Event emitter logic is called observer Pattern in JS].So the idea is that we set there a observer, in our case the event listener will act as observer which keeps waiting ,keeps observing the subject that will eventually emit the event that the listener is waiting for. And the opposite of the pattern is simply function calling other function, so observer pattern is an actual design to react rather than call, there is a huge benefit of using this architecture, it is fast , everything is more de-coupled. We don’t have function from the file system module so we call functions from HTTP module, these modules are nicely de-coupled and self contained. This architecture make it way more straight forward to react multiple time to the same event.

Streaming:

Streaming is used to process(Read and write) data piece by piece (chunks) without completing the whole read and write operation, and therefore without keeping all data in memory. It is perfect for handling large volume of data like videos and is more efficient in data processing in terms of memory (no need to keep all data in memory one time. We don’t have to access all the data which are available).

In Node there are 4 fundamental type of stream:

Readable Streams: Streams from which user can read container data , example: http request file read stream, stream are instance of the event emitter.

Writable Streams: Stream from which user can write data, example: http response for file write stream.

Duplex Streams: Stream that are both readable and writeable, example: net web socket.

Transform Streams: Duplex stream that transform data as it is written or read, example: Zlib Grip creation.

Requiring Modules:

Each JS file is treated as a separate module. Node JS uses the common JS module system. There have been attempts to bring ES modules to node JS(.MJS)

require (‘test-module’) →resolving & Loading[require to receive the module name as input start with core module if it begins with ./axios to load developer modules, it means is no file found try to find folder with index.js in it. Else go to node-modules /axios and try to find the module there.] →wrapping →execution →returning exports →caching

Wrapping:

function(exports,require,module,_filename,_dirname){

//module code lives here

}

node doesn’t actually execute the code that we write into a file but instead the wrapper that will contain our code in it’s body will execute the code.

require →function to require module.

module →reference to the current module.

exports →reference to module exports, used to export object from a module.

_filename →absolute path of the current modules file.

_dirname →directory name of the current module.

Returning exports:

Require function returns exports of the required module. Module exports is the returned object, we can use module.export to export one single variable, for example one constant or one function, We can also use exports to export multiple variables as well.

So this is the big picture of how actually NodeJS works under the hood and how a website gets created. We have covered mainly the theoretical side of the NodeJs. We have not done anything practically for now. This is the basic architecture of NodeJs which we should know before we start implementing NodeJS in our application.

HAPPY CODING :)

--

--

--

Web developer by profession,Photographer,Blog Writer,Singer,Pianist,Seeker of Solution

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Adding Speech Commands and Voice Controls to Your Apps

[HPM] Error occurred while proxying request [ECONNRESET]

Is Node.js Really Single-Threaded?

Web Components with Shadow DOM and Sass.

JavaScript, Version Controlling & NoSQL

React and Node Express in the Same Repos

Ans: In computer science, a primitive is a fundamental data type.

Composition or Inheritance, Which One Do You Prefer?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yudhajit Adhikary

Yudhajit Adhikary

Web developer by profession,Photographer,Blog Writer,Singer,Pianist,Seeker of Solution

More from Medium

Typescript vs. Javascript: The Key Differences You Should Know in 2022

TypeScript vs. JavaScript: The Key Differences You Should Know — Flatlogic Blog

Build dynamic breadcrumb routes and child routes with matchPath in React Router v6

Defining Routes with Express JS for your App