Illustration about MERN stack.

YESHWANTHINI S
Mar 21 · 7 min read

Let’s talk about Full-stack development- MERN. This blog covers theoretical concepts alone.

Credit : Google Images

Web Development — designing a website or application built for an awesome user experience. Then what is full-stack development?

Full Stack Development

Simply, working on both the front-end and back-end of the application. More specifically, stack means different technologies being used to build applications. That application concentrate on both front-end(client) and back-end(server) also take care of the database.

We all know HTML, CSS, JavaScript, jQuery, PHP, asp.net, python, java are used in web development to build websites/applications more interactive. But in full-stack development plays a major role.

  1. Angular
  2. React
  3. Vue
  4. Ember
  5. Meteor
  6. Node.js
  7. Polymer
  8. Aurelia
  9. Backbone.js
  10. Mithril

Above mentioned JS frameworks are used in the front-end part. Full-stack development mostly built using React, Angular, and Vue, and these are collectively (front-end and back-end) called MEN, MEN, MEN.

Credit: Google Images.

MERN Stack

This kind of stack is used for building single-page applications. It means a web application that interacts with the user dynamically by just rendering the current page with requested data.

Ex: if you log in to your Gmail account (by default, the inbox page rendered while opening the Gmail page) and then tapping on the Sent mail section, it simply overwrites the Inbox column instead of opening the new window.

The essential operation in a website/application is CRUD (Create, Read, Update, Delete). It facilitates the MVC (Model View Controller) architecture that makes the web development process work smoothly.

  • ongoDB — document database
  • xpress.js — Node.js web framework (back-end)
  • eact.js — a client-side JavaScript framework (front-end)
  • ode.js — the premier JavaScript web server (runtime environment)

Let’s split the full stack as front-end and back-end application.

Front-end

We know this part concentrate on user interaction. JS has a potential hand for event handling and loading all content in one web page due to DOM. Specifically, all content loaded by AJAX — the method of exchanging and updating the data in an application without refreshing the page.

Scenario: Consider the GitHub website, where I can see a landing page, my repositories, and its details. This part is considered as a component in react.js.

If I wish to make changes in an existing repository then I click on that repo and I will make changes(eg: adding files). This part is called Service in react.js.

If we navigate from the landing page to existing repo content then this is called navigation/ router in react.js.

— related to appearance or rendering of the content.

— CRUD operations are done based on the user’s request and responses are rendered based on the result.

— navigation among various components. Eg: clicking on Submit button to render the landing page. We need this notable concept because single-page automation will render the component within the component.

Simply in an application, different pages are navigated through . During the router, will be generated. If data to be fetched from server or crud operation are facilitated by .

We know React is a pure UI that helps to build attractive web pages but for server-side communication, we need a third-party library. Axios acts as an HTTP client library and contains all HTTP methods for communication.

Request from react for fetching data are requested as HTTP using Axios to the server-side. There are other libraries like Axios are there but this is used widely.

Back-end

This part contains .

This plays a major role in single page application. JS helps to build our application more interactive. JS code is first interpreted by JavaScript Engine and renders the appearance. Simply, we call it DOM-based execution.
If you think we have only one kind of JavaScript engine then it is mistaken. We have multiple browsers, so each browser has its engine.

Eg: Chrome — V8, Internet Explorer — Chakra, Edge — V8(chromium-based), Mozilla Firefox — SpiderMonkey.
Node.js is neither an application nor a framework. It’s just a runtime environment built on a standalone machine to interpret JavaScript code. It runs on top of the JavaScript Engine.

To make this engine a server-side component, we have included HTTP modules within it. Since many modules are built-in and others are external dependencies. If you need then you can download it from npm (node package manager). npm used for downloading packages of front-end and back-end .

Node.js is just a runtime environment then How does the client communicate with the server? How does the server act on the request and send responses? The answer is Express.js.

It is a server application framework that runs on node.js. It is a dedicated Node.js web application framework which provides a set of libraries for mobile and web application.

For eg: If a client need any data that is stored in a database, then the client will request that data by sending appropriate parameters. But these parameters are evaluated by Express.js before communicating to MongoDB.

More specifically, data that are requested from react will hit the express.js first, and to handle that request we create and in Express.js. Let see about these.

Router will take the request that came from react.js and it will tell which controller will take the request and evaluate it. Simply, the router will navigate the request from react to controllers in express.js.

Controller will evaluate and execute the request given by Router. Based on request controller function will differ. Basically, Controllers are callback functions. That is the signatures present in the function should match the signature of the callback of router.

Database

We know MongoDB is No-SQL, non-relational database which means it stores data in JSON-like documents. Due to document-based, it is suitable for storing and managing unstructured data. How it will communicate and manipulate data?

Let’s see. MongoDB uses a concept called ODM (Object Document Mapping). MongoDB is a schema-less document-based database. From the model created, it will generate the schema and then it communicates with the database. For converting a model to a schema, the mongoose is used. Mongoose is an Object Data Modeling (library).

Data stored in MongoDB after executing schema using Mongoose.

Let’s see a scenario of full stack using MERN.

A client fills the form in an application that is created using React (component) and clicked submit. Now, data that is filled in the form (eg: name, address, message, uploadedFile, hashtags) are requested to store in MongoDB. This requesting action is initiated using service in react and these requests with the method and appropriate data are transferred via Axios and hits the Express.js which runs on node.js.

Now, Router in Express.js will get the data and search the update function and transfer the data to that controller. This part (controller) is executed asynchronously.

Above snippet is Router. UpdatePost will be executed.
Above snippet is Controller.

During updating data, the controller will get the model and convert that model to the schema using mongoose and communicate with MongoDB to store the data.

Above snippet is model to schema translation code

Now, the result/response will be transferred via Axios to react.js.page will be rendered. This page UI design is present in react.js- component. After getting the success result, submit page changes to success page is handled in react.js- navigation./router. So, Router in React and Express are different.

MERN Stack. (This image is designed not copied.)

Above code snippet is snipped from my application.

  1. ES6 in JS
  2. React.js
  3. React.js — Hooks, Redux and some concepts related to client side.
  4. Axios or other third party library and its modules.
  5. Concepts like How react.js interact with axios and how axios interact with node.js
  6. Express.js and Node.js
  7. MongoDB — Mongoose and Schema.
  8. Concepts related to ODM
  9. MongoDB Atlas/shell/Compass.
  10. Study of file structure in MERN.

Above is the basic alone. So, keep learning.

📖Related Resources

  1. Node.js

Follow Techiepedia for more blogs.

Techiepedia

Where the Tech is written

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store