MEAN (Mongo-Express-Angular-Node) Full Stack JavaScript Development (Part I)

In recent years, technologies like MongoDB, Node.js and AngularJS have become very trendy, giving rise to a new approach for building fast, robust and maintainable web applications using MongoDB, Express, AngularJS and Node.js. Using these 4 technologies together makes up the so-called "MEAN stack" (MEAN = Mongo-Express-Angular-Node), whose common thread is the use of the same programming language (JavaScript). That’s a great advantage if you know JavaScript, which, by the way, is not a very complex language. So with these 4 technologies we have everything we need to develop web applications: Frontend, Backend and Database.

# MongoDB

MongoDB is an open source, non-relational document database system, also known (although incorrectly, in my opinion) as a NoSQL database. This database system stores data in documents in JSON format (actually it stores them in BSON format), which makes it a very manageable and understandable format to work with, and operations (or "queries") on these documents are written in JavaScript. MongoDB stands out for its flexibility and scalability, which helps with agile software project development. Many languages can work with MongoDB (Java, PHP, Python, etc.) and of course Node.js is one of them.

# Express

Express is a very lightweight and flexible framework built on Node.js that provides a very robust set of features to easily create web servers and receive HTTP requests; therefore, it lets you develop REST APIs very quickly.

# AngularJS

AngularJS is a Frontend framework developed by Google (so it’s bound to be a success, one way or another) that follows the MVC (Model-View-Controller) pattern, although the Google folks themselves say it follows the MVW pattern (Model-View-Whatever (whatever works for you)). AngularJS lets you create what are called Single-Page Applications, which are web applications that don’t need to reload the page (basically, with AngularJS you get "AJAX for free", although what I’m saying isn’t 100% accurate). To wrap up, AngularJS is a very powerful framework that makes the job of Frontend developers much easier. Give this framework a go, since it’s one of the ones that has surprised me the most lately.

# NodeJS

Node.js (created in 2009) is a programming environment (in JavaScript) for the server side, based on the V8 JavaScript engine and built around non-blocking, event-driven I/O, which makes it very fast and lets you create highly scalable network programs (web servers) and use "real time". In recent years this technology has been booming and has given rise to a quite large and powerful developer community, so it looks like this technology will have some success in the short to medium term.

Given the success MEAN is having for web application development, projects are emerging that provide MEAN application skeletons, such as MEAN.IO or MEANJS.ORG.

How does MEAN work?

As I’ve already said, with these 4 technologies we have everything we need (Frontend, Backend and Database) to develop a web application, but you may be wondering what the purpose and role of each of these technologies is. In the following image you can see the flow of web applications built with MEAN.

As you can see in the image, we build the Frontend with AngularJS, which is in charge of making calls to the REST API (Post, Put, Get and Delete) built in Node.js using the Express framework. The API can perform CRUD (Create-Read-Update-Delete) operations on the MongoDB database, and once the API has the data requested in the call, it returns it to AngularJS (that is, to the Frontend) in JSON format, and AngularJS displays it on screen without reloading the page, since AngularJS keeps the data model up to date without needing to reload the page.

So this is the architecture and the data flow in applications built with these technologies. Depending on the project, we can put more logic in the Frontend or in the Backend, but that’s something to weigh up according to the characteristics of each project. Finally, one thing that has pleasantly surprised me about AngularJS is that, straight from the HTML, it lets us validate forms with the tags it provides, so we won’t need to validate forms in JavaScript like in the old days.