Start With Mean Stack - Part One

Mean stack

Mean stack development starts with the database server on the backend, at the middle it uses application logic and controller, and  after that it goes front end and uses user interface. Mean stack is generally referred to as a collection of JavaScript-based technologies

It is comprised of four main technologies, with its supporting technologies:

1. Mongo DB: The database
2. Express: The web framework
3. AngularJS: The front-end framework
4. Node.JS: The web server

Now here comes the point of why we are learning Mean JS.

One great thing about MEAN stack is, it not only uses JavaScript in the browser, it uses JavaScript throughout. Using the MEAN stack, you can code both the front end and back end in the same language.

Why we use it:-

1. It provides good facilities for the backend developer and the frontend developer. It provides good user experience for frontend developers and it provides good mechanics for the backend  behind othe scenes.
   
   
2. Mean JS supported 2000slibraries & also frameworks which has become popular in backend and frontend developing.
   
   
3. It reduces the server load, thus it reduces the cost.

Introduction to Node.JS (In MEAN‘N’ is the Node.JS)

Node.JS indefinitely not a new language, and it is not just a framework on JavaScript. It can be considered as a runtime environment for JavaScript built on top of Google's V8 engine. Node provides a purely event-driven, non-blocking infrastructure for building highly concurrent software.

Example:

var http = require('http');
http.createServer(function (req, res)
{
    res.writeHead(200,
    {
        'Content-Type': 'text/plain'
    });
    res.end('Hello World\n');
}).listen(8080, 'localhost');
console.log('Server running at http://localhost:8080');

Why we use Node JS in Mean Stack:

 

1. It has one main reason that node JS is gaining more popularity so that you write your code in it. If you want to be full stack developer you have proficient in at least languages --  JavaScript on the front end and for the backend PHP or Ruby.
   
   
2. It enables node.JS application to the server which allows more users on fewer server resources than other main stream technologies.

Introduction to Express (In MEAN‘E’is theExpress.JS)

The Express framework is one of the most popular Node-based web frameworks and one of the single most popular packages available in npm. It is built based on the Sinatra web framework.

Example:

var express = require('express');
var app = express();
app.get('/', function (req, res)
{
    res.send('Hello World');
});
app.listen(3300);

Why we use Express JS in Mean Stack:

 

1. Express JS providea simple interface for directing an incoming URL to certain pieces of code. Whether it serves a static HTML page, reads from database, or writes to the database doesn’t matter.
   
   
2. HTTP is a stateless protocol so there is no concept for storing session states  there. This makes it difficult to create a secure area where a user has to login.

Introduction to mongo DB: (In MEAN‘M’ is the mongo DB)

It is a new breed of database. It has no concept of table, schema, SQL query & rows also it don’t have transaction, ACID, join query, foreign key concept, and many other features not available in mongo db. MongoDB is different database than you’re probably used to if you’ve used a relational RDBMS.

Example:

var connectionUrl = 'mongodb://localhost:1209/myproject',
sampleCollection = 'order';

Why we use Mongo DB in Mean Stack:

 

1. In relational databases we use column row concepts for data display but mongo db. is a document database mongo db. Concept row will exist but columns are removed and column defines what should be in your row, every row is documented and this document both defines and holds the data itself.
   
   
2. It stores document as BSON (it is binary JSon (JavaScriptserialized object notation)). As we say that it holds the data by JSON.

Introduction to AngularJS: (In MEAN ‘A’ is theAngularJS)

AngularJS is a structural client side open-source JavaScript Framework developed by Google.
AngularJS help us to create single page (one page) application with the help of HTML, CSS, and JavaScript on the client side.

As we know that AngularJS follow MVW* pattern and it allow to build well-structured testable & maintainable front end application.

Example:

<html ng-app>

    <head>
        <title>AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularJS/1.3.14/angular.min.JS">
        </script>
    </head>

    <body> Hello world.
        <p>The sum of 10 and 1 is equal to <b>{{10+1}}</b></p>
    </body>

</html>

Why we use AngularJS in Mean Stack:

 

1. It follows two way data binding. Two way data binding helps us with any changes in model that will be updates view and vice-versa without any manipulation on DOM or events.
   
   
2. AngularJS support creates your own directive that makes reusable components to be used according to your requirement. It is also abstract DOM manipulation logic.

How the MEAN stack components work together

In Mean JS data is stored in binary JSON in mongo dB through Mongoose it has exposed as JSON. The Express JS framework is working on top of Node.JS, where all code written in JavaScript. Angular JS work as front-end it also java script framework.



MEAN stack architecture

Mean stack is a common way architecture. It has Rest Api for building single page applications. That API mainly builds with MongoDB, ExpressJS & NodeJS being built single page applications with the help of AngularJS. That approach is good for those who come to Mean stack with an AngularJS background and  are looking for a stack that gives a fast, responsive API.

Thank you for reading my article.

Next chapter we will read  how to install AngularJS, MongoDB, Express.js & NodeJS.

Read more articles on JavaScript:

• Filters In AngularJS
• JavaScript Number Object