Torc blog
Insights and resources from Torc leadership, the Torc community, and industry leaders.
The MEAN stack and MERN stack are widely used by enterprises and startups alike. Both stacks employ MongoDB, Express, and Node.js, but differ in that MEAN utilizes Angular and MERN React.
With just this single difference, you’d expect them to have little to separate them. But the shift from Angular to React makes the stacks in terms of markup, event handling, and component lifecycles. Here we want to show you how they differ, and how they are the same, so you can understand the technology and the key differences between a mean stack developer vs mern stack developer.
Background of the MEAN and MERN stacks
The MEAN stack was coined in 2013 by Valeri Karpov, an engineer at MongoDB. It describes a modern JavaScript-oriented stack where you use Node.js on the backend, with Express as an HTTP server and MongoDB as a database, and use Angular as a frontend UI framework. It became synonymous with modern JavaScript-focused web development, and is still very popular for new projects that want a simple and powerful development stack.
However, React, a UI framework released in 2016 by Facebook, has recently taken the limelight away from Angular. This is usually attributed to React being easier to pick up and having a simpler syntax. Due to React’s growing popularity, a new stack gained prominence, MERN.
Now, let’s take a look at the features of Angular vs React, the primary difference, and then we will look at how they integrate with the rest of the stack.
Comparison of MEAN and MERN stacks
Markup Language
React and Angular both have markup languages that are based on HTML, but they are a bit different.
React
React uses JSX, which is a markup language designed to add the dynamic features of JavaScript to HTML. For example, JSX allows you to embed functions that return markup:
In the example above, if items = [{name: "Test", description: "testing 1 2"}], the JSX above would render as:
If you want to use other components in your JSX, you simply need to write an HTML tag with the name like you would with a normal HTML tag. However, make sure you have capitalized the component to help React distinguish it from an HTML element.
React JSX was originally created for React, but due to its popularity, UI frameworks like Vue and Solid adopted it. Learn more about hiring a react developer.
Angular
On the other hand, Angular offers its own HTML templating language. In general, Angular uses more specific element attributes to add functionality to the templates, rather than just allowing you to insert any functions. Additionally, Angular uses TypeScript exclusively and relies heavily on features like TypeScript decorators. For example, here is the markup above, but implemented in Angular.
Once again, this is functionally equivalent to the example in React above. Learn more about hiring an angular developer.
To use other components in your code, add the HTML tag equivalent of the component based on the selector property of the component. For example, an element with a selector of items-list (like above) would be used as <items-list></items-list>. You will also have to add the component to the imports property on the parent component and set standalone: true on the child component or manage the child component through a module.
Event handling
React
React event handling is quite simple. It is very similar to HTML attribute-based event handling (as opposed to addEventListener()), but you need to use camelCase instead of lowercase for event attribute names, and you pass a function surrounded by brackets rather than a string.
Angular
Once again, listening to an event in Angular is similar to HTML, except you must wrap the event name in parentheses instead of adding on as a prefix.
Component attributes & state
React
In React, component attributes are referred to as props. Both props and state are very simple to implement. For props, you simply pass it like an HTML attribute and the component will receive it as the first argument to the component function.
To implement state, you need to use the useState() hook, passing the initial value as the only argument.
Note: Hooks are functions you call in your React components that add behavior traditionally implemented by class methods, like state and lifecycle.
The useState hook returns two items in an array. The first is the value of the state, which is automatically updated when the component rerenders, and the second is the function you use to update the state, which triggers a component update. Make sure you do not change the state variable and instead call the set state function with the new variable. Otherwise, the component will not rerender to reflect the new changes.
Angular
In Angular, component attributes are referred to as inputs or props. To declare a prop, you have to use the @Input decorator inside the component class. After the declaration, you pass the name of the attribute. Then, you set the attribute just like you would with a React or HTML component.
As for state, you have to add a property to the component class like this:
Component lifecycle
React
When using React hooks, useEffect() fills almost all of the functionality you need from lifecycle methods while being simpler. The useEffect() allows you to specify side effects that will run when the component mounts and updates. This is somewhat of a combined lifecycle hook, meaning you can implement it with one hook and know that it will always stay up to date, even as the props or state change.
If you want a cleanup function to run when a component unmounts, you can return a function in the effect. For example, if we were trying to implement a timer, this is how we would do it:
Notice the empty array at the end of the useEffect() call? That specifies that we only want the effect to run when the component mounts and unmounts. The array at the end specifies what state or prop updates would trigger the function for example, if you passed time, if time changed, the function to create the interval would run again. However, we left the array empty, which means that no prop or state updates will update the component.
Angular
Angular uses more standard lifecycle methods. There are quite a few, so we will just cover the most important: ngOnChanges(), ngOnInit(), and ngOnDestroy(). As their names imply, ngOnChanges() runs the function when an input changes, ngOnInit() runs the function when the component is created, and ngOnDestroy() runs the function when the component is destroyed.
To implement Angular lifecycle functions, you must insert them as methods in the class for the component you want the function to run on. For example, if you wanted to implement a timer similar to the one in the React example, you would write something like this:
Property binding
React
Property binding is not built into React. However, using event handling combined with state setting functions, you can create your own property binding system. For example, if you wanted to include state that automatically updated to match the value of a text input, you would write something like this:
If you want the property binding to be only one-way, simply remove value={value}.
Angular
Luckily, Angular offers built-in one way and two-way property binding. To use one-way property binding, simply add an attribute to the input element that starts with a hash:
Then, you can access the value using input.value, and it will automatically update like any other property.
For two-way property binding, you need to wrap the attribute in [()] and set it equal to the name of the property you want it to be bound to like this:
Now, when the input value updates, inputValue updates with it, and vice-versa.
Integration
MongoDB
You can build an application that does not have any database access on the client, therefore making React and Angular never have to interact with MongoDB. Instead, you create a REST API on the server that the client can access, which will interface with the database directly. This is often the better approach, as it is more secure and easier to port to new platforms.
However, if you are creating a prototype and want a quick way to develop, making the database access client-side might be the best option. If you are using MongoDB Atlas, you can use the Atlas Data API or MongoDB Realm. However, even then, you will only use MongoDB through your scripts. It never actually integrates into your Angular or JSX markup. Learn more about hiring a MongoDB developer.
ExpressJS
At the most basic level, you could simply generate static files for your markup and serve it using the static file server built into Express. However, there are limitations to this, like not being able to have the server send custom HTML based on the page data. Luckily, these limitations can be removed using Server Side Rendering (SSR). Server side rendering is how servers render HTML dynamically.
In order to use SSR in React, you must use ReactDOMServer.renderToString(), which will output a string of HTML for the React element specified. Then, you can use ReactDOM.hydrateRoot() to hydrate the React code on the client.
In Angular, you must use Angular Universal, which is Angular’s isomorphic rendering technology. The renderModule() function returns a string of the rendered HTML exactly like renderToString() for React.
You can integrate these into the Express server when you return HTML to the client. Learn more about hiring an ExpressJS developer.
NodeJS
The only thing you need to use in Node is the server side rendering. If you ever wanted to server side render code beyond the Express server, you can do it directly in Node. You use the same API for React and Angular, just integrate it with the rest of the code differently, changing how the input is found and the output is used. Learn more about hiring a NodeJS developer.
MEAN vs MERN which is better?
Now we have gone over the major differences in how Angular and React work, as well as how they integrate with the other parts of the MEAN and MERN stack. As you might be able to tell, React is generally a little simpler, due to its more minimal API, but Angular could also be easier depending on the person.
If you want to learn more about each, the documentation for React and Angular are great places to start. I hope this helped you, and thanks for reading.
Learning the difference between MEAN and MERN stacks
The MEAN stack and MERN stack are widely used by enterprises and startups alike. Both stacks employ MongoDB, Express, and Node.js, but differ in that MEAN utilizes Angular and MERN React. In this article we outline they key differences between MEAN and MERN stacks.
