The MEAN stack, defined
The MEAN stack is a software stack—that is, a set of the technology layers that make up a modern application—that’s built entirely in JavaScript. MEAN represents the arrival of JavaScript as a “full-stack development” language, running everything in an application from front end to back end. Each of the initials in MEAN stands for a component in the stack:
- MongoDB: A database server that is queried using JSON (JavaScript Object Notation) and that stores data structures in a binary JSON format
- Express: A server-side JavaScript framework
- Angular: A client-side JavaScript framework
- Node.js: A JavaScript runtime
A big part of MEAN’s appeal is the consistency that comes from the fact that it’s JavaScript through and through. Life is simpler for developers because every component of the application—from the objects in the database to the client-side code—is written in the same language.
This consistency stands in contrast to the hodgepodge of LAMP, the longtime staple of web application developers. Like MEAN, LAMP is an acronym for the components used in the stack—Linux, the Apache HTTP Server, MySQL, and either PHP, Perl, or Python. Each piece of the stack has little in common with any other piece.
This isn’t to say the LAMP stack is inferior. It’s still widely used, and each element in the stack still benefits from an active development community. But the conceptual consistency that MEAN provides is a boon. If you use the same language, and many of the same language concepts, at all levels of the stack, it becomes easier for a developer to master the whole stack at once.
Most MEAN stacks feature all four of the components—the database, the front end, the back end, and the execution engine. This doesn’t mean the stack consists of only these elements, but they form the core.
MongoDB
Like other NoSQL database systems, MongoDB uses a schema-less design. Data is stored and retrieved as JSON-formatted documents, which can have any number of nested fields. This flexibility makes MongoDB well-suited to rapid application development when dealing with fast-changing requirements.
Using MongoDB comes with a number of caveats. For one, MongoDB has a reputation for being insecure by default. If you deploy it in a production environment, you must take steps to secure it. And for developers coming from relational databases, or even other NoSQL systems, you’ll need to spend some time getting to know MongoDB and how it works. InfoWorld’s Martin Heller dove deep into MongoDB 4 in InfoWorld’s review, where he talks about MongoDB internals, queries, and drawbacks.
As with any other database solution, you’ll need middleware of some kind to communicate between MongoDB and the JavaScript components. One common choice for the MEAN stack is Mongoose. Mongoose not only provides connectivity, but object modeling, app-side validation, and a number of other functions that you don’t want to be bothered with reinventing for each new project.
Express.js
Express is arguably the most widely used web application framework for Node.js. Express provides only a small set of essential features—it’s essentially a minimal, programmable web server—but can be extended via plug-ins. This no-frills design helps keep Express lightweight and performant.
Nothing says a MEAN app has to be served directly to users via Express, although that’s certainly a common scenario. An alternative architecture is to deploy another web server, like Nginx or Apache, in front of Express as a reverse proxy. This allows for functions like load balancing to be offloaded to a separate resource.
Because Express is deliberately minimal, it doesn’t have much conceptual overhead associated with it. The tutorials at Expressjs.com can take you from a quick overview of the basics to connecting databases and beyond.
Angular
Angular (formerly AngularJS) is used to build the front end for a MEAN application. Angular uses the browser’s JavaScript to format server-provided data in HTML templates, so that much of the work of rendering a web page can be offloaded to the client. Many single-page web apps are built using Angular on the front end.
One important caveat: Developers work with Angular by writing in TypeScript, a JavaScript-like typed language that compiles to JavaScript. For some people this is a violation of one of the cardinal concepts of the MEAN stack—that JavaScript is used everywhere and exclusively. However, TypeScript is a close cousin to JavaScript, so the transition between the two isn’t as jarring as it might be with other languages.
For a deep dive into Angular, InfoWorld’s Martin Heller has you covered. In his Angular tutorial he’ll walk you through the creation of a modern, Angular web app.
Node.js
Last, but hardly least, there’s Node.js—the JavaScript runtime that powers the server side of the MEAN web application. Node is based on Google’s V8 JavaScript engine, the same JavaScript engine that runs in the Chrome web browser. Node is cross-platform, runs on both servers and clients, and has certain performance advantages over traditional web servers such as Apache.
Node.js takes a different approach to serving web requests than traditional web servers. In the traditional approach, the server spawns a new thread of execution or even forks a new process to handle the request. Spawning threads is more efficient than forking processes, but both involve a good deal of overhead. A large number of threads can cause a heavily loaded system to spend precious cycles on thread scheduling and context switching, adding latency and imposing limits on scalability and throughput.
Node.js is far more efficient. Node runs a single-threaded event loop registered with the system to handle connections, and each new connection causes a JavaScript callback function to fire. The callback function can handle requests with non-blocking I/O calls and, if necessary, can spawn threads from a pool to execute blocking or CPU-intensive operations and to load-balance across CPU cores.
Node.js requires less memory to handle more connections than most competitive architectures that scale with threads—including Apache HTTP Server, ASP.NET, Ruby on Rails, and Java application servers. Thus, Node has become an extremely popular choice for building web servers, REST APIs, and real-time applications like chat apps and games. If there is one component that defines the MEAN stack, it’s Node.js.
For an introduction to Node.js, see Martin Heller’s explainer. To get started developing with Node, see his Node.js tutorial.
Advantages and benefits of the MEAN stack
These four components working in tandem aren’t the solution to every problem, but they’ve definitely found a niche in contemporary development. IBM breaks down the areas where the MEAN stack fits the bill. Because it’s scalable and can handle a large number of users simultaneously, the MEAN stack is a particularly good choice for cloud-native apps. The Angular front end is also a great choice for single-page applications. Examples include:
- Expense-tracking apps
- News aggregation sites
- Mapping and location apps
MEAN vs. MERN
The acronym “MERN” is sometimes used to describe MEAN stacks that use React.js in place of Angular. React is a framework, not a full-fledged library like Angular, and there are pluses and minuses to swapping React into a JavaScript-based stack. In brief, React is easier to learn, and most developers can write and test React code faster than they can write and test a full-fledged Angular app. React also produces better mobile front ends. On the other hand, Angular code is more stable, cleaner, and performant. In general, Angular is the choice for enterprise-class development.
But the very fact that this choice is available to you demonstrates that MEAN isn’t a limited straitjacket for developers. Not only can you swap in different components for one of the canonical four layers; you can add complementary components as well. For example, caching systems like Redis or Memcached could be used within Express to speed up responses to requests.
MEAN stack developers
Having the skills to be a MEAN stack developer basically entails becoming a full-stack developer, with a focus on the particular set of JavaScript tools we’ve discussed here. However, the MEAN stack’s popularity means that many job ads will be aimed at full-stack devs with MEAN-specific skills. Guru99 breaks down the prerequisites for snagging one of these jobs. Beyond familiarity with the basic MEAN stack components, a MEAN stack developer should have a good understanding of:
- Front-end and back-end processes
- HTML and CSS
- Programming templates and architecture design guidelines
- Web development, continuous integration, and cloud technologies
- Database architecture
- The software development lifecycle (SDLC) and what it’s like developing in an agile environment
What is a MEAN stack developer’s salary? While there’s always a range based on experience and employer, it’s definitely a lucrative field. As of December 2019, Neuvoo.com says the median salary a MEAN stack developer can expect is around $125,000 a year. Indeed.com lumps MEAN stack developers in with full-stack devs more generally, and pegs the typical annual salary at around $112,000.
MEAN stack tutorials
Are you comfortable with the technical basics and ready to dive in and learn the MEAN stack? There are a number of free tutorials out there that can get you started. The Angular Templates site has a particularly thorough tutorial that guides you through the process of building a simple website using the MEAN stack. TutorialsPoint has a good guide to building a single-page web application with the MEAN stack. Enjoy getting your hands dirty and good luck!