(Cover Image Source: Link)
While there is a plethora of full stack options and opinions out there, I am choosing to focus on one, in particular, The MERN Stack. I've chosen this particular stack due to it's accessibility and popularity. The MERN Stack is a full, open-source, tech stack. The acronym "MERN" is derived from the group of JavaScript-based frameworks, runtime environments, and databases that make up this specific stack. The stack is comprised of MongoDB (database solution), ExpressJS (NodeJS framework), React (Frontend browser side JS library), and NodeJS (Server-side JS runtime). MERN was created to help developers obtain a smooth end-to-end development process. Let's take a closer look at the 4 elements that make up The MERN Stack, and try to understand why it's quickly becoming the more popular stack option among developers.
Backend | Database
In order to stay loyal to the order of our "MERN" acronym, let us first take a look at the "M": MongoDB. MongoDB is a NoSQL database engine that allows us to store data in the form of key/value, graph, wide-column stores, or document database models (amongst others). MongoDB stores this data natively in the form of BSON data (a binary version of JSON). Unlike SQL it does not enforce a schema typical to most relational databases. This makes it a flexible and powerful database that can easily be integrated into an ExpressJS/NodeJS environment. Speaking of which, let's take a closer look at the two other backend components of MERN, ExpressJS and NodeJS.
Backend | Server
ExpressJS, NodeJS, and MongoDB make up the backend components of MERN, but if we break down the backend even further, we have ExpressJS and NodeJS handling the server-side of the backend, while MongoDb is left handling the database. NodeJS is an asynchronous, event driven, JavaScript runtime often used to create scalable server-side applications. ExpressJS is a minimal and flexible framework for NodeJS. It assists in URL routing and handling HTTP requests and responses. We need NodeJS in order to use ExpressJS, and in turn, ExpressJS is what we use to communicate the backend to the frontend. Which leads us to React, the frontend of The MERN Stack.
Frontend | Web
React is the frontend, client-side framework of MERN which allows developers to build interactive user interfaces. With React we can write JavaScript code that will be executed in the browser, and since it's executed there, it's responsible for controlling what the user sees on their respective devices. React assists in rendering a user interface with dynamic data, and updates the interface accordingly when the data changes, or when certain events occur. Essentially, it takes in user input and provides feedback to the user via visualization. There is a treasure trove of reasons to choose React over other respective frontend libraries, but a few stand-out reasons are the following:
- React is maintained by talented developers at Facebook.
- React is the most used / most popular frontend framework, which means there is a TON of free and easily attainable resources out there to assist in learning and applying React to your projects.
- React is incredibly flexible: "React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves a huge amount of time and cost to businesses." - Ubaid Pisuwala of Peerbits.com
So in conclusion, how exactly do these MERN technologies work together to create and render a finished application in the real world? Essentially, when a user goes to a particular website or web address, we are going to send the user some files, content, or HTML to appear on the screen. This will be handled by the frontend, or React "side" of our application. React doesn't particularly care, or know what to show to the user. It needs data to show the correct content. So we store that data via MongoDB. In order for React to communicate and pull data from the database we need a middle man, and that is where ExpressJS/NodeJS come in. ExpressJS will contain logic to handle incoming requests from React, pull data from MongoDB based on those requests, and then package and send that data back to React where it is then rendered and the content is displayed on the screen as a finished user interface.
There you have it. The MERN Stack is a three tier, full-stack solution to all of your application building needs. Understanding how this three tier system flows and works together is understanding how to build better and more efficient applications.
Resources:
Oldest comments (0)