The MERN Stack

There are several tech stacks dominating software development at the moment – MEAN, MEVN, LAMP and MERN. A tech stack is basically a set of technologies that when used together, allow you to build an application.

The MERN stack allows you to build applications all in one programming language, JavaScript. MERN is an acronym for MongoDB, Express.js, React.js and Node.js. There are similar stacks, MEAN and MEVN, that use Angular and Vue.js on the frontend, respectively.

For a while, I had a goal of building web applications using the MEAN stack. I built a few small applications using the stack, but the reason I deciding to start learning MERN is because React.js seemed to be growing at a faster rate than Angular. Also, it seemed to me that a lot more companies were looking for React.js developers opposed to Angular ones. Let me also be clear that there definitely isn’t anything wrong with learning Angular, I just decided on React.

In this post, I’ll talk about the benefits of learning the MERN stack as well as break down each piece of the stack – MongoDB, Express, React and Node.

Why Learn the MERN Stack?

One of the major benefits of the MERN stack is that you can build your entire application using JavaScript. For example, if you had a backend built on C# but your frontend was built on React, you’d have to constantly context switch between languages. With MERN, you only have to master one programming language instead of several.

Additionally, knowing the MERN stack makes you a full stack developer. Many companies are looking for someone who has experience using both the frontend and the backend opposed to one or the other. This makes you much more valuable as a developer because you can work on all pieces of the application. Full stack development can also lead to increased productivity because its much easier to debug and diagnose problems with a holistic understanding of the application.

Lastly, it offers flexibility, you can create web applications with MERN or you can create mobile applications using React Native.

MongoDB

MongoDB is a NoSQL, document database that is easy to learn, flexible and scalable. It synchronizes well with the rest of the stack because it was designed to work natively with JSON. JSON objects created in React can be processed by the Express server and then stored directly in MongoDB.

Also, there are several benefits to using MongoDB over a traditional SQL database:

  • MongoDB has a flexible schema. If we decide we want to store a record with an additional field, we can do so without redesigning the database. This makes it easy to adapt to changing project requirements.
  • It can be scaled by adding additional commodity servers. In contrast, to scale a SQL database, you’d have to upgrade your hardware, which would be much more expensive.
  • Queries in MongoDB are usually faster than SQL queries because you do not have to join on multiple tables when searching for an object or entity (would become slower as tables grow in size).
  • MongoDB can handle high volumes of data more efficiently.

This isn’t to say that MongoDB is better than SQL, it’s just that MongoDB will perform better in certain scenarios.

Express.js

Express is a server-side web application framework that runs on Node.js. It is used to create robust APIs and web applications.

On the website, it advertises itself as:

Fast, unopinionated, minimalist web framework for Node.js

It features powerful models for URL routing – an incoming URL can be matched with a server function. Additionally, we can easily handle requests and responses, add middleware, and perform server-side rendering. Basically, it allows us to build a server in Node.js easily with minimal code.

It is also flexible. Being unopinionated means we do not have to build our API in a certain way, it is at the discretion of the developer.

React.js

React.js is a JavaScript library for building user interfaces. We can use it in parts of our application, build an entire SPA with it, or even build a mobile app using React Native.

One of the major benefits of React is we can create reusable components. This makes our frontend code much more readable, maintainable and scalable. This is not the only advantage of using React, however. It also uses a virtual DOM. A version of the DOM is stored in memory. Whenever changes are made to the virtual DOM, the virtual DOM is compared against the original DOM and the original DOM is updated accordingly. This makes React very performant. Additionally, React is easy to learn for someone who already has a good understanding of JavaScript.

If you would like to learn more about React, I recently published a blog post that you can check out here.

Node.js

Node.js is a JavaScript runtime environment built on Google Chromes V8 JavaScript engine. It is multithreaded, cross-platform, and used to build fast and scalable applications. It also allows JavaScript code to be ran outside of a browser.

Before Node, we had to combine some backend language to build a full stack applicaton like C# or PHP. With Node.js, for the first time, we could build our backend in JavaScript. This meant we could build a full stack application all in JavaScript using Node.js and some frontend technology like React or Angular.

Conclusion

To conclude, the MERN stack allows us to quickly and efficiently build out fast and scalable full stack web applications. Since we’re only using one programming language, JavaScript, we only need to be proficient in one language. Additionally, because we use JavaScript throughout the stack, JSON flows smoothly from our frontend to our backend.

Full stack JavaScript stacks are appealing to new developers, but also to developers who are either proficient in either React.js or Node.js. They can easily transition to full stack development by learning the other parts of the stack. This will make them more valuable to clients or employers and increase their earning potential.

In my opinion, the most fascinating part about the stack is the fact that JavaScript was created in 10 days. It evolved from just being used to make static web pages dynamic and more exciting to where it is now, where we can create servers and full stack web applications!

2 Trackbacks / Pingbacks

  1. Intro to Node.js - Galen Casstevens
  2. Building a Calculator With React - Galen Casstevens

Comments are closed.