Kishore Chandra
UI Specialist & Full Stack Developer
M E A N
Agenda
• Introduction
• What is LAMP?
• Requirements for a modern web
• What is MEAN?
• What is MongoDB?
• What is Express?
• What is Angular JS?
• What is Node.JS?
• Disadvantages of MEAN STACK
• Conclusion
• Any Questions?
Introduction
• MEAN is an opinionated full stack JavaScript
framework which simplifies 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-page applications.
• MEAN is an acronym for Mongo DB, Express
JS, Angular JS and Node. Js.
What is LAMP ?
• Linux
• Apache
• MySQL
• PHP
• LAMP stack is a popular open source web platform commonly
used to run dynamic web sites and servers.
• It includes Linux, Apache, MySQL, and PHP/Python/Perl and is
considered by many the platform of choice for development
and deployment of high performance web applications which
require a solid and reliable foundation.
Problems with LAMP?
• Apache is not the fastest web server around
• It’s hard to write good-to-read, reusable and fast PHP
code
• Frontend works with other languages than the
backend
• Too many conversions (XML to PHP to 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 response times
• No page reloads
• Enterprises want to go virtual
o One box + Several virtual images => Shared Hardware
o System with minimal memory footprint/overhead needed
• As many concurrent requests as possible
• 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% Java Script (+JSON and HTML)
• 100% Web Standards
• Consistent Models from the backend to the frontend and back
• Use a uniform language throughout your stack
o JavaScript (the language of the web)
o JSON (the data format of the web)
o No conversion needed for the database
• Use JavaScript with a great framework (compared to jQuery)
• Allows to start with the complete frontend development first
• Very low memory footprint/overhead
Processing model
MongoDB
MongoDB is a cross-platform document-oriented
database - classified as a NoSQL database which
eschews the traditional table-based relational database
structure in favour of JSON-like documents with
dynamic schemas.
What is MongoDB
• Developed by software company 10gen (now
MongoDB Inc.)
• Fast NoSQL schemaless database written in C++
• Document-Oriented Storage
o JSON-style documents with dynamic schemas
• Full Index Support
o Index on any attribute
o Replication & High Availability
• Auto-Sharding
o Scale horizontally without compromising functionality
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.
• You can perform rich queries, can create on the fly
indexes with a single command.
Disadvantages
• Very unreliable
• Indexes take up a lot of RAM.
o B-tree indexes
Express JS
Express is a minimal and flexible node.js web
application framework, providing a robust set of
features for building single and multi-page, and hybrid
web applications.
What is Express ?
• Node JS based web framework
• Based on connect middleware
• Makes usage of Node JS even easier
• Easy to implement REST API
• Easy to implement session management
• Supports several template rendering engines (Jade, EJS)
o Supports partials -> so you can split your HTML in
fragments
• Asynchronous
• Implements MVC pattern
Express – What is it?
• Allows to set up middlewares to respond to HTTP
Requests.
• Defines a routing table which is used to perform
different action based on HTTP Method and URL.
• Allows to dynamically render HTML Pages based on
passing arguments 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
• Regardless of complexity, there should be very few
roadblocks if you know JavaScript well.
• Supports concurrency well.
• Fast and the performance is comparable with Golang
micro frameworks and Elixir's Phoenix.
Disadvantages
• There is no built in error handling methods.
What is Angular?
AngularJS is an open-source JavaScript
framework, maintained by Google, 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 and testing easier.
AngularJS
• JavaScript framework developed by Google
• Based on Model-View-* Pattern (client-side)
o MVC/MVVM
o Bi-Directional Data Binding
• Declarative Programming (focus on what – not the how!)
o Directives are integrated in HTML directly
o DOM Manipulations completely hidden
• Great for Frontend development
o Great for SPA (Single Page Applications)
o Great for mobile apps
• Very modular and extensible
o Makes testing 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 changes the text of a HTML element to the
value of a given expression.
• ng-model
o Similar to ng-bind, but allows two-way data binding between
the view and the scope.
• ng-controller
o Specifies a JavaScript controller class that evaluates HTML
expressions.
AngularJs directives
• ng-repeat
o Instantiate an element once per item from a collection.
• ng-show & ng-hide
o Conditionally show or hide an element, depending on the
value of a boolean expression.
• ng-switch
o Conditionally instantiate one template from a set of choices,
depending on the value of a selection expression.
• ng-view
o The base directive responsible for handling routes that
resolve JSON before rendering templates driven by specified
controllers.
Advantages and
Disadvantages
Advantages
• Fast development
• Makes developing SPA easy
• Awesome performance
• Make apps scalable
Disadvantages
• Good for IO driven apps only (not games)
Node JS
Node.js is a platform built on Chrome's JavaScript
runtime for easily building fast, scalable network
applications.
• Node.js uses an event-driven, non-blocking I/O
model that makes it lightweight and efficient,
perfect for data-intensive real-time applications that
run across distributed devices.
What is Node JS ?
• Written in C/C++
o Can also use C libraries
• Built on top of Chrome’s V8 engine – so pure
JavaScript!
o Therefore based on latest ECMAScript 5
• Framework to build asynchronous I/O applications
• Single Threaded – no concurrency bugs – no
deadlocks!
o Not internally though – but we’ll get to that
• One node process = one CPU Core
What is Node JS continue
• Can easily handle 10k concurrent connections
o Doesn’t have any problems with concurrency
o Doesn’t create much overhead (CPU/Memory)
• Easily scalable (just create a cluster)
• Very fast (well, it’s mostly C code)
• Installation and first server start within less than 5
minutes
o REST-API that replies to GET requests can be
implemented in less than 5 minutes as well!
• It’s not a web framework!
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
• The ever-growing NPM
• Real-time web apps
• Productivity
Disadvantages
• JavaScript's semantics and culture
Disadvantages of mean
Stack
• There are still no general JS coding guidelines
• MongoDB is not as robust as an SQL server
o This security is what they sacrifice to gain speed
• Once you’ve created the first site with this
technology, it’s hard to go back to the 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 MEAN would be a great solution.
THANK YOU
Any Questions ? ?
THANK YOU

Meanstack Introduction by Kishore Chandra

  • 1.
    Kishore Chandra UI Specialist& Full Stack Developer M E A N
  • 2.
    Agenda • Introduction • Whatis LAMP? • Requirements for a modern web • What is MEAN? • What is MongoDB? • What is Express? • What is Angular JS? • What is Node.JS? • Disadvantages of MEAN STACK • Conclusion • Any Questions?
  • 3.
    Introduction • MEAN isan opinionated full stack JavaScript framework which simplifies 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-page applications. • MEAN is an acronym for Mongo DB, Express JS, Angular JS and Node. Js.
  • 4.
    What is LAMP? • Linux • Apache • MySQL • PHP • LAMP stack is a popular open source web platform commonly used to run dynamic web sites and servers. • It includes Linux, Apache, MySQL, and PHP/Python/Perl and is considered by many the platform of choice for development and deployment of high performance web applications which require a solid and reliable foundation.
  • 5.
    Problems with LAMP? •Apache is not the fastest web server around • It’s hard to write good-to-read, reusable and fast PHP code • Frontend works with other languages than the backend • Too many conversions (XML to PHP to 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 response times • No page reloads • Enterprises want to go virtual o One box + Several virtual images => Shared Hardware o System with minimal memory footprint/overhead needed • As many concurrent requests as possible • 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% Java Script (+JSON and HTML) • 100% Web Standards • Consistent Models from the backend to the frontend and back • Use a uniform language throughout your stack o JavaScript (the language of the web) o JSON (the data format of the web) o No conversion needed for the database • Use JavaScript with a great framework (compared to jQuery) • Allows to start with the complete frontend development first • Very low memory footprint/overhead
  • 9.
  • 10.
    MongoDB MongoDB is across-platform document-oriented database - classified as a NoSQL database which eschews the traditional table-based relational database structure in favour of JSON-like documents with dynamic schemas.
  • 11.
    What is MongoDB •Developed by software company 10gen (now MongoDB Inc.) • Fast NoSQL schemaless database written in C++ • Document-Oriented Storage o JSON-style documents with dynamic schemas • Full Index Support o Index on any attribute o Replication & High Availability • Auto-Sharding o Scale horizontally without compromising functionality
  • 12.
    MongoDB RDBMS Collection Table DocumentRow Index Index Embedded Document Join Reference Foreign Key
  • 13.
    Example >db.mycol.insert({ _id: ObjectId(7df78ad8902c), title: 'MongoDBOverview', 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. • You can perform rich queries, can create on the fly indexes with a single command. Disadvantages • Very unreliable • Indexes take up a lot of RAM. o B-tree indexes
  • 18.
    Express JS Express isa minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.
  • 19.
    What is Express? • Node JS based web framework • Based on connect middleware • Makes usage of Node JS even easier • Easy to implement REST API • Easy to implement session management • Supports several template rendering engines (Jade, EJS) o Supports partials -> so you can split your HTML in fragments • Asynchronous • Implements MVC pattern
  • 20.
    Express – Whatis it? • Allows to set up middlewares to respond to HTTP Requests. • Defines a routing table which is used to perform different action based on HTTP Method and URL. • Allows to dynamically render HTML Pages based on passing arguments 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 • Regardlessof complexity, there should be very few roadblocks if you know JavaScript well. • Supports concurrency well. • Fast and the performance is comparable with Golang micro frameworks and Elixir's Phoenix. Disadvantages • There is no built in error handling methods.
  • 23.
    What is Angular? AngularJSis an open-source JavaScript framework, maintained by Google, 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 and testing easier.
  • 24.
    AngularJS • JavaScript frameworkdeveloped by Google • Based on Model-View-* Pattern (client-side) o MVC/MVVM o Bi-Directional Data Binding • Declarative Programming (focus on what – not the how!) o Directives are integrated in HTML directly o DOM Manipulations completely hidden • Great for Frontend development o Great for SPA (Single Page Applications) o Great for mobile apps • Very modular and extensible o Makes testing 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 changes the text of a HTML element to the value of a given expression. • ng-model o Similar to ng-bind, but allows two-way data binding between the view and the scope. • ng-controller o Specifies a JavaScript controller class that evaluates HTML expressions.
  • 27.
    AngularJs directives • ng-repeat oInstantiate an element once per item from a collection. • ng-show & ng-hide o Conditionally show or hide an element, depending on the value of a boolean expression. • ng-switch o Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. • ng-view o The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
  • 28.
    Advantages and Disadvantages Advantages • Fastdevelopment • Makes developing SPA easy • Awesome performance • Make apps scalable Disadvantages • Good for IO driven apps only (not games)
  • 29.
    Node JS Node.js isa platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. • Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
  • 30.
    What is NodeJS ? • Written in C/C++ o Can also use C libraries • Built on top of Chrome’s V8 engine – so pure JavaScript! o Therefore based on latest ECMAScript 5 • Framework to build asynchronous I/O applications • Single Threaded – no concurrency bugs – no deadlocks! o Not internally though – but we’ll get to that • One node process = one CPU Core
  • 31.
    What is NodeJS continue • Can easily handle 10k concurrent connections o Doesn’t have any problems with concurrency o Doesn’t create much overhead (CPU/Memory) • Easily scalable (just create a cluster) • Very fast (well, it’s mostly C code) • Installation and first server start within less than 5 minutes o REST-API that replies to GET requests can be implemented in less than 5 minutes as well! • It’s not a web framework!
  • 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 • The ever-growing NPM • Real-time web apps • Productivity Disadvantages • JavaScript's semantics and culture
  • 35.
    Disadvantages of mean Stack •There are still no general JS coding guidelines • MongoDB is not as robust as an SQL server o This security is what they sacrifice to gain speed • Once you’ve created the first site with this technology, it’s hard to go back to the 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 MEAN would be a great solution.
  • 37.
  • 38.
  • 39.