MEAN Stack – A Gettting Started Guide

“MEAN” is an Open-Source full-stack JavaScript solution which uses MongoDB, Express, Angular and Node.js. The word Mean from MEAN stack is derived from the first letters of the four stack components and generically identifies the combined used of these technologies. Never call it a framework as there is no such a thing as “THE MEAN framework”.

Why MEAN Stack?

The major benefit of the MEAN stack web development is that it is extremely quick to prototype with. It has become a popular choice for creating dynamic websites.

It supports the MVC (Model View Controller) architecture. It has a simplified server layer and is relatively easy and flexible to understand and use. The components are open source and has a lot of community support.

Components

The Database

MongoDB-Logo.svg

MongoDB is the database engine. It is a schemaless NoSQL database system which saves data in binary JSON format. The lack of a schema allows for fluid object definitions that don’t require extensive code changes, and by removing the need for highly complex structured queries, the system can often operate more efficiently than a similar architecture build over a relational database like MySQL.

In addition, the NoSQL nature of MongoDB allows you to quickly change and alter the data layer without having to worry about migrations, which is a very valuable attribute when you’re trying to build a product without clear specifications.

The Server

node

Node JS is the web server and server-side API. It is built on Google Chrome’s V8 JavaScript runtime, allowing us to use Javascript on the backend. Leveraging V8 allows Node to provide a server-side runtime environment that compiles and executes JavaScript at lightning speeds. The major speed increase is due to the fact that V8 compiles JavaScript into native machine code, instead of interpreting it or executing it as bytecode.

The key attraction of Node.js is its Event Loop. To scale to large volumes of clients, all I/O intensive operations in Node.js are performed asynchronously, making it entirely a non-blocking and event-based structure allowing us in building highly scalable and concurrent applications rapidly.

blog_img

The Web Framework

express

Express JS is a lightweight framework + routing engine which runs on top of Node JS. It provides a number of robust features for building single and multi page web application. Express.js serves as the controller layer, directing application flow and marshaling data for the UI. It is inspired by the popular Ruby framework, Sinatra.

Express provides us a variety of features like consistent routing to modules,sub routers, static file serving, view caching, middle-ware interface etc. With express, you can get the server up and running in no time. It also makes coding in Node JS a lot easier.

The Front End UI

AngularJS_logo.svg

AngularJS is a JavaScript framework developed by Google. Of course, most of you will be familiar with it as it provides some awesome features like the two-way data binding and handles data presentation.

It neatly organizes the front end code in a structured manner & is a complete solution for rapid and awesome front end development.

The Result

image_01

The figure shows how these components interact with each other. The Angular JS resides in the front end and performs request to the server layer comprising of Node JS & Express. The request will then be parsed over by Node & handed to the Express framework for performing logical operations & retrieving data from the database layer (MongoDB). Once the data is fetched and the required operations are done, Express will use Node to return the results which will be taken up by Angular JS & presented to the end user.

Now, here’s the cool thing about this combination.

Javascript all the way

MongoDB stores its data in JSON, Node JS, Express, and AngularJS are all JavaScript; so we don’t need to spend time formatting/transforming the data between them. This gives the added benefit of being entirely in one language which makes it simpler and readable.

Isomorphic code

If you want to move some code written in Node to AngularJS, you can easily do it without much hassles, thus offering flexibility in development. Also you don’t need to look for a front-end and a back-end developer as the same person can handle the entire stack components by just learning Javascript.

A few things you might want to consider before you jump in

 Even though Node.js has active plug-in development, the technology is not as mature as the existing ones like Apache. So you may need to write your own plug-ins to cover the areas where Node.js is missing functionality.

 Choosing Node.js locks all code on your web server into JavaScript. For new development this isn’t a major concern, but converting an existing back-end of significant complexity can be time consuming.

 If you are planning to migrate your existing SQL database to Mongodb. Translating the data requires a lot of work to eliminate unnecessary object attributes. But, once it is done the database will be much faster for data retrieval.

 It is not compulsory that you have to use all of these stack components and/or only these stack components together. MongoDB, Express, AngularJS, and Node.js works well together but others might work as well. Instead of MongoDB, some apps might only need Redis or perhaps instead of Angular, you may use Ember.js,Backbone.js, or just jQuery. So feel free to choose whichever combinations you seem comfortable with.

Finally, these technologies have a lot of community support behind them so finding answers to questions or hiring help is going to be easy.

Conclusion:
In this blog we focussed on introduction on Mean stack .
In part 2 of this blog, I will be covering the steps to create a sample app using MEAN. Watch this space.

MEAN Stack – A Gettting Started Guide was last modified: by Admin_REFL

About the Author

Arun Gopi
Senior Software Engineer

A Full Stack developer focused on learning new technologies and sharing the passion. Started out & settled as an expert in PHP & Javascript, but trying to grab a piece of everything the web has to offer.

2 responses to “MEAN Stack – A Gettting Started Guide”

Leave a Reply