Start With Mean Stack - Part One

Mean stack

 

Mean stack development starts with the database server on the backend, in 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 a good user experience for frontend developers and it provides good mechanics for the backend behind the scenes.
    
2. Mean JS supported 2000slibraries & also frameworks that have become popular in backend and frontend development.
    
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 a 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 mainstream 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 provides a simple interface for directing an incoming URL to certain pieces of code. Whether it serves a static HTML page, reads from the 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 log in.

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

 

It is a new breed of the database. It has no concept of table, schema, SQL query & rows also it doesn’t have a transaction, ACID, join query, the foreign key concept, and many other features not available in mongo dB. MongoDB is a 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 documents 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 the angular js)

 

AngularJS is a structural client-side open-source JavaScript Framework developed by Google.

 

AngularJS helps us to create a 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 allows 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 the model that will be updated 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 works as front-end it also javascript framework.

 

 

MEAN stack architecture

 

A mean stack is a common way of 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.

 

Summary

 

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

 

Read more articles on JavaScript:

• Filters In AngularJS
• JavaScript Number Object