The MERN stack (aka the MEAN of isomorphic React/Node applications) is gaining traction in the web development community. There are books and tutorials on building MERN apps, and even a MERN toolkit in the works.
The stack constitutes of ReactJS, Node.js, MongoDB and Express.js, yet the setup is more than a mere sum of its components. Were I a marketer, I’d say there’s some synergy going on, but let’s keep things more technical than that…
So how exactly does MERN compare to other stacks (and, specifically, older software bundles like LAMP)? Does it have a chance of becoming the next big thing in full-stack JS development?
This blog will attempt to answer these questions by focusing on the main distinguishing features of the MERN stack. Without further ado, here are the key reasons to consider MERN as the stack of your next project.
One programming language to rule them all
The programming language of React and Node, JavaScript is also native for MongoDB and Express. You may love or hate JavaScript, but there are obvious perks to having one language underlie the whole web development stack, end to end.
Given there’s no real choice in the way of a client-side language, writing in JavaScript for the server benefits your project in four ways.
- De-siloing development teams. Having frontend and backend developers “speak” the same programming language improves productivity. Things get built faster, even with fewer programmers onboard. In addition to bridging the gap between the frond and the back end, the MERN stack offers an environment that welcomes expertise in full-stack development.
- Writing less code. Writing client-side and server-side logic in the same language produces more reusable code. There’s no duplication of business logic across different languages, which implies writing less code per feature.
- Building faster apps involves less effort. Specifically, there’s less effort involved into bridging the client side and the back end if they’re written in the same language. This might seem trivial, but we’re talking about something that has a major impact on every day of a web developer’s work.
- Streamlined management of dependencies with npm. Automation of dependency and package management with npm is the de-facto standard way of building web applications in 2017. Being a JavaScript package manager, npm covers every component of the MERN stack with a total of 50,000 of modules. Keeping things DRY as never been simpler.
One data format to rule them all
Uniformity is rare in web development, which is why it always feels nice when something works consistently across platforms. In addition to a uniform programming language, the MERN stack utilizes a uniform data format, JSON. This has quite a few practical advantages.
With JSON, you don’t have to deal with serialization, tinker with Object Relational Mapping, or think about object models in terms of rows and columns. By making data transformations unneeded, MERN saves you time and effort. There’s also support of schema thanks to mongoose, which makes a developer’s life easier.
MERN versus MEAN: why choose React over Angular?
Sure, everything mentioned above is equally true for another mainstream JS-based stack, MEAN. So how does MERN compare to it? In a nutshell, the difference between MEAN and MERN largely comes down to two things:
- Having been around for a longer time, MEAN has tons of handy stuff like official documentation or mainstream toolkits. In the meantime (pun unintended), MERN is more of a set of best practices.
- The R in “MERN” versus the A in “MEAN”. Whether React or Angular is a better fit for your project is, obviously, a crucial factor determining the choice between MERN and MEAN. Let’s dwell on this point and look at the key advantages of each of the two options.
Where React wins: simplicity, flexibility, a plethora of third-party solutions
To begin with, it’s hardly possible to draw a straightforward comparison between React and Angular. The latter is a MVC framework and the former is a view library, which is sort of like apples and oranges.
Different as they are, the two serve the same purpose of streamlining UI development. As far as this purpose is concerned, React can boast quite a few practical advantages over Angular. Five of them, actually.
1. Smooth(er) learning curve
Working with Angular requires a solid grasp of TypeScript and knowledge of MVC. There’s also a wide scope of concepts and design patterns that are unique to Angular. React, on the other hand, is a small library. Sure, it has its weird parts, and you need to learn Flux and React Router, but the combo is still easier to master.
2. A plethora of third-party libraries
In 2017, there’s no need to remind anyone how popular React is. With a star count of 73.7K, it’s the fourth most-starred project on Github. One direct consequence of React’s popularity is an impressive amount of third-party solutions. In fact, even our own React developers have created components expanding the functionality of this library.
3. One-way data binding improves code maintainability
The unidirectional data flow of Flux brings order to the complexity of data mutations. One-way flow makes it easier to trace mutations to their origin, which increases the speed of both development and bug fixing.
In addition to reducing the cognitive load, React’s unidirectional data flow doesn’t make you rely on watchers. The latter were a major performance-hoggin factor in Angular 1.x that automatically generated a watcher per each binding. Getting rid of these makes it noticeably easier to keep your application performant.
4. Increased perceived performance with React Fiber
Perceived performance borders on both the actual speed of a UI and on the look and feel in the eyes of a user. A rewrite of the core of React, Fiber is the algorithm behind the prioritization and handling of queued tasks. Currently a work in progress, this algorithm promises faster rendering and smoother animations.
Unlike Angular’s major releases (2, 4), React Fiber is backwards compatible with older versions of the library.
5. Flexible architecture
Being a library rather that a full-fledged framework, React is less opinionated than Angular. Instead of enforcing a one-size-fits-all architecture, React supports a wide spectrum of solutions. This flexibility was one of the driving forces behind the momentum gained by React in the developer community.
6. Momentum
After Google snafus with Angular 2 and 3 upgrades, a lot of developers switched to React which stayed efficient and backward compatible between releases. Basically, there’s more enthusiasm and momentum in React camp now.
Why choose MEAN over MERN: when to stick with Angular?
Even though React has stole Angular’s leadership, the latter remains a more viable choice in a number of cases. The newer iteration of Angular have done a great deal to improve the framework’s performance while providing a more comprehensive front end development solution.
Out-of-the-box architecture with less JavaScript fatigue
JavaScript fatigue is the flip side of React’s flexibility — and the bane of the JS developer’s existence. The library encourages you to decide on the app architecture and choose solutions that play well with your choice. And there certainly is an assortment of solutions to choose from.
Take Material components libraries, for instance. While Angular has one recommended solution from Google, React will make you choose between Material-UI, React-Toolbox, and React-MD. Each is neat, yet each has its gotchas. The choice between Flux and Redux is another important decision that each React team faces. There are dozens of decisions that you have to make before you can even get down to building a React app.
Being a framework, Angular makes a whole lot of decisions for you, saving you time. So if you like to have more things shipped out of the box, Google’s front-end framework might be a better option.
Angular goodness: TypeScript, Angular Universal, native support for Material Design
Whether or not static typing makes your code less bug-prone is a matter of argument. Nevertheless, TypeScript has awesome tooling, which is why many developers prefer it to regular JavaScript. If you’re working with a team of UI developers who are more comfortable with TypeScript, consider this another reason to opt for Angular and MEAN.
Similarly to server-side React, Angular Universal creates server-rendered views of the UI. This helps you achieve two goals. First, Angular Universal enables the UI load faster, creating a positive impact on the UX. Second, server-side rendering of single-page apps is important for making these apps searchable and SEO-friendly.
Finally, Angular native support for Material reduces decision fatigue related to the choice of a components library. Should you build a Material Design app, Angular material is a good reason to stick with google’s UI framework.
Licensing: MIT vs BSD
Licensing is a small thing, yet small things often have big-time implications. As of recently, there seems to be a controversy over Facebook’s licensing policy that covers React and React Native. Sure, this is not necessarily a reason to favor MEAN over MERN. Still, having a lawyer examine the case before you get down to building a React/MERN app is probably a good idea.
Closing thoughts: will the MERN stack go mainstream?
Only time can tell, but MERN certainly has an immense potential. At this point, it is mature enough to help you reap the benefits of a readymade tech stack. Building web apps with MERN will save you from a whole bunch of learning mistakes and integration issues. What’s more, you get best-of-breed technologies for building software with JavaScript.
Given how fast React has turned into the leading UI development technology, it won’t take long before we’ll see a full-fledged ecosystem sprouting around it. And given that Node and MongoDB have been in the spotlight during the recent years, a React-Node-Express-MongoDB stack seems like a much-needed thing.
So if you’re considering a large-scale web application as your next project, MERN might prove to be stack the stack you’re looking for. Besides, if you’re looking for experienced remote developers well-versed in React, Node, and MongoDB, you can find the best ones be contacting us via the form below.
