MERN Stack in Web Development: An

Interactive Approach

Nikunj Mani Gupta Rinkul Singh Suman Shekhar Das

School of Computing Science and School of Computing Science and School of Computing Science and
Engineering Engineering Engineering
Galgotias University, Greater Noida, Galgotias University, Greater Noida, Galgotias University, Greater Noida,
India India India
[email protected] [email protected] [email protected]

Dr. Raju Ranjan

School of Computing Science and
Engineering
Galgotias University, Greater Noida,
India
[email protected].
in

Abstract— There are many notable web stacks, but one that client side.
has stood out as particularly important is the MERN stack. • The letter "N" for "Node.JS" Node.js, which is
This is due to the ease with which it can deliver and implement generally used to support the main JavaScript
user interfaces, as well as its low cost, availability as open web server.
source software, and adaptability when switching between
customers and servers. Its primary objective is to enhance the
overall presentation of the application. The process of creating
applications on the web is not the same as it was even just a few
years ago. As a result of the plethora of choices available today,
many people have trouble determining which path to take.
This paper argues that the MERN stack is the best option for
developing an end-to-end web application. It examines the four
parts of the MERN stack (Mongo DB, Expresses, React.js, and
Node.js) and how well they operate together, highlighting their
beauty as a full stack in web architecture. This study
figurate further into the characteristics, analyses the [1] Front-End (React.JS)
differences between the MEAN and MERN stacks, and sheds React.JS: It is a JavaScript toolkit used to create
light on the crucial elements that play an important role during modular user interface (UI) elements. Following is
the selection of one out of these technologies that make up the the definition from React.JS official
MERN stack. documentation: A library for creating modular
user interfaces is called React. React essentially
makes it possible to create massive, complicated
Keywords— MERN Stack, WEB technology, React, Node, online applications that can alter their data without
Express, HTML, CSS, Website, Web development.
requiring further page refreshes. It serves as the
Model View Controller's(MVC). React provides a
I. INTRODUCTION straightforward, effective, and reliable application
MERN is a dictionary that is used to talk about a certain development environment by abstracting the
set of JavaScript-based technologies that are used to Document Object Model (DOM). React mostly
make web apps. Made so that the development process uses NodeJS for server-side rendering, whereas
goes as smoothly as possible. All of these things are React Native supports native mobile apps.
very important to the process of making a web Because React uses unidirectional data flow,
application. All of this gives the engineers the final which reduces boilerplate, it is significantly
structure in which they can work. simpler than traditional data binding.
• The letter "M" for "MongoDB", the No SQL
database system known as Mongo DB. [2] Back-End (Node.JS and Express.JS)
• The letter "E" for "Express.JS", which is Node.JS: JavaScript code can run server-side
generally used to create Node.js web systems. using the open source development platform
• The letter "R" for "React", which is typically NodeJS (Node). Node is helpful for creating real-
used to support a JavaScript system on the time apps like chat, news feeds, and web push
alerts that need a permanent connection from the

XXX-X-XXXX-XXXX-X/XX/$XX.00 ©20XX IEEE

 browser to the server. Node.js is designed to use a Companies of all sizes use MEAN Stack
single thread with one process at a time and run on Development to build robust web apps with a
a dedicated HTTP server. Applications built using solid front end and back end. Numerous
NodeJS execute asynchronously and on events. international organizations employing MEAN
The Node platform does not use the conventional Tech Stack to create their web applications are
model of receive, process, transmit, wait, and presented below.
receive for its code. Instead, Node sends small LinkedIn, eBay, Netflix, Uber, GoDaddy,
queries one after the other without stopping to NASA, Walmart, PayPal, Mozilla, Yahoo and
wait for answers, processing incoming requests in other.
a continual event stack.
Express.JS: A NodeJS web application [5] Business benefits of MERN Stack
framework called Express.JS providing a wide Fantastic User Experience: Any high-tech
variety of features for developing web and mobile product's success depends on how well it works
apps. A single page, multipage, or hybrid web for the customer. With its look and feel, the
application can be created with it. It's an extension Respond Native application is a fully responsive
to Node.JS that makes it easier to control servers one.
and redirect traffic. A web application framework Security and Evolvement: React Native is still
for Node.js is called Express.js. It offers a number growing and getting help from a huge community.
of capabilities that speed up and simplify the Engineers Accessibility: The designer's business
creation of online applications, which would area in React local is a strong one. You can hire
otherwise take longer when using solely Node.js. consultants through websites like Upwork, or you
The Node.js middleware module connect, which can talk to business experts.
employs the http module, is the foundation upon Less Market hour of Kickoff: When compared
which Express.js is built. Therefore, Express.js to local apps, React Native development helps the
will operate with any middleware that is based on mobile development industry grow. It gives
connect. businesses less time to get their products on the
market.
[3] Database (MongoDB) Set aside Cash: Making a smart choice to build a
MongoDB: A NoSQL database management single app that works on both iOS and Android is
system by MongoDB Inc. is known MongoDB. much smarter than making two separate apps for
NoSQL databases are an alternative to traditional each platform.
relational databases that rely on the SQL query Save Time: With React Native, you don't have to
language (Structured Query Language). A make two separate apps for two different stages.
relational database organizes its information into Also, don't show how much time it will take to fix
rows, columns, and tables, and it may keep track and update them.
of connections between different types of data.
Data in MongoDB is represented and interacted [6] Traditional Technologies in Web Development
with using documents having a JSON-like Web technologies are often classified by their
structure. Due to its JSON-like document areas of application. To put it another way, do
structure, MongoDB's most well-known feature is they focus on the back-end processing or front-end
its adaptable data store. Records are kept in presentation of web applications? If you want to
MongoDB as collections of documents, be a player in the field of internet development,
specifically BSON documents. The architecture of you should know the basic categories of internet
MongoDB is horizontal scale-out. technologies. As a result, the following is a
MongoDB, a highly adaptable data management possible classification of web development tools:
system, offers strong scaling, consistency, fault Browsers, HTML, CSS, Programming
tolerance, agility, and flexibility features to Languages, Frameworks, Web Servers,
support quick development and minimal Databases and etc.
downtime operations.

[4] Top brands using MERN Stack II. FULL STACK DEVELOPMENT: ALL TYPES OF STACK
One who works on both the front and back ends of a
website or application is known as a "full-stack
developer.". They can work on projects that need
databases, make websites for users, or even talk to
clients during the look phase of projects. It describes
the actions of both the client-side (front end) and
server-side (back end) components of an internet
application. The versatility of full stack developers
allows them to design full websites and online
applications.
 1) MEAN Stack: MongoDB, Express, AngularJS and MongoDB — NoSQL database
Node.js. Express.js — Node.js web framework
2) MERN Stack: MongoDB, Express, ReactJS and React.js —JavaScript framework
Node.js Node.js —JavaScript web server
3) Django Stack: Django, python and MySQL as MERN is a full stack application that utilizes the tried-and-
Database. true three-tier architectural pattern, with a React.js-based
4) Rails or Ruby on Rails: Uses Ruby, PHP and front-end display tier, an Express.js- and Node.js-based
MySQL. application tier, and a MySQL-based back-end database tier
5) LAMP Stack: Linux, Apache, MySQL and PHP. (MongoDB).
V. MERN VS MEAN
III. REVOLUTION OF WEB DEVELOPMENT
In traditional web development "Separation of
concerns" is a design idea used in web development 1 MEAN
that is linked to effective application architecture. MEAN is a collection of Open Source components
Essentially, it means that each "area of interest" (such that, when combined, offer a complete framework
as the business logic or the user interface) is created for creating dynamic web applications, from top to
independently of the others. This makes replacement bottom (i.e., code running in the browser). The
simple in the future. MEAN stack frequently uses JavaScript as a
The separation of HTML, CSS, and JavaScript was component. Because everything is done using
largely thought to be a good thing, but we unwittingly standard notions like JS objects and asynchronous
limited ourselves by doing so. calls, using JS puts a developer at ease.
Why is React so good? The stack is made up of:
Most websites contain interactive components that edit, Angular.JS
reorganize, or style browser content. Consider Google. Express.JS
The search box lets you enter terms to see search Node.JS
results. Without React, this meant using the DOM API MongoDB
to tell the browser what to display at each stage. React
surrounds this imperative syntax and provides an easy 2 MERN
way to construct interactions, so we no longer need to With the help of MERN, a scaffolding tool, it is
make DOM API calls. React uses "declarative syntax" simple to create universal apps utilising Mongo,
to describe what to do. Express, React, and NodeJS. It uses tried-and-true
When we write our applications in a declarative way, technologies to cut down on setup time and get you
the code is much easier to understand and much more up to speed.
predictable. It is very powerful to be able to open a The stack is made up of:
React component and know exactly how it will act. React.JS
Developers now have the freedom and confidence to Express.JS
make changes more easily. Before making a change to a Node.JS
small part of the code, they don't have to spend a lot of MongoDB
time trying to understand the whole codebase.
Most popular front-end JavaScript libraries and 3 Difference between MEAN and MERN
frameworks of the past few years have seen rapid Attribute MEAN MERN
adoption followed by rapid abandonment in favour of Churn Reduced High
the latest and greatest. The difficulty of keeping up with Tooling Low High
these kinds of changes has inspired the phrase Design JS in HTML JS only
"JavaScript weariness" to be used among the JS Fatigue Less More
development community. React was first released in DOM Regular Virtual
May of 2013, but its popularity has only increased since Complexity High Low
then. Packaging Weak Strong
Abstraction Weak Strong
IV. MERN STACK ARCHITECTURE Failure Run time Compile time
Binding Two-way Unidirectional
Template In html In JSX
Model Strong Medium
Rendering Client side Server side

4 Difference between Angular and React

Attribute AngularJS Angular 2 ReactJS
Author Google Google Facebook
Language JavaScript/ Typescript JSX
HTML
Size 143k 746k 151k
MVC Present Present View only
Performanc Good Better Best interface (UI) elements. Following is the definition
e from React.JS official documentation: A library for
Third party Low Low High creating modular user interfaces is called React. React
support essentially makes it possible to create massive,
complicated online applications that can alter their data
5 React or Angular without requiring further page refreshes.
NODE JS-
Node.js is a free, open-source system application and
server environment. NodeJS is an independent
development platform built on Chrome's JavaScript that
lets us quickly and easily build web applications.
EXPRESS JS-
Express.js is a framework that is made on top of
Node.js. It has many advanced features for building
websites and apps for mobile devices. Express.js works
VI. ANALYSIS REPORT with HTTP, which makes the API very reliable,
powerful, and easy to use. Express adds extra features
• The MERN stack is a great option for for developers that make their programming
businesses looking to create top-notch online environment better without slowing down NodeJS.
Web-apps. In fact, this stack enables the rapid MONGO DB-
development of online applications and MongoDB is an open source database that is also the
software in addition to leveraging high- most popular NoSQL database in use today. It is written
performance and customized technologies. in a programming language that is one of the most
• The MERN stack consisted of two distinct widely used ones today.
elements: the back-end and the front-end. In JAVASCRIPT-
addition, the entire database system is JavaScript is a scripting, object-oriented and cross-
segregated from them. platform programming language. Objects of host
• The REST API serves as "middleware" environment can be connected to JavaScript and
between the various components of the system, arranged in such a way so that it can be operated.
allowing them to easily be reused in other
applications.
• Users of web app will greatly benefit from the VIII. CONCLUSION
increased speed with which they may access You now have a solid understanding of the MERN
their data if its back end is quick to process stack's contents. But is it greater than other masses,
requests. This is especially true when taking such as LAMP or MEAN. Any of these storage options
into account the fact that the average amount will suffice for the vast majority of current web apps.
of time users are willing to wait for a web page But MERN holds a unique position. Ideal for web apps
to load is now less than 1 second and that a with many pre-built connections. You may experience
faster server will result in lower operational the same with other stacks, but you will find that
expenses. MERN makes things much simpler.
• As a front-end development tool, React.js is This study provides a comprehensive review of the
amazing, and it is used in the MERN stack. performance of the most recent technology, MERN
For the sake of completeness, we'll include a stack. It also investigates web development utilizing
few notable companies that have adopted various technologies and frameworks. It provides the
React.js due to its superior performance: architecture, components, and implementation of the
Brands like Facebook, Dropbox, Airbnb, MERN stack. It demonstrates the Node.js Frameworks
Atlassian, Tesla, etc. and tools, as well as the advantages of utilizing Node.
We looked at Express JS. In addition, we examine
VII. LITERATURE SURVEY
React and its components, React Virtual DOM and its
The goal of the research is to learn about the basic parts benefits. In addition, we examined Mongo DB. The
of MERN Stack technology, like MongoDB, report concludes with a discussion of the benefits of the
Express.JS, ReactJS, and the NodeJS platform. Using MERN stack, as well as a comparison of MERN vs.
the basic features of an MERN stack web application, MEAN, React vs. Angular and the leading companies
such as sign-up, sign-in, showing dashboards, and that use it.
showing store categories and products. Using MERN
Stack technology, we built a web app that lets people REFERENCES
shop at online stores and pay for things, book vehicles, [1] Hoque, S. (2020). Full-Stack React Projects: Learn
etc. Set up admin functions for the website, like MERN Stack Development by Building Modern
managing users and stores, keeping track of statistics, Web Apps Using MongoDB, Express, React, and
and making reports. Node.js, 2nd Edition. United Kingdom: Packt
React.JS- Publishing.
It is a JavaScript toolkit used to create modular user
[2] Wilson, E. (2018). MERN Quick Start Guide:
Build Web Applications with MongoDB,
Express.js, React, and Node. United Kingdom:
Packet Publishing.
[3] L., R. (2016). Express.js: Guide Book on Web
FrameworkforNode.jss. (n.p.): CreateSpace
Independent Publishing Platform.
[4] Naimul Islam Naim, ReactJS: An Open-Source
JavaScript library for front-end development,
Metropolia University of Applied Sciences,
accessed on 1 Jan 2022
[5] Wikipedia.org,’AngularJS’ [Online]. Available:
https://en.wikipedia.org/wiki/AngularJS .
[6] Cloudboost.io,’MEAN and MERN’ [Online].
Available: https://blog.cloudboost.io/mean-and-
mern-stacks-eb4cee991390. [Accessed: Feb- 2018]
[7] Angular.io,’AngularJS Documentation’ [Online].
Available: https://angular.io .
[8] MongoDB.com,’MongoDB Official’ [Online].
Available: https://www.mongodb.com/ .
W3schools.com,’AngularJS’ [Online]. Available:
https://www.w3schools.com/angular/angular_intro.
asp
[9] Velliangiri, S., Karthikeyan, P., Xavier, V. A., &
Baswaraj, D. (2021). Hybrid electro search with
genetic algorithm for task scheduling in cloud
computing. Ain Shams Engineering Journal, 12(1),
631-639.
[10] Velliangiri, S., & Karunya, P. K. (2020, January).
Blockchain Technology: Challenges and Security
issues in Consensus algorithm. In 2020
International Conference on Computer
Communication and Informatics (ICCCI) (pp. 1-8).