Understanding the M.E.R.N Stack
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.
2- What is Stack
3- How it works
4- What's MERN Stack stands for
5- How MERN Stack technologies work together
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:
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.
- 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.
Mongo DB is a database system that works differently from SQL. We are not using tables but documents containing data in JSON format.
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.
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.
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 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.
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.
Resource: Pro MERN Stack -- The book.
👨🚀 Making the best platform for all developers -- https://thesmartcoder.dev 💻 Programming is the best job in the world! 🤟 👨💻 Coder �
Fantastic post, thank you! Here is some more, in-depth information about the MERN Stack. For anyone that wants to dive deeper into the topic :)