Either you are a loyal user or a super fan about the following applications and how it makes life easier and funniest one:
- Tinder, Tik Tok, Instagram, Whatsup...
Let me tell you, you can build a simple clone using the MERN Stack. Join me in this blog to know more about the MERN Stack and why it's the best choice to build sophisticated and fast web applications.
Overview
1- Introduction
2- What is Stack
3- How it works
4- What's MERN Stack stands for
5- How MERN Stack technologies work together
6- Conclusion
Introduction:
Even faster than the hands on a watch, web development has evolved in these previous years more than expected (and let me say that the COVID-19 pandemic will increase this evolvement), and obviously choose the right technologies and tools to build a web app became the main task in web development.
To help developers follow the requirements of web apps, nowadays there are many technologies and tools to achieve the ideal solution.
Stacks are the trendy way to build web apps, but before diving deep let's understand what's the stacks stand for?
What is Stack:
For short, a Stack refers to a set of technologies, software, and tools that are used in the development and deployment of sites, apps, and other digital products.
All developers know that the LAMP Stack (Linux, Apache, MySQL, PHP) is the classic one, used to build an environment to run PHP apps. But today we have a bunch of stacks that come in handy as various solutions to develop web apps and the MERN Stack is one of the most popular stacks.
How it works:
Like most JavaScript stacks, the MERN Stack designed to make the process of web apps development Faster and smoother. The MERN Stack helps to develop CRUD (create, read, update, and delete) web applications from scratch.
As mentioned above a Stack is a set of technologies and tools that help to build web apps, so the question is what technologies and tools the MERN Stack consist of?
What's MERN Stack stands for:
As web development interaction evolved, the concept of the Single Page Applications (SPA) became widely used.
Basically, the implementation of a SPA loads only a single web document and then updates the body content using a JavaScript API, instead of loads whole new pages from the server which increases the response of the query and the user's experience.
As web development interaction evolved, the concept of the Single Page Applications (SPA) became widely used. Basically, the implementation of a SPA loads only a single web document and then updates the body content using a JavaScript API, instead of loads whole new pages from the server which increases the response of the query and the user's experience. And here comes the MERN Stack in handy which satisfies the SPA concept, and it stands for:
- MongoDB for the "M".
- Express.js for the "E".
- React.js for the "R".
- Node.js for the "N".
Let's understand each technology in the next section. To guarantee a suitable explanation we won't take the words order of the "MERN" abbréviation.
1- MongoDB:
Mongo DB is a database system that works differently from SQL. We are not using tables but documents containing data in JSON format.
In the MERN Stack, we use MongoDB because the data is managed in JSON. Since JSON (JavaScript Object Notation) language originally comes from Javascript, you can imagine that it is extremely easy to directly convert data from Javascript to MongoDB and vice versa.
To do this, there are libraries like mongoose which translate your documents directly into javascript objects and lists that can be used directly in your programs. Data manipulation is therefore extremely simple and efficient.
2-Node.js:
Node.js is a programming language using JavaScript syntax. So you understand that this is a language that works in conjunction with Javascript. It is much easier to have both parties communicate.
So the master of Javascript renders the learning of Node.js much easier, and vice versa.
Finally, Node.js is an extremely fast programming language. Much more than any other web programming language. It uses asynchronous technology to gain power and speed.
Lots of large companies use Node.js. If you use online chat systems like Facebook, you can be sure it's Node.js behind the machine.
3-Express.js:
Express is a framework for easily and efficiently developing a website. It uses the middleware system to stack functions to create a complex website.
With express, we will not directly create the website on which the user will connect. We will create the REST API.
A REST API is a website that will allow you to retrieve data and modify it via HTTP requests learn more here. We will therefore execute these requests on the React part in order to retrieve data and save it.
4-React.js:
React.js is our final technology to understand in this blog. This technology will allow us to create a visible part of the website or what users expect to see when interacts with the web app.
React.js is a SPA framework and JavaScript library developed by Facebook and released in 2013 to build smooth User interfaces. It is a technology that allows the entire website to be rendered in Javascript. This method will make your web app much faster since it will never have to upload static content, which means that animations, transitions, and loads are much faster.
React.js works with a system of components. We create snippets of code that render HTML and can be used in different parts of our website, which dramatically reduces development time.
Large websites like Netflix or Facebook use React. It’s a perfect choice if you want to create an extremely fast website.
5- How MERN Stack technologies work together:
The illustration above shows the User interface components that are rendered by React.js which represents the front-end of the web application which resides in the browser. The front-end allows the user to interact with the back-end using the HTTP requests which will be served through Express.js running on Node.js
Assume that some of the users' interactions require data changing, in this case, a request sent to Node.js based Express varier, which recovers data from the MongoDB our database and renders data to the front-end of the web application where users can see it.
6- Conclusion:
I hope that you find my blog helpful, and it cleared the concept of these technologies in order to understand how it works in theory.