The Emergence of ‘Stacks’
The invention of the Internet created history. The internet led to the development of more and more technologies and devices, which created a global market where anyone could sell their services and products. Businesses started going online, which led to the rise of the web development industry. Initially web development was only bound to simple web pages, but due to constant evolution on the Internet, there was an advent of complex web applications that can perform multiple functions.
Web application is stacked with multiple layers for technologies: front-end (user-facing technology), back-end (server-side technology) and database (data storage technology). These multiple layers are collectively referred as ‘stack’. Stack was first put forward during the launch of the LAMP stack, which was the first open-source full-stack development bundle constituting the capabilities of Linux OS, Apache Server, MySQL DB, and PHP programming language. Succeeding the LAMP stack, came into existence the MEAN and MERN stacks.
MERN architecture
MERN stack refers to a collection of JavaScript-based technologies used to develop web applications. MERN is an acronym for MongoDB, Express JS, React JS and Node JS. MERN architecture helps to construct application with a 3-tier architecture (frontend, backend, database) using JavaScript and JSON.
MongoDB
The database tier of MERN is MongoDB. MongoDB is a document-oriented database solution that stores data in the form of documents using JSON (JavaScript Object Notation) based query language. MongoDB is a NoSQL database and does not store data using tabular relations used in relational databases.
MongoDB uses Ad-hoc queries that are short-lived & depend upon variables. Every time a query is executed values is different and dependent on the value of the variable in the question. MongoDB has a range of indices and features with language-specific sort orders that support complex access patterns to datasets. For disaster management purposes or in cases of failures, MongoDB databases multiple times. In MongoDB, large datasets are stored in an equal distribution of clusters known as shards; this process is called sharding. Sharding helps to bring out horizontal scalability as each shard behaves as an individual database. MongoDB can handle multiple simultaneous read and write requests with its concurrency control and locking protocols.
Node JS & Express JS
Node JS is an asynchronous event-driven JavaScript runtime designed to build scalable network applications that forms application tier of MERN. It is an open-source server runtime environment built on Chrome’s JavaScript runtime that executes JavaScript code outside the web browser. It uses an event-driven, non-blocking IO model making it lightweight and efficient. Node JS also consists of various JavaScript modules that make the development of web applications using Node JS easier.
Express JS is a Node JS web application framework that uses JavaScript, which makes it easier for developers to build applications and APIs. Using Express JS one can build a single page, multi-page or hybrid web application. Express JS helps to organize applications into Model-View-Controller (MVC) Architecture. Express JS provides some of the features of Node JS as functions, which saves a lot of time for developers. Express JS has a debugging mechanism which makes debugging simpler.
Node JS and Express JS collectively form a backend tier of 3-tier MERN architecture. Express JS has powerful tools and models for URL routing (matching an incoming URL with a server function) and handling HTTP requests and responses. By making XML HTTP Requests (XHRs) or GETs or POSTs from your React JS, you can connect to Express JS functions that power your application.
React JS
React is an open-source frontend library for User Interface development used for SPA (Single Page Applications) and Mobile Applications. React JS has component-based architecture which encourages creation of reusable UI components that represent data that changes over time. Here each component represents a view or a part of a view on a webpage.
Document Object Model (DOM) is an interface that treats a document as a tree structure. DOM manipulation and updating takes a lot of time. In React JS instead of DOM, Virtual DOM is used. Virtual DOM is a lightweight copy of a DOM, much faster than DOM. React JS supports one-way data binding, data can only flow from parent to child components using read-only props.
Why is MERN popular?
In recent times, MERN has been popular full stack framework for multiple reasons:
MERN covers from frontend to backend server-side development and every line of code is written in JavaScript which makes it easier for developers as they only need to be proficient in JavaScript and JSON.
By supporting Model-View-Controller (MVC) Architecture, MERN makes frontend to backend server-side development process flow smooth.
Few proponents of MERN attribute its success to use of Virtual DOM. Virtual DOM is a lightweight copy of a DOM that can be manipulated and updated faster compared to the actual DOM which makes applications work faster.
MERN supports one-way data binding which means one can change UI only after changing the model state. This one-way data binding proves to be efficient for managing larger projects.
Pre-built extensive suite of testing tools available in MERN stack makes testing easy.
Top brands using MERN
UberEats: Food delivery app 'UberEats' made use of MERN stack to revamp their restaurant dashboard with intent to make it more appealing and engaging.
Instagram: Instagram uses MERN stack to help them achieve faster start-up time and more appealing user experience .
Comments