MEAN STACK
Agenda
• Introduction
• What isLAMP?
• Requirements for amodernweb
• What isMEAN?
• What isMongoDB?
• What isExpress?
• What is AngularJS?
• What isNode.JS?
• Disadvantages of MEANSTACK
• Conclusion
• Any Questions?
Introduction
• MEAN is an opinionated
framework which simplifies
full stack JavaScript
and accelerates web
application development.
• MEAN represents a major shift in architecture and
mental models — from relational databases to
NoSQL and from server-side Model-View-Controller
to client-side, single-pageapplications.
• MEAN is an acronym for Mongo DB, Express
JS,Angular JSand Node.Js.
What is LAMP ?
• Linux
• Apache
• MySQL
• PHP
• LAMPstack is apopular open source web platform commonly
used to run dynamic web sites andservers.
• It includes Linux,Apache, MySQL,and PHP/Python/Perl andis
considered by many the platform of choice for development
and deployment of high performance web applications which
require asolid and reliable foundation.
Problems with LAMP?
• Apache is not the fastest web serveraround
• It’s hard to write good-to-read, reusable and fastPHP
code
• Frontend works with other languages thanthe
backend
• Toomany conversions (XMLto PHPto HTML,model
to SQL)
• There is no separated server-side and client-side
development
Requirements for a
modern web?
• Customers want fast web sites/fast responsetimes
• No page reloads
• Enterprises want to govirtual
o Onebox +Severalvirtual images =>Shared Hardware
o Systemwith minimal memory footprint/overhead needed
• Asmany concurrent requests aspossible
• Only load resources when needed (conditional
loading)
• Mobile/Responsive UIs
What is MEAN Stack?
MEAN Stack is a full-stack JavaScript solution that
helps you build fast, robust and maintainable
production web applications using MongoDB, Express,
AngularJS,and Node.js.
• 100%free , 100%Open Source
• 100%JavaScript (+JSONandHTML)
• 100%Web Standards
• Consistent Models from the backend to the frontend and back
• Useauniform language throughout your stack
o JavaScript(the language of the web)
o JSON(the data format of theweb)
o No conversion needed for the database
• UseJavaScriptwith agreat framework (compared to jQuery)
• Allows to start with the complete frontend development first
• Very low memoryfootprint/overhead
Processing model
MongoDB
MongoDB is across-platformdocument-oriented
database - classified asaNoSQLdatabase which
eschews the traditional table-based relational database
structure in favour of JSON-likedocumentswith
dynamic schemas.
What is MongoDB
• Developed by software company 10gen (now
MongoDB Inc.)
• FastNoSQLschemaless database written inC++
• Document-Oriented Storage
o JSON-styledocuments with dynamicschemas
• Full Index Support
o Index on anyattribute
o Replication & HighAvailability
• Auto-Sharding
o Scalehorizontally without compromisingfunctionality
MongoDB RDBMS
Collection Table
Document Row
Index Index
Embedded Document Join
Reference Foreign Key
Example
>db.mycol.insert({ _id: ObjectId(7df78ad8902c), title:
'MongoDB Overview', description: 'MongoDB is no sql
database', by: 'tutorials point', url:
'http://www.tutorialspoint. com', tags: ['mongodb',
'database', 'NoSQL'], likes: 100 })
MongoDB - Document
MongoDB - Collection
MongoDB – Query a
database
Advantages And
Disadvantages
Advantages
• Lightening fast.
• Auto sharding.
• Replication is very easy.
• Youcanperform rich queries, cancreate on the fly
indexes with asingle command.
Disadvantages
• Very unreliable
• Indexes take up alot of RAM.
o B-tree indexes
Express JS
Expressis aminimal and flexible node.js web
application framework, providing arobustset of
features for building singleand multi-page, and hybrid
web applications.
What is Express ?
• Node JSbased webframework
• Basedon connect middleware
• Makesusageof Node JSeveneasier
• Easyto implement RESTAPI
• Easyto implement sessionmanagement
• Supports several template rendering engines (Jade,EJS)
o Supports partials -> soyou cansplit your HTMLin
fragments
• Asynchronous
• Implements MVCpattern
Express – What is it?
• Allows to set up middlewares to respond to HTTP
Requests.
• Defines arouting table which is used to perform
different action based on HTTPMethod and URL.
• Allows to dynamically render HTMLPagesbased on
passingarguments to templates.
Example
var express=require('express');
var app =express();
app.get('/', function (req,res)
{
res.send('Hello World!'); });
app.listen(3000, function ()
{
console.log('Example app listening on port 3000!');
});
Advantages And
Disadvantages
Advantages
• Regardlessof complexity, there should be veryfew
roadblocks if you know JavaScriptwell.
• Supports concurrency well.
• Fastand the performance is comparable with Golang
micro frameworks and Elixir's Phoenix.
Disadvantages
• There is no built in error handlingmethods.
What is Angular?
AngularJSis an open-sourceJavaScript
framework, maintained byGoogle,that assists with
running single-page applications.
• Its goal is to augment browser-based applications
with model–view–controller (MVC) capability, in an
effort to make both development andtestingeasier.
AngularJS
• JavaScriptframework developed by Google
• Basedon Model-View-* Pattern (client-side)
o MVC/MVVM
o Bi-Directional DataBinding
• Declarative Programming (focus on what – not thehow!)
o Directives are integrated in HTMLdirectly
o DOMManipulations completely hidden
• Great for Frontenddevelopment
o Great for SPA(Single PageApplications)
o Great for mobileapps
• Very modular and extensible
o Makestesting an ease
• Great Browser support (>IE8)
• Well documented
Two Way Data-binding
AngularJs directives
• ng-app
o Declares an element as a root element of the application
allowing behaviour to be modified through custom HTML
tags.
• ng-bind
o Automatically changesthe text of aHTMLelement tothe
value of agivenexpression.
• ng-model
o Similar to ng-bind, but allows two-way data bindingbetween
the view and thescope.
• ng-controller
o Specifies aJavaScriptcontroller classthat evaluates HTML
expressions.
AngularJs directives
• ng-repeat
o Instantiate an element once per item from acollection.
• ng-show& ng-hide
o Conditionally show or hide an element, depending onthe
value of abooleanexpression.
• ng-switch
o Conditionally instantiate one template from aset ofchoices,
depending on the value of aselectionexpression.
• ng-view
o Thebasedirective responsible for handling routes that
resolve JSONbefore rendering templates driven by specified
controllers.
Advantages and
Disadvantages
Advantages
•Fastdevelopment
•Makes developing SPAeasy
•Awesome performance
•Make appsscalable
Disadvantages
•Good for IOdriven apps only (not games)
Node JS
Node.js is aplatform built on Chrome'sJavaScript
runtime for easily building fast, scalablenetwork
applications.
• Node.js usesan event-driven, non-blockingI/O
model that makesit lightweight andefficient,
perfect for data-intensive real-time applicationsthat
run acrossdistributed devices.
What is Node JS?
• Written in C/C++
o Canalso useClibraries
• Built on top of Chrome’s V8engine – sopure
JavaScript!
o Therefore based on latest ECMAScript5
• Framework to build asynchronous I/Oapplications
• SingleThreaded – no concurrency bugs– no
deadlocks!
o Not internally though – but we’ll get to that
• Onenode process =one CPUCore
What is Node JS continue
• Caneasily handle 10k concurrent connections
o Doesn’t have any problems with concurrency
o Doesn’t create much overhead (CPU/Memory)
• Easilyscalable (just create acluster)
• Very fast (well, it’s mostly Ccode)
• Installation and first server start within lessthan5
minutes
o REST-APIthat replies to GETrequests canbe
implemented in lessthan 5 minutes aswell!
• It’s not awebframework!
Blocking I/O vs.
Non-Blocking I/O
Example
var http =require('http');
http.createServer(function (req, res)
{
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('HelloWorldn');
}).listen(80);
console.log('Server listening on port 80');
Advantage and
Disadvantage
Advantages
• Node.js is fast
• Theever-growing NPM
• Real-time web apps
• Productivity
Disadvantages
• JavaScript's semantics and culture
Disadvantages of mean
Stack
• There are still no general JScodingguidelines
• MongoDB is not asrobust asan SQLserver
o Thissecurity is what they sacrifice to gain speed
• Onceyou’ve created the first site with this
technology, it’s hard to go back tothe old approach
Conclusion
In the end, Mean is a full stack, Javascript, web
application framework. If you require a fast, easy,
simple way to create a modern, responsive, dynamic
web site then MEANwould be agreat solution.
PPT Source : Krishna Prasad
References
• http://www.mean.io
• https://angularjs.org
• http://mongodb.org
• https://nodejs.org
• http://expressjs.com
• http://slideshare.net
Any Questions ??
THANK YOU

What is Mean Stack Development ?

  • 1.
  • 2.
    Agenda • Introduction • WhatisLAMP? • Requirements for amodernweb • What isMEAN? • What isMongoDB? • What isExpress? • What is AngularJS? • What isNode.JS? • Disadvantages of MEANSTACK • Conclusion • Any Questions?
  • 3.
    Introduction • MEAN isan opinionated framework which simplifies full stack JavaScript and accelerates web application development. • MEAN represents a major shift in architecture and mental models — from relational databases to NoSQL and from server-side Model-View-Controller to client-side, single-pageapplications. • MEAN is an acronym for Mongo DB, Express JS,Angular JSand Node.Js.
  • 4.
    What is LAMP? • Linux • Apache • MySQL • PHP • LAMPstack is apopular open source web platform commonly used to run dynamic web sites andservers. • It includes Linux,Apache, MySQL,and PHP/Python/Perl andis considered by many the platform of choice for development and deployment of high performance web applications which require asolid and reliable foundation.
  • 5.
    Problems with LAMP? •Apache is not the fastest web serveraround • It’s hard to write good-to-read, reusable and fastPHP code • Frontend works with other languages thanthe backend • Toomany conversions (XMLto PHPto HTML,model to SQL) • There is no separated server-side and client-side development
  • 6.
    Requirements for a modernweb? • Customers want fast web sites/fast responsetimes • No page reloads • Enterprises want to govirtual o Onebox +Severalvirtual images =>Shared Hardware o Systemwith minimal memory footprint/overhead needed • Asmany concurrent requests aspossible • Only load resources when needed (conditional loading) • Mobile/Responsive UIs
  • 7.
    What is MEANStack? MEAN Stack is a full-stack JavaScript solution that helps you build fast, robust and maintainable production web applications using MongoDB, Express, AngularJS,and Node.js.
  • 8.
    • 100%free ,100%Open Source • 100%JavaScript (+JSONandHTML) • 100%Web Standards • Consistent Models from the backend to the frontend and back • Useauniform language throughout your stack o JavaScript(the language of the web) o JSON(the data format of theweb) o No conversion needed for the database • UseJavaScriptwith agreat framework (compared to jQuery) • Allows to start with the complete frontend development first • Very low memoryfootprint/overhead
  • 9.
  • 10.
    MongoDB MongoDB is across-platformdocument-oriented database- classified asaNoSQLdatabase which eschews the traditional table-based relational database structure in favour of JSON-likedocumentswith dynamic schemas.
  • 11.
    What is MongoDB •Developed by software company 10gen (now MongoDB Inc.) • FastNoSQLschemaless database written inC++ • Document-Oriented Storage o JSON-styledocuments with dynamicschemas • Full Index Support o Index on anyattribute o Replication & HighAvailability • Auto-Sharding o Scalehorizontally without compromisingfunctionality
  • 12.
    MongoDB RDBMS Collection Table DocumentRow Index Index Embedded Document Join Reference Foreign Key
  • 13.
    Example >db.mycol.insert({ _id: ObjectId(7df78ad8902c),title: 'MongoDB Overview', description: 'MongoDB is no sql database', by: 'tutorials point', url: 'http://www.tutorialspoint. com', tags: ['mongodb', 'database', 'NoSQL'], likes: 100 })
  • 14.
  • 15.
  • 16.
  • 17.
    Advantages And Disadvantages Advantages • Lighteningfast. • Auto sharding. • Replication is very easy. • Youcanperform rich queries, cancreate on the fly indexes with asingle command. Disadvantages • Very unreliable • Indexes take up alot of RAM. o B-tree indexes
  • 18.
    Express JS Expressis aminimaland flexible node.js web application framework, providing arobustset of features for building singleand multi-page, and hybrid web applications.
  • 19.
    What is Express? • Node JSbased webframework • Basedon connect middleware • Makesusageof Node JSeveneasier • Easyto implement RESTAPI • Easyto implement sessionmanagement • Supports several template rendering engines (Jade,EJS) o Supports partials -> soyou cansplit your HTMLin fragments • Asynchronous • Implements MVCpattern
  • 20.
    Express – Whatis it? • Allows to set up middlewares to respond to HTTP Requests. • Defines arouting table which is used to perform different action based on HTTPMethod and URL. • Allows to dynamically render HTMLPagesbased on passingarguments to templates.
  • 21.
    Example var express=require('express'); var app=express(); app.get('/', function (req,res) { res.send('Hello World!'); }); app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
  • 22.
    Advantages And Disadvantages Advantages • Regardlessofcomplexity, there should be veryfew roadblocks if you know JavaScriptwell. • Supports concurrency well. • Fastand the performance is comparable with Golang micro frameworks and Elixir's Phoenix. Disadvantages • There is no built in error handlingmethods.
  • 23.
    What is Angular? AngularJSisan open-sourceJavaScript framework, maintained byGoogle,that assists with running single-page applications. • Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development andtestingeasier.
  • 24.
    AngularJS • JavaScriptframework developedby Google • Basedon Model-View-* Pattern (client-side) o MVC/MVVM o Bi-Directional DataBinding • Declarative Programming (focus on what – not thehow!) o Directives are integrated in HTMLdirectly o DOMManipulations completely hidden • Great for Frontenddevelopment o Great for SPA(Single PageApplications) o Great for mobileapps • Very modular and extensible o Makestesting an ease • Great Browser support (>IE8) • Well documented
  • 25.
  • 26.
    AngularJs directives • ng-app oDeclares an element as a root element of the application allowing behaviour to be modified through custom HTML tags. • ng-bind o Automatically changesthe text of aHTMLelement tothe value of agivenexpression. • ng-model o Similar to ng-bind, but allows two-way data bindingbetween the view and thescope. • ng-controller o Specifies aJavaScriptcontroller classthat evaluates HTML expressions.
  • 27.
    AngularJs directives • ng-repeat oInstantiate an element once per item from acollection. • ng-show& ng-hide o Conditionally show or hide an element, depending onthe value of abooleanexpression. • ng-switch o Conditionally instantiate one template from aset ofchoices, depending on the value of aselectionexpression. • ng-view o Thebasedirective responsible for handling routes that resolve JSONbefore rendering templates driven by specified controllers.
  • 28.
    Advantages and Disadvantages Advantages •Fastdevelopment •Makes developingSPAeasy •Awesome performance •Make appsscalable Disadvantages •Good for IOdriven apps only (not games)
  • 29.
    Node JS Node.js isaplatform built on Chrome'sJavaScript runtime for easily building fast, scalablenetwork applications. • Node.js usesan event-driven, non-blockingI/O model that makesit lightweight andefficient, perfect for data-intensive real-time applicationsthat run acrossdistributed devices.
  • 30.
    What is NodeJS? • Written in C/C++ o Canalso useClibraries • Built on top of Chrome’s V8engine – sopure JavaScript! o Therefore based on latest ECMAScript5 • Framework to build asynchronous I/Oapplications • SingleThreaded – no concurrency bugs– no deadlocks! o Not internally though – but we’ll get to that • Onenode process =one CPUCore
  • 31.
    What is NodeJS continue • Caneasily handle 10k concurrent connections o Doesn’t have any problems with concurrency o Doesn’t create much overhead (CPU/Memory) • Easilyscalable (just create acluster) • Very fast (well, it’s mostly Ccode) • Installation and first server start within lessthan5 minutes o REST-APIthat replies to GETrequests canbe implemented in lessthan 5 minutes aswell! • It’s not awebframework!
  • 32.
  • 33.
    Example var http =require('http'); http.createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('HelloWorldn'); }).listen(80); console.log('Server listening on port 80');
  • 34.
    Advantage and Disadvantage Advantages • Node.jsis fast • Theever-growing NPM • Real-time web apps • Productivity Disadvantages • JavaScript's semantics and culture
  • 35.
    Disadvantages of mean Stack •There are still no general JScodingguidelines • MongoDB is not asrobust asan SQLserver o Thissecurity is what they sacrifice to gain speed • Onceyou’ve created the first site with this technology, it’s hard to go back tothe old approach
  • 36.
    Conclusion In the end,Mean is a full stack, Javascript, web application framework. If you require a fast, easy, simple way to create a modern, responsive, dynamic web site then MEANwould be agreat solution. PPT Source : Krishna Prasad
  • 37.
    References • http://www.mean.io • https://angularjs.org •http://mongodb.org • https://nodejs.org • http://expressjs.com • http://slideshare.net
  • 38.
  • 39.