M.E.R.N stack Web Development: A complete roadmap
Gone are the days of using old school methods like basic HTML, CSS and JavaScript to create websites. In this fast-paced era of changing technologies, the web development world has moved to an entirely new level of programming and development. Things like frameworks, libraries, and newer languages dominate the web development sphere now. Being a part of the tech world, we all are perpetual learners, and must update our skill-set with the latest advancements in the digital world.
Programming languages, platforms and libraries like React, Node, MongoDB etc. are today’s hot keys, and are in a huge demand by some of the top tech companies like Discord, Facebook, Instagram, Tesla and Netflix.
In case you are not familiar with MERN stack or are willing to start, this post is for you!
Alright, no more beating around the bush.
What exactly is MERN?
M.E.R.N stack is a combination of 4 technologies built on JavaScript that helps you build a Full Stack Web application!
Let’s go through them one by one.
M (MongoDB):
It is a cross platform document oriented database program. Unlike MySQL, MongoDB is a no-SQL database that stores JSON like objects along with Schema. It is different from other database programs as here, the data is not stored in the form of tables.
This is how the data stored in MongoDB looks like:
MongoDB object
Some of the features that make MongoDB an excellent choice for database management are listed below:
Indexing
Ad-hoc query.
File Storage.
Aggregation Framework.
Replication
In order to use MongoDB in our MERN application, we generally use a npm package called mongoose.
E (Express):
Express is a flexible and clean Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.
In MERN stack applications, Express’s role is to manage our backend API server, the one from which we will be fetching data from a database via our React frontend.
Express is the most popular web application framework which uses NodeJS.
The code snippet above is how the express app looks like! Don’t mind if this seems intimidating to look at.
Code written in Express is very clean and easy to understand. The following things are important to learn and you’re good to go with express:
Making your basic boilerplate for setting server and making your app run on required port.
Create basic routes that help you carry out CRUD operations.
Understanding the importance of express.json to read the data that by default comes in JSON format from the frontend part.
Setting up mongoose with Express that helps you get easier access to MongoDB.
R (React)
React, and other frameworks/libraries like Angular or Vue have become household names in the world of front-end web development. React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. It is one of the most used and powerful libraries in today’s world!
A basic component of React would look something like this:
The prime reason why react is used is for creating Single Page Applications(SPA). SPA means rendering the entire website on one page rather than different pages of the websites like we normally do. For the routing part an npm package called react-router-dom is used.
Some important topics to learn in order to start with ReactJS are:
Learn to create states and props.
Learn to write both class based and functional based components.
Understand basic React Hooks like useState() and useEffect().
Learn how to initialize and manage states using useState().
Understand Conditional Rendering (very important.
Learn how to fetch API (using fetch or axios) and use it with the help of useEffect() hook.
Making form inputs controlled and handling form submits
Once you’re done with this, you can learn advanced methods like Context APIs, Redux and styled components.
N (Node)
Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
This is something very familiar to MEAN stack development and the only difference is MEAN stack uses Angular as the frontend framework, whereas MERN stack uses React for the frontend development.
Basic points to get started with Node-
Learn how to initialize npm package (basics).
Learn how to use npm or yarn (depends on your choice).
Understand package.json file.
Learn how to import and export modules
But why MERN stack?
There are certain benefits and pros of MERN stack that makes it more popular than any other development stacks.
Because all the components of MERN stack as mentioned above are all built with the help of JavaScript, be it React, Node or Express, this makes the integration of frontend (client side development) and the backend (server side development) easy.
It comes with prebuilt testing tools.
It facilitates the Model-View-Controller (MVC) model that ensures the smooth working of the website.
MERN is at the same time considered very cheap in terms of cost, as it has a lot of stuff when it comes to Open Source, and also due to its less learning time period.
MERN has a great and huge community around the globe! All thanks to JavaScript. You can have excess to infinite number of pre coded stuffs and answers to almost all the common queries faced by developers!
The next question : How to integrate all this?
To understand the integration, let’s take a simple example of a banking system that helps you transfer some amount from one customer to another.
Among the things that are required is an interface that includes a homepage, a view customer page where you can see the customers, and a transfer page where you enter the amount and select the receiver. This comprises the front-end of this system, i.e what the user of the bank would see.
In order to access the customers data like amount, ID, name etc, you need a server and API that helps you manipulate the data depending on what the user is willing to do. For this we use Node and Express for this.
Finally a database is required to store all the information that has to be fetched.
So in React you create the basic interface using components, initialize various states like users, current user, amount etc. Using ContextAPI you access the value of state whereever required in the page.
All set! But how to get the initial values of state! They can’t be static right? This is where Express is used. In Express app you create various API routes that will access the database and pull the required data like users information and store it as the value of state “user”. This fetching can be done using axios.
In database (MongoDB here) we create a cluster and put the connection key into the express app, so that they are connected. Now after connection we make a schema in express that will define how our collection will look like. For example our user scheme looks like-
The data is fetched from DB and changed in the React app whenever certain action is performed using useEffect(). The data is then displayed on the front end to the user.
This is the simple example of how MERN stack involves the usage of all 4 technologies to create a single web app.
So if you read all this blabbering with a little attention, you have now basically understood the components that make up the stack. Your job now is to try to learn in depth about how to play with it. Learn how to deploy the final MERN app, because of-course it is pointless to create a website and keep it to yourself
CONCLUSION
Nothing is easy and free in this dynamic age. Efforts are essential in order to keep up with new technologies arising every other day. The key is not to be afraid of picking up a new technology, thinking that you would fail. Once you’re in the tech world, you enroll yourself as a constant learner. Learn new things and make mistakes. Fall down, and then get back up again. Perhaps one day you would be proud of yourself for having taken this decision at that time. Good Luck!
Thank you