Why MERN Stack?

Abstract

In the past, web development was primarily based on the LAMP stack (Linux, Apache, MySQL, PHP, or Perl) and Java-based applications (Java EE, Spring). However, these stacks are made up of different programming languages and can be difficult for a single developer to understand. Advances in web technology over the last few years have allowed developers to participate in both the front-end and back-end processes of web applications. The main goal of this thesis was to explore the basic components of the very popular MREN stack. The MERN stack, which stands for MongoDB, Express.js, React.js, and Node.js, allows developers to easily integrate web development in a single programming language called JavaScript.

Introduction

I. INTRODUCTION

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,

Spring), which consisted of various programming languages. JavaScript has features that work on both the client and server sides, and the advent of the MREN stack makes web development easier. The stack contains four major technologies: MongoDB, Express.js, React.js and Node.js. The main goal of this thesis was to explore the nature of each component in the stack and create a social platform that could connect people.

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.).

The MERN stack is a JavaScript stack designed to facilitate the development process. MERN contains 4 completely open sources Components: MongoDB, Express, React, And Node.js. Launching the stack also addresses important but iterative development tasks that redirect breakthrough application building and innovation, as well as testing efforts.

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 language of MongoDB is JavaScript. For relational databases, there was a query language called SQL. For MongoDB, the query language is based on json. The query language is not similar to English (you don't have to say SELECT or WHERE), so it's much easier to write programmatically. Data is also exchanged in json format. In fact, the data is stored natively in a variation of json called bson (B stands for binary) for efficient use of disk space.

When you get a document from a collection, it is returned as a JSON object. It also comes with a shell built on top of a JavaScript runtime such as Node.js. This means that you have a powerful and familiar scripting language (JavaScript) for interacting with the database from the command line.

B.  Express

Express is just a web framework for Node.js. Node.js is just a runtime environment where you can execute Javascript. Manually creating a full-fledged web server directly in Node.js isn't that easy or necessary. Express is this framework that simplifies writing server code. .

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.

C.  React

React locks the MREN stack. In a sense, this is the defining component of the MREN stack. This is an open source Javascript library managed by Facebook that you can use to create HTML rendered views. Consider a SPA where only the changed parts are re-rendered, not the entire page. React is solely responsible for such behavior. The best example of this is the web WhatsApp. We recommend that you install React Developer Tools from the Chrome Web Store. This is to provide useful functionality during the development process. Another feature is that when you open a website in React, the extension logo will light up. Look at the top right!

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.

React uses a full-featured programming language to create repetitive or conditional DOM elements. This language is nothing but JavaScript.

There is an intermediate language that represents the virtual DOM. It's JSX, which is very similar to HTML. JSX is an abbreviation for Java-Script XML, which is a syntax extension and does not exist in the core language JavaScript.

You don't have to use JSX. If you want, you can write plain JavaScript to create a virtual DOM. However, we recommend using JSX for simplicity.

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.

This allows you to create pages on your server if you want, for example for SEO purposes. To achieve this, you can share the same code on the server. The server needs to be able to execute JavaScript. Here, I will introduce Node.js.

D. Node.JS

Node.js  is   a   Javascript  runtime  that  uses Chrome's V8 engine. This is an open source Javascript runtime written in C ++ that takes JS code and compiles it into machine code.

Node.js module: You can load multiple JavaScript files in your browser, but you need an HTML page for that. Cannot be referenced

Another JavaScript file from the JavaScript file. But for Node.js, there is no HTML page to start everything. If there is no surrounding HTML page, Node.js uses its own

CommonJS-based module system to assemble multiple JavaScript files.

Modules are like libraries. You can use the require keyword (not in your browser's JavaScript) to include the functionality of another JavaScript file (if it's written to follow the module's specs). Therefore, you can split your code into files or modules, organize them, and use require to load them into each other.

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.

Npm started out as a repository of Node.js modules, but quickly transformed into a package manager to provide other JavaScript-based modules, especially those that can be used in the browser. jQuery is the most popular client-side JavaScript library to date and is available as an npm module. React is primarily client-side code and can be inserted directly into HTML as a script file, but we recommend that you install React via npm instead. However, once installed as a package, you need something that puts together all the code that might be included in.

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.

Interactivity

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.

A. Javascript Everywhere

The best thing about MREN, which I like, is that it uses a single language throughout. I'm using JavaScript for both client-side and server-side code. Even if you have a database script (in MongoDB), write it in JavaScript. JavaScript is the only language you need to know. This applies to all other stacks based on the backend MongoDB and Node.js, especially the MEAN stack. But what makes the MERN stack stand out is that you don't even need a template language to generate the page.

B. JSON Everywhere

When using the MERN stack, the object representation is JSON (JavaScript Object Notation) in databases, application servers, clients, and even anywhere on the network. This often alleviates many conversion issues. There is no object-relational mapping (ORM), forced fitting of object model rows and columns, special serialization and deserialization code. Object Document Mapper (ODM) like Mongoose helps Applying a schema makes the job even easier, but the bottom line is to save a lot of data conversion code.

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:

1. It    includes    the    entire    web development  cycle  from  front-end development to back end development
2. It facilitates the MVC (Model View Controller) architecture that make the web development process work smoothly
3. MERN is considered a cost-effective stack as with open-source support, accessible set-up and reduced learning time, it may have the lowest development cost
4. With the JavaScript stack, developers only need to be proficient in JavaScript and JSON
5. The four robust technologies are feasible enough to develop a full-fledged software
6. The framework comes with a pre-built extensive suite of testing tools
7. MERN framework helps to build flexible and scalable websites
8. The four technologies provide smooth integration with cloud platforms.

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:

1. UberEats: UberEats uses the React framework to revamp restaurant dashboards to make them more attractive and engaging. Developers have been working hard to improve driver communication with grocery stores. Allow this by implementing a demo app.
2. Instagram: Instagram follows the same path as Facebook and enjoys all the benefits of React features. Developers have implemented React Native push notifications and embedded new options for saving posts that users find exciting. This framework also helps you easily perform post-promotion functions. React Native reduces startup time and improves UX responsiveness.
3. Walmart: Experts here have run React Native mobile apps to improve the performance of hybrid apps. This means that 95% of the mobile app codebase is shared between the iOS and Android platforms.

???????

Conclusion

This white paper provides a comprehensive overview of the history of JavaScript, the core of the MEAN stack, and the background theories, concepts, and key techniques of each technology in the stack itself. The authors have shown the benefits of these technologies and how they are powerfully combined with applications with connected backends and frontends supported by the NoSQL database engine. That\'s all. This isn\'t complete information, but I hope it\'s enough to get you started, understand how all these technologies are connected, and make you want to learn them. As these are so popular technologies, there are plenty of resources available to guide the learning process. It\'s definitely a long way to go. I hope this helps.

References

[1] 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. [2] w3schools.com. What is npm? Retrieved from https://www.w3schools.com/whatis/ whatis_npm.asp. Accessed on 17 April 2021. [3] 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. [4] MongoDB Manual. Introduction to MongoDB. Retrieved from https://docs.mongodb.com/manual/in troduction/. Accessed on 13 may, 2021.. [5] React. Getting Started. Retrieved from https://reactjs.org/docs/getting-started.html. Accessed on 13 May 2021. [6] Node.js information from https://nodejs.org/en/about/. Accessed on 13 may, 2021. [7] Getting started on express.js from https://expressjs.com/en/starter/insta lling.html. Accessed on 14 may 2021. [8] MERN stack from https://medium.com/nybles/switchin g-to-the-modern-day-mern-stack-574bb478fc64. Accessed on 14 may 2021. [9] Why MERN stack from https://medium.com/nybles/switchin g-to-the-modern-day-mern-stack-574bb478fc64. Accessed on 14 may 2021. [10] 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. [11] MERN from https://wikitia.com/index.php?title=MERN_(solution_stack)&mobileacti on=toggle_view_desktop. Acessed on 15 may 2021. [12] 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

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.