Illustration about MERN stack.
Let’s talk about Full-stack development- MERN. This blog covers theoretical concepts alone.
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(API).
We all know HTML, CSS, JavaScript, jQuery, PHP, asp.net, python, java are used in web development to build web pages/applications more interactive. But in full-stack development JavaScript(MERN, MEAN) plays a major role.
Best JS framework in 2021
- Angular
- React
- Vue
- Ember
- Meteor
- Next.js
- Polymer
- Aurelia
- Backbone.js
- 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 MERN, MEAN, MEVN.
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 web page/application is CRUD (Create, Read, Update, Delete). It facilitates the MVC (Model-View-Controller) architecture that makes the web development process work smoothly.
- MongoDB — document database
- Express.js — Node.js web framework (back-end)
- React.js — a client-side JavaScript framework (front-end)
- Node.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.
REACT — Pure UI
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.
Component — related to appearance or rendering of the content.
Services — CRUD operations are done based on the user’s request and responses are rendered based on the result.
Navigation/router — 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 the router. During the router, components will be generated. If data to be fetched from server or crud operation are facilitated by services.
Axios — Third party library.
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 Node.js, Express.js.
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 .
>>Apart from this, if you wish to learn what exactly a nodejs then simply tap here
Express.js
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 Router and Controller in Express.js. Let see about these.
Router
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
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.
Note: Router in React.js and Router in Express.js are different by concepts.
Database
MongoDB
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).
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.
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.
Now, the result/response will be transferred via Axios to react.js. Your data are successfully inserted 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.
Above code snippet is snipped from my application.
To Learn MERN
- ES6 in JS
- React.js
- React.js — Hooks, Redux and some concepts related to client side.
- Axios or other third party library and its modules.
- Concepts like How react.js interact with axios and how axios interact with node.js
- Express.js and Node.js
- MongoDB — Mongoose and Schema.
- Concepts related to ODM
- MongoDB Atlas/shell/Compass.
- Study of file structure in MERN.
Above is the basic alone. So, keep learning.
