Authors: Harshit Sharma, Vaibhav Garg, Sakshi , Pankhuri Kalra, Dr. Manjot Kaur Bhatia
DOI Link: https://doi.org/10.22214/ijraset.2022.47927
Certificate: View Certificate
Today, the demand for full-stack developers is growing faster than ever. Indeed, Indeed's research shows that the highest demand is also associated with the impressive average salary of $ 110,770 in the United States. The term full-stack developer refers to someone who can technically engage in both front-end and back-end development of dynamic websites or web-based applications.
In the past, web development was primarily based on the LAMP stack (Linux, Apache, MySQL, PHP, or Perl) and Java (Java EE,
The work is mainly divided into theoretical parts and the focus is on giving depth. Understanding each component in the stack and related technologies.
As a result, you will know if you want to use the MERN stack.
A. Who’s this for?
Those who are new to the wonders of web technology, who are considering adopting the MREN stack (maybe a complete beginner!), Or who will take valuable time.
B. What to Expect from this Research Paper?
A basic understanding and introduction of each component of the MERN stack and related technologies. Don't expect to be a full stack developer just by reading this article. But I am confident that this investment will bring us one step closer.
C. Let’s start
A stack is a combination of technologies used to build web applications. All web applications are built using multiple technologies (frameworks, libraries, databases, etc.).
Another useful aspect of using the MERN stack is the development of single page applications (SPAs).
MongoDB is a document-oriented NoSQL database. It has a flexible schema and query language based on JSON (Java Script Object Notation).
NoSQL stands for "non-relational" SQL. This is essentially not a traditional database with tables and columns called a relational database. NoSQL has two attributes that set it apart from traditional attributes.
The first is the ability to scale out by distributing the load across multiple servers. They do this by sacrificing an important aspect of traditional databases, which is strong consistency. But in reality, few applications require strong consistency, This aspect of NoSQL databases rarely works.
Second, you can visualize the data and save it in the form of an array of objects. The individual elements of the array are called documents. The two elements can have different properties (so they are inconsistent or have no schema). Therefore, a storage unit is a document, and multiple documents are stored together as a collection (similar to a SQL table). The document can be any type of deeply nested object.
Each document in the collection has a unique identifier that can be used for access. This is usually a property called `_id`. Identifiers are automatically indexed. This is a 12-byte value and has the following distribution: The first 4 bytes-timestamp, the next 3 bytes-machine identifier, the next 2 bytes-process ID, the remaining 3 bytes are counters. A great feature here is that you can extract the timestamp to know exactly when the document was created. MongoDB also provides a way to create an ID whenever you want to extend its usage. The disadvantage is that the data is stored denormalized. This means that data can be duplicated and use more storage space. For large applications, we recommend using a strict or semi-strict scheme. Using an object document mapping library like Mongoose (which I'll come across when you actually start programming, so I won't cover it here) will solve the problem.
The Express framework allows you to define a route, a specification of what to do when an HTTP request that matches a particular pattern arrives. Matching specifications are based on regular expressions (regex) and, like most other web application frameworks, are extremely flexible. The part of what to do is just the function passed to the parsed HTTP request.
Express parses request URLs, headers and parameters. On the respondent side, as you might expect, it has all the functionality your web application needs. This includes setting response codes, setting cookies, sending custom headers, and more. Express middleware (you'll come across middleware later in this article), you can also write custom code that you can insert into any request / response processing path. It provides common functions such as logging and authentication. All of these features are provided by various plugins.
Express does not have a built-in template engine, but it does support any template engine, such as pugs and whiskers. However, you don't have to use a server-side template engine for your SPA. It's all
Dynamic content generation is performed on the client and the web server serves only static files and data via API calls. Especially in the MERN stack, page generation is handled by React itself on the server side.
Declarative: Reaction views are declarative.
What this really means is that as a programmer, you don't have to worry about how changes in view state or data affect it. How does this work?
The React component declares what the view will look like given the data. You do nothing! The React library just determines what the new view will look like and applies the changes between the old and new views. This makes the view consistent, predictable, and easy to maintain and understand.
Isn't it too late? Isn't the entire screen updated or re-rendered every time the data changes? Well, React handles it with its virtual DOM technology. These declare what the view looks like in terms of virtual representation, the data structure in memory, rather than in terms of HTML or DOM. React can calculate virtual DOM differences very efficiently and apply those changes only to the real DOM. This fine-tunes the algorithm used to calculate the difference in the virtual DOM, adding very little overhead compared to a manual update that only makes the necessary DOM changes.
Component-based: The basic component of React is a component that maintains its own state and renders itself.
With React, you just create a component. Then assemble the component to create another component that represents the complete view or page. The component encapsulates the state of the data and the view, or how the data is rendered. This makes it easier to write and discuss the entire application by splitting the application into components and focusing on one thing at a time.
Components communicate with each other by passing state information to the child component in the form of read-only properties and to the parent component via a callback.
No Templates: Many web application frameworks rely on templates.
The task of repeatedly creating HTML or DOM elements. Developers need to learn and practice template languages with these frameworks. Not with react.
Isomorphic: React can also run on the server. This means the same shape. You can run the same code on both the server and the browser.
Node.js comes with a set of binary-compiled core modules. These modules provide access to operating system elements such as file systems, networks, and I / O. It also provides some utility features needed by most programs.
In addition to its own files and core modules, there are also many third-party open source libraries that are easy to install. It takes us to npm.
Node.js and npm: npm is the default package manager for Node.js. You can also use npm to install third-party libraries (packages) and manage the dependencies between them. The npm registry is a public repository of all modules published by people for sharing purposes.
HTML that allows the browser to access the code. To this end, we built tools such as browserify and webpack. These tools allow you to combine your own modules and third-party libraries into bundles that can be integrated into HTML.
The MERN stack is ideal for web applications that have a large amount of interactive functionality built into the front end. You may be able to do the same with other stacks, but you'll find it most convenient to do with MERN. So if you have a stack to choose from and can afford to spend some time exploring, you may find that MERN is the right choice.
B. JSON Everywhere
C. Node.js Performance
Due to its event-driven architecture and non-blocking I/O, the claim is that Node.js is very rapid and a resilient web server. Although it takes a little getting used to, but when your application starts scaling and receiving a lot of traffic, this will play an important role in cutting costs and save time spent in trouble-shooting server CPU and I/O problems.
D. Advantages of MERN stack
MERN is the most popular stack after MEAN. Here are some of the advantages of using MERN stack:
E. Top Brands using MERN Stack
React Native, one of MERN Stack's most popular technologies, helped vacation rental company Airbnb create amazing digital experiences and add functionality to their apps. Microsoft, the world's IT leader, chose React for Skype despite using the cross-development tool Xamarin. And how can I forget Facebook? They work with this framework to get event dashboards up and running quickly.
Top Global brands using MERN framework:
 David, A.Arnott. Everyone wants full stack developers — and these other 24 in-demand jobs [online]. National News DeskEditor.Mar 22, 2017.Retrieved from https://www.bizjournals.com/bizjournals/news/2017/03/22/everyone-wants-full-stack-developers-and-these.html. Accessed on 17 April 2021.  w3schools.com. What is npm? Retrieved from https://www.w3schools.com/whatis/ whatis_npm.asp. Accessed on 17 April 2021.  Wikipedia. Express.js. Retrieved from https://en.wikipedia.org/wiki/Expres s.js#:~:text=js%2C%20or%2 0simply%20Express%2C%20is,soft ware%20under%20the%20 MIT%20License.&text=js.,many%2 0features%20available%20a s%20plugins. Accessed on 17 April 2021.  MongoDB Manual. Introduction to MongoDB. Retrieved from https://docs.mongodb.com/manual/in troduction/. Accessed on 13 may, 2021..  React. Getting Started. Retrieved from https://reactjs.org/docs/getting-started.html. Accessed on 13 May 2021.  Node.js information from https://nodejs.org/en/about/. Accessed on 13 may, 2021.  Getting started on express.js from https://expressjs.com/en/starter/insta lling.html. Accessed on 14 may 2021.  MERN stack from https://medium.com/nybles/switchin g-to-the-modern-day-mern-stack-574bb478fc64. Accessed on 14 may 2021.  Why MERN stack from https://medium.com/nybles/switchin g-to-the-modern-day-mern-stack-574bb478fc64. Accessed on 14 may 2021.  Pros and cons of MERN stack from https://www.classicinformatics.com/ blog/why-is-mern-stack-our-preferred-platform-for-startups-apps. Accessed on May 14, 2021.  MERN from https://wikitia.com/index.php?title=MERN_(solution_stack)&mobileacti on=toggle_view_desktop. Acessed on 15 may 2021.  Npm Blog (Archive). Retrieved from https://blog.npmjs.org/post/615388323067854848/so-long-and-thanks-for-all-the packages.html#:~:text=In%20June%202019%2C%20the%20npm,number%20has%20crossed%201.3%20million. Accessed on17 April 2021.
Copyright © 2022 Harshit Sharma, Vaibhav Garg, Sakshi , Pankhuri Kalra, Dr. Manjot Kaur Bhatia. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.
Paper Id : IJRASET47927
Publish Date : 2022-12-06
ISSN : 2321-9653
Publisher Name : IJRASET
DOI Link : Click Here