MEAN vs MERN Stack

MEAN vs MERN Stack

March 18, 2017

The MEAN stack has become one of the most popular options for app development. It's easy to adopt and is written entirely in Javascript. This makes for faster development and helps start ups quickly get products to market. Developers no longer need to worry about knowing different languages to contribute to both the front and back end, drastically reducing development costs and improving efficiency. What's not to love?

Angular vs React

While most developers can agree that the MEAN stack is a great option for modern app development, a large number are starting to advocate the use of React over Angular. Developers are now starting to talk in terms of MEAN vs MERN, the only difference being Angular or React. What's got developers so hung up on these two options? Why one over the other? In this article, we discuss the differences between Angular and React and why you should choose one over the other.

What's the difference?

In some ways, comparing React to Angular is apples and oranges. Angular is a front end Javascript framework whereas React is simply a JavaScript library. What's the difference? A framework is a structure for presenting code. It dictates a specific architecture for how your code is organized. Angular, for instance, brings an MVC architecture to front end development. It comes with additional helper functions and built in functionality for making http requests, etc. A library, on the other hand, is simply a toolkit for abstracting different layers of your code. React is a library for rendering UI elements and controlling the state, etc. of your app.

With that said, Angular and React are both used for the same reason, to organize and render the presentation layer of your app. Both options are used with MongoDb, Express, and Node to achieve the same results.

Which is right for you?

At the end of the day, both are great options. While Angular has the backing of Google, React is a Facebook product. This means both products have great teams backing them and ample amounts of documentation, examples, etc. The decision to use one over the other largely boils down to personal preference, but here are a few reasons why you may choose one over the other.

Performance

React is arguably better for performance reasons. Angular 1 uses two way data binding and a digest cycle to constantly keep the view in sync with the underlying data model. This gets expensive when you have hundreds of variables to dynamically check and update. React uses unidirectional data flow to more efficiently check for state change. This plays better with larger data sets, where hundreds of thousands of records need to be rendered and updated. Although Angular 2 has introduced better state control, React is an easier and more intuitive way to handle change events.

Architecture

This goes back to the whole library vs framework discussion. While React makes UI rendering a breeze, it's just a library. It's up to you as the developer how you organize your code to work with underlying data models, etc. As a framework, Angular enforces an MVC like design, forcing developers to better organized their code. Although React is more flexible, it leaves more up to the developer as to how the app is organized. This can make your code harder to maintain.

Third Party Libraries

React relies heavily on other third party libraries to make things happen. A great example is with http requests. React doesn't have an out of the box solution for making http calls to a backend server. Angular has a built in $http service wrapper that makes http requests a breeze. Although libraries like Axios allow you to easily make requests in React, it requires more configuration.

Angular 2?

Angular 2 is still very new but it addresses some of the major pitfalls seen with Angular 1. It makes use of the shadow DOM (like React) to more efficiently control state change. It also allows for server side rendering and competes with React where Angular 1 cannot.

The main headache with Angular 2 is TypeScript. TypeScript is a superset of JavaScript (developed by Microsoft) that essentially makes JavaScript more Java like in syntax. If you are a Java developer, then Angular 2 may be the perfect solution for you. Otherwise, the more strongly typed syntax can get very frustrating, very fast.

Conclusion

Both the MEAN and MERN stack are equally viable options. It really boils down to personal preference. While React is definitively more performant than Angular 1, Angular 2 accounts for the pitfalls seen with its predecessor. Both options play equally well with other stack components (MongoDb, Express, Node). Deciding which one is best for you comes down to an emphasis on architecture, code maintainability, etc. Just remember that Angular 2 is the only true competitor to React.js when considering things like performance and server side rendering. When choosing between MERN or MEAN, consider Angular 2 vs React, not Angular 1.


Join the conversation...

Posted by Josh Klearman
June 20, 2017

i think it's so stupid to argue MEAN vs MERN. Both are sufficiently acceptable for anything you'd want to do on the front-end. i myself am a full stack developer but could understand how front end guys would go crazy with this argument. that is not to say that both are equally viable for anything you'd want to do on the front end. after all it's really just a presentation layer. if you are going to get this hung up on client side frameworks then I hope you have spent even more time thinking about your back end processes (where performance will matter a hell of a lot more) :). i think this argument is stupid but a great read nonetheless.
Posted by Ralph Zetterburg
May 11, 2017

MEAN stack is still alive and well. i have been using angular 1 for years now and still stand by it. some of the fancy new libraries like React and Angular 2 may be taking the conversation by storm, but good old Angular 1 still works fine and is easiest to pick up. it follows traditional MVC and doesn't use any fancy preprocessors /markup to achieve its goals. React and Angular 2 are improvements over Angular 1 but remember you will have to learn JSX for React and TypeScript for Angular 2 (more than likely).
Posted by Ray Curtis
May 4, 2017

it needs to be understood that React is very different than Angular. If you aren't already used to flux architecture and unidirectional data flow, then React can be difficult to pick up. It also uses JSX which takes some time getting used to if your coming from traditional html etc. Angular is a bit easier for developers to jump into because it follows the familiar MVC pattern. When choosing between MEAN or MERN stack, I think the most factor is your team's familiarity with the more progressive flux architecture used by React.
Posted by Sundiri
May 1, 2017

MERN...
Posted by Sam Erickson
April 25, 2017

Terry I agree with your statement as long as we are talking Angular 2. as mentioned in the article, Angular 1 cannot be compared to React due to it's performance issues etc...also typescript is no fun so MERN ha
Posted by Terry S
April 19, 2017

if you are getting caught up on a MEAN vs MERN discussion then it's probably time to find a new hobby :). both are fine it really boils down to personal preference.
Posted by Naomi
April 7, 2017

this is largely because I'm a huge React fan but MERN stack is def the future. Angular is already falling behind React. React is just so lightweight and allows the front end devs a lot of flexibility in terms of libraries they use etc. Angular 2 you are tied to a whole framework or ecosystem of TypeScript and it's scary. MERN MERN MERN
Posted by Brett H.
March 18, 2017

jerry what does the U stand for? :)
Posted by Jerry S.
March 18, 2017

i agree that the conversation between MEAN and MURN shouldn't involve Angular 1. React was a huge improvement and Angular 2 is simply trying to keep up with React's superiority performance wise. things like server side rendering are also important to consider. if you love java though...angular 2 may be the way to go


More by the stackchief