The Modern Web
Today, we can create websites that only load the code files from the server once and never reload them again, even when the user navigates to different pages. What is the mechanism behind this?
If you’ve ever desired to work as a full-stack web developer, you’ve probably heard of the MERN Stack. But don’t worry if you haven’t.
What exactly is it?
What does MERN stand for?
How can you get started as a MERN stack developer?
I’m here to help you understand it and expose you to one of the most popular web development tech stacks, as well as provide you with a detailed roadmap and tools. Do you have any expectations? Let’s get started with the basics.
What is the MERN Stack
Let’s delve deeper into the MERN stack technologies that we have a fundamental knowledge of. Let’s start with MongoDB.
I’ll start with SQL vs. NoSQL. Tables are used to hold data in SQL databases. Tables are simply a tabular collection of data organised by rows and columns. It’s time to put your ideas on paper!
The following is an example of MongoDB data:
Here’s how data saved in MySQL, a SQL-based database, appears:
MongoDB excels in so many areas that it’s a fantastic pick for your forthcoming projects. Here are a few examples:
- Indexing provides high performance.
- Model schemas that are dynamic
- Data is distributed across several servers, resulting in high scalability.
- Ability to store geospatial data through GeoJSON
- Auto replication
And there’s a lot more!
Okay, but how will we save our data in a MERN stack development web application using MongoDB? While we may use the mongodb npm package, using an ODM or Object Data Modelling framework like mongoose is more convenient.
If I were to make a list of things you should understand about MongoDB for creating full stack web apps, it would include:
- Setting up a MongoDB Atlas database on your local machine or on the cloud
- Models and schemas are created.
- Use the database to perform CRUD (Create, Read, Update, and Delete) actions.
Bonus points are awarded for:
- Using references to connect two related models
- Understanding the pre- and post-hooks of mongoose
- Validation of Mongoose data
Before we move on to ExpressJS, let’s have a look at what it is, why we use it, and whether or not we need it (spoiler alert: we don’t!). Express is the most widely used NodeJS web application framework. Express’s purpose in MERN stack development apps is to handle our backend API server, which will be used to fetch data from a database via our React frontend.
In simplest terms, Express is used to listen to a certain port on our server for requests from the user, or frontend. For each endpoint that the user visits, we may construct various routes. Here’s an illustration to help you understand what I’m talking about:
We create and implement the routes as programmers to receive the correct data from the correct endpoint. Express enables us to accomplish this rapidly. Remember how I claimed Express wasn’t strictly necessary? That’s because we can construct the routes I described before using the core http module that NodeJS offers. Why don’t we make advantage of that? Because Express improves the development experience in general.
This was only an example, and it was a very simple one at that. Express code is considerably easier to understand and write than traditional code. Now, as a MERN stack developer, here are some things you should know about Express:
Configuring an express server to listen on a certain port
Create GET, POST, PUT, and DELETE routes/endpoints for data CRUD operations.
Reading JSON form data supplied over express from the frontend.
Using Express to set up an ODM like Mongoose
Extra credit for:
Separating logic into separate files, such as controllers, routes, and models
Developing bespoke middlewares to deal with faults and other issues
As previously said, it is a Facebook library that helps us to efficiently construct dynamic and interactive user interfaces on our websites. In our web application, it uses props (short for properties) and state to provide dynamic interfaces. Furthermore, it allows us to divide down our code into smaller parts, known as components, allowing us to make it more adaptable.
Components may be imported and utilised in numerous locations across our web application, saving us time and energy by avoiding the need to rewrite code for minor changes and keeping our codebase DRY (don’t repeat yourself).
We could write a separate post about React and what makes it so special. Because this is more of a general introduction of the MERN stack than just React, I’ll mention some of the aspects of React that you’ll encounter while creating web apps and should learn:
- Using props and creating suitable components
- Create React code that works useState and useEffect are two often used React hooks.
- Using the useState hook to manage props in a component
- Rendering with conditions
- Using the useEffect hook to make API requests to retrieve data from the backend
- Controlling form inputs and processing form submissions
- Initialising a npm package
- Installing npm packages through npm or yarn
- Importing and exports modules using commonJS
- Understanding the package.json file
Combining Technologies and Investigating How They Interact
We looked at all four technologies that make up the MERN stack development in the previous section. While each of these technologies is wonderful to work with on its own, integrating them into a web application that runs like clockwork is fantastic. This is what we’ll be learning about in this part. Knowing how to use each technology is half the battle; the other half is piecing it all together into something useful. What could be better than a visual depiction of a MERN stack development web application in which the user interacts with the frontend, which then interacts with the backend and database?
Let’s look at an example to help us comprehend the entire procedure. Assume we’ve created a fantastic e-commerce website that sells clothing. Our website is currently being used by a consumer who is looking for some sneakers. On the landing page, there is a link that sends the user to the shoes page. So, what’s the best way to retrieve data from the backend? Let’s take things slowly at first.
- The user is on our website’s landing page, which was developed with React.
- The user selects the link to go shopping for sneakers. Because we have a single page application, we render the shoes page without refreshing the page.
- At this time, we don’t have any shoe data, therefore the state is empty. To retrieve the data, we issue an API request to our backend.
- Because the process of retrieving data from our database is asynchronous, which means it may take some time to complete, we show the user a loading GIF while the data for shoes is being obtained.
- In the backend, ExpressJS examines the endpoint (route) we’ve reached and calls the relevant controller function to obtain the shoes’ data.
- This JSON data is delivered back to our React frontend, where we can use it to update the state with the freshly acquired information.
- React will re-render the components that rely on our state now that it has been changed, so we replace our loading GIF with the shoes information.
As a leading MERN stack development company with a globally-dispersed clientele, Mobcoder helps you leverage the powerful capabilities of MongoDB, Express.js, React, and Node.js with reliable, round-the-clock support.