FULL STACK
MEAN STACK
Our Team
• V ASHOK RAJ (PSG COLLEGE OF TECHNOLOGY )
• S MIRRUDU BASHINI (PSG COLLEGE OF TECHNOLOGY)
• K RAKSHANA (PSG COLLEGE OF TECHNOLOGY)
• K RAM VIGNESH KUMAR (PSG COLLEGE OF TECHNOLOGY)
• V THILAKALAKASHMI (PSG COLLEGE OF TECHNOLOGY)
MASTER OF COMPUTER APPLICATIONS
HANDLED FACULTY: Dr.MANAVALAN (PROGRAM CO-ORDINATOR),
MASTER OF COMPUTER APPLICATIONS,
PSG COLLEGE OF TECHNOLOGY,Coimbatore
AGENDA
• Introduction
• Popular stacks
• MEAN stack
• Working of mean stack architecture
• Why Mean Stack ?
• Why not mean stack ?
• MongoDB
• Express JS
• AngularJS
• Node.js
• Developer survey 2019
• Why mean stack popular ?
• Who use mean stack ?
• conclusion
INTRODUCTION
• Development of both front end(client side) and back end(server side)
portions of web application.
• Like ,
• Program a Browser (using JavaScript, jQuery, Angular, or Vue)
• Program a Server (using PHP, ASP, Python, or Node)
• Program a Database ( using SQL, SQLite, or MongoDB)
Front-end : HTML, CSS, Bootstrap, JS, HTML DOM, jQuery, Angular, GraphQL, etc.,
Back-end : Python, PHP, ASP, C#, Node.JS, SQL, REST, Firebase, GO, Ruby, etc.,
POPULAR STACKS
javascript
LAMP
LEMP
MEANDJANGO
RUBY
LAMP
• Linux
• Nginx
• MySQL
• PHP
LEMP
• Linux
• Apache
• MySQL
• PHP
MEAN
• MongoDB
• ExpressJS
• AngularJS
• NodeJS
DJANGO
• Python
• Django
• MySQL
• Ruby
• SQLite
• PHP
RUBY
LAMP
RUBY LEMP
MEANDJANGO
ADVANTAGES
• It master all the techniques involved in a development project
• It make a prototype very rapidly
• Reduce the cost of the project
• Reduce the time used for team communication
• Switch between front and back end development based on
requirements
• We can better understand all aspects of new and upcoming
technologies
DISADVANTAGES
• The solution chosen can be wrong for the project
• The solution chosen can be dependent on developer skills
• The solution can generate a key person risk
• Being a full stack developer is increasingly complex
8
9
What is JS ?
• JavaScript is most commonly used as a client side scripting
language.
• JavaScript code is written into an HTML page. When a user
requests an HTML page with JavaScript in it, the script is
sent to the browser and it's up to the browser to do
something with it
010
MEAN STACK
Introduction
• Collection of java script based technologies used to develop single
page Web Application
• Mean stack developers take care of everything
• Mean is an acronym for MongoDB, ExpressJS, AngularJS, & Node.JS
1
1
JSEXPRESS
MongoDB ExpressJS Angular NodeJS
1
2
Back-end Web
Frame work
Front-end
Web Frame
work
Back-end
Runtime environment
Database System
WORKING OF MEAN STACK ARCHITECTURE
1
3
MongoDB Express.js
Angular.j
s
Node.js
popular
database
manager which
implements a
NoSQL structure
framework
which supports
and is used to
host Node.js
projects
framework for
building apps. It
builds the classic
HTML
framework style
and extends it to
web apps
Runtime
environment,
which runs
server-side web
applications, i.e.
it works on the
back-end
MongoDB Express.js
popular
database
manager which
implements a
NoSQL structure
framework
which supports
and is used to
host Node.js
projects
WORKING OF MEAN STACK ARCHITECTURE 14
Why Mean Stack
?
• Common language for both client-side and server-side
• Offers a modern approach to web development
• Its comes with powerful suite of testing tool
• Infinite set of module library
• Highly flexible
• Cost effective
• Time saver
15
Why not Mean Stack
?
• There are still no general JS coding
guidelines
• MongoDB is not as robust as an SQL
server
• Once you’ve created the first site with this
technology, it’s hard to go back to the old
approach
16
Mongo DB
OPEN SOURCE AND HIGH PERFORMANCE DATABSE
17
M E A N
Introduction MongoDB
• Cross Platform Document oriented Database
• No SQL Database
• ORM
• Non-Structured
• JSON-style documents with dynamic schemas
18
18
M E A N
• Started in 2007 when company build a PSS like (Windows Azur)
• Developed by software company 10gen (now MongoDB Inc.)
• It was initially developed as a PASS later in February 11, 2009
introduced in open-source server
• Now that was maintained and supported by MongoDB Inc.
• Licensed under the Server Side Public License (SSPL)
• Latest version MongoDB 4.2 stable released on Aug 13,2019
HISTORY
19
19
M E A N
What is NoSQL Database ?
• Key-values stores
• Column stores
• Document Databases
• GDB
• It is non-relational Database
• Dynamic schema
• Unstructured query language
20
20
M E A N
DIFFERENCE MySQL MongoDB
Data Store
Structure
Data base
Indexes
Deployment
DATA BASE
DATA STORE
STRUCTURE
INDEXES
DEPLOYMENT
A relational
database is a digital
database based on
the relational
model of data
A non-relational
database is
a database that
does not use the
tabular schema of
rows and columns
to store data
In MongoDB, each
individual records
are stored
as document
In MySQL, each
individual records
are stored as ‘rows’
in a table.
MySQL stores its
data in tables
and uses the
SQL to access
the data
In MongoDB, data
is stored in JSON-
like documents
that can have
varied structures
if an index is not
defined, the
database engine
must scan the
entire table to find
all relevant rows.
If an index is not found,
every document within a
collection must be
scanned to select the
documents that provide a
match to the query
statement
Written in
C and C++
Written in
C and C++
21
M E A N
Collection
• Collections of MongoDB is like table in SQL
• It is a Dynamic schema
• There is no '$' or '0' in name of collection
• Capped collections
22
22
db.post.insert([
{
title: ‘Full Stack ',
description: ‘Mean Stack',
by: ‘Team 2',
tags: ['mongodb', ‘ExpressJS', ‘Angular 2’, ’nodeJS’]
}
])
M E A N
Create new Collection
{
title : Full stack
description : Mean Stack
by : Team 2
tags : [‘mongodb’,’ExpressJS’,
‘Angular 2’, ‘nodeJS’]
}
title: ‘Full Stack ',
KEY VALU
E
23
M E A N
Features of MongoDB
24
• No SQL
• JSON everywhere
• Fast and iterative
• Replication and availability
• Lightweight
M E A N
Advantages of MongoDB
• Flexible Database
• Sharding
• High Speed
• High Availability
• Scalability
• Ad-hoc Query Support
• Easy Environment Setup
• Full Technical Support
• Joins not Supported
• High Memory Usage
• Index takes up a lot of RAM
• Very unreliable
Disadvantages of
MongoDB
25
EXPRESS JS
High performance, High class web development for Node.js
M E A N
JSEXPRESS27
27
What is Express JS?
• It’s a web framework that helps to structure a web application to
handle multiple different http requests at a specific URL .
• Express.js is a modular web framework for Node.js
• Express is a minimal, open source and flexible Node.js web app
framework designed to make developing websites, web apps, & API’s
much easier.
M E A N
JSEXPRESS
28
Why to Use Express JS?
• Express helps to respond the requests with route support
so that you may write responses to specific URLs.
• Express.js simplifies development and makes it easier to
write secure, modular and fast applications
• It’s very simple and it’s open-source
M E A N
JSEXPRESS
29
Architecture of ExpressJS
M E A N
JSEXPRESS
30
• Express.js is a light-weight Web framework for Node.js
• Express supports MVC Architecture with little bit of work.
• It used to build RESTful APIs faster.
• It use many templating languages like Jade or EJS which reduce
the amount of HTML code you have to write for a page.
• Has support for NoSQL databases out of the box. And pretty
simple implementing it too. (can also use relation Databases)
features of Express.js
NGULARJS
JavaScript-based open-source front-end web framework dynamic web apps
M E A N 32
• AngularJS is a client side JavaScript framework to
develop a dynamic web application.
• AngularJS changes static HTML to dynamic HTML.
• It extends the ability of HTML by adding built-in
attributes and components.
• provides an ability to create custom attributes using
simple JavaScript.
What is AngularJS
?
M E A N 33
History of AngularJS
• AngularJS was created, as a side project, in 2009 by two developers, Misko
Hevery and Adam Abrons.
• Hevery started working on a project at Google.
• The application from 17,000 lines to 1,500 lines by his GetAngular.
• GetAngular project into a new project, named it AngularJS
• The idea turned out very well, and the project is now officially supported
by Google.
M E A N 34
AngularJs Architecture
M E A N 35
Controlle
r
Model View
The model is
responsible for man-
-aging application
data.the model
responds to the
request from view
and to the
instructions from
controller to update
itself
A presentation of
data in a particular
format, triggered
by the controller's
decision to present
the data
Controller responds
to user input and
performs
interaction on the
data model object
M E A N 36
Features of AngularJs
• Two-way binding – AngularJs keeps the data and
presentation layer in sync.
• Angular supports testing, both Unit Testing, and Integration
Testing.
• Angular can take care of routing which means moving from
one view to another
• directives help in extending the functionality of existing
HTML elements to give more power to your web application.
Open-source, Cross-platform, JavaScript runtime environment
M E A N 38
• Node.js uses a module architecture to simplify the creation of complex
applications.
• Every function in Node.js is asynchronous
• Node.js is only an run time environment
• Easily build the Scalable network application
• It uses a single threaded no deadlock
Introduction
M E A N 39
Node.js single Threaded
architecture
M E A N 40
Node.js PHP
You need to build a dynamic single
page application
A blog or e-commerce website with
CMS
Real-Time Applications such as instant
messengers
Ease of deployment and integration
You are using frontend technologies
such as – Angular and React
Goes perfectly with LAMP stack (Linux
Apache, MySQL, PHP)
Fit for : MEAN/MERN Fit for : LAMP
M E A N 41
Advantages of Node.js
• Performance and Scalability
• FullStack JavaScript
• Freedom and Flexibility
• Speed and efficient
• No buffering
• Fast development cycle
Disadvantages of
Node.js
• Not ideal for Heavy-Computation Apps
• Comparatively Immature Environment
42DEVELOPER SURVEY 2019
43DEVELOPER SURVEY 2019
44DEVELOPER SURVEY 2019
45Why choose MEAN ?
MongoDb, ExpressJS, AngularJS,
Node.js
MongoDb, ExpressJS, React, Node.js
Helps to resist
unnecessary grunt work, thus
keeping the web application
development much organized
With the JavaScript stack, developers
only need to be proficient in
JavaScript and JSON.
VsMEAN STACK MERN STACK
WHY MEAN STACK IS POPULAR ?
JAVA SCRIPT HIGH COST OPEN SOURCE
46
Here JavaScript is used for
both client side and server
side. As the whole
program is written in
JavaScript
If a company is at the tender stage,
and not able to afford a lot and
MEAN stack becomes the right
solution. With MEAN stack onboard,
you don’t need to hire any specialist
but rather do it all yourself
The technologies present in
the MEAN stack are
completely free and open-
source. And so, no expenses
are required in order to
develop an application with
MEAN stack
47WHO’S USING THE MEAN STACK?
• PayPal, Dow Jones and Uber have already placed a business
Node.js solutions into production
• Yahoo, HP and many others have planned their next generation
products on this MEAN stack platform
48Reference
https://medium.com/@jeremyvsjeremy/what-is-the-mean-stack-
9d11ae2cd384
https://www.w3schools.com/whatis/whatis_fullstack.asp
https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-
wanted
THANK YOU!!!

FULL stack -> MEAN stack

  • 1.
  • 2.
    Our Team • VASHOK RAJ (PSG COLLEGE OF TECHNOLOGY ) • S MIRRUDU BASHINI (PSG COLLEGE OF TECHNOLOGY) • K RAKSHANA (PSG COLLEGE OF TECHNOLOGY) • K RAM VIGNESH KUMAR (PSG COLLEGE OF TECHNOLOGY) • V THILAKALAKASHMI (PSG COLLEGE OF TECHNOLOGY) MASTER OF COMPUTER APPLICATIONS HANDLED FACULTY: Dr.MANAVALAN (PROGRAM CO-ORDINATOR), MASTER OF COMPUTER APPLICATIONS, PSG COLLEGE OF TECHNOLOGY,Coimbatore
  • 3.
    AGENDA • Introduction • Popularstacks • MEAN stack • Working of mean stack architecture • Why Mean Stack ? • Why not mean stack ? • MongoDB • Express JS • AngularJS • Node.js • Developer survey 2019 • Why mean stack popular ? • Who use mean stack ? • conclusion
  • 4.
    INTRODUCTION • Development ofboth front end(client side) and back end(server side) portions of web application. • Like , • Program a Browser (using JavaScript, jQuery, Angular, or Vue) • Program a Server (using PHP, ASP, Python, or Node) • Program a Database ( using SQL, SQLite, or MongoDB) Front-end : HTML, CSS, Bootstrap, JS, HTML DOM, jQuery, Angular, GraphQL, etc., Back-end : Python, PHP, ASP, C#, Node.JS, SQL, REST, Firebase, GO, Ruby, etc.,
  • 5.
    POPULAR STACKS javascript LAMP LEMP MEANDJANGO RUBY LAMP • Linux •Nginx • MySQL • PHP LEMP • Linux • Apache • MySQL • PHP MEAN • MongoDB • ExpressJS • AngularJS • NodeJS DJANGO • Python • Django • MySQL • Ruby • SQLite • PHP RUBY LAMP RUBY LEMP MEANDJANGO
  • 6.
    ADVANTAGES • It masterall the techniques involved in a development project • It make a prototype very rapidly • Reduce the cost of the project • Reduce the time used for team communication • Switch between front and back end development based on requirements • We can better understand all aspects of new and upcoming technologies
  • 7.
    DISADVANTAGES • The solutionchosen can be wrong for the project • The solution chosen can be dependent on developer skills • The solution can generate a key person risk • Being a full stack developer is increasingly complex
  • 8.
  • 9.
    9 What is JS? • JavaScript is most commonly used as a client side scripting language. • JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it
  • 10.
  • 11.
    Introduction • Collection ofjava script based technologies used to develop single page Web Application • Mean stack developers take care of everything • Mean is an acronym for MongoDB, ExpressJS, AngularJS, & Node.JS 1 1
  • 12.
    JSEXPRESS MongoDB ExpressJS AngularNodeJS 1 2 Back-end Web Frame work Front-end Web Frame work Back-end Runtime environment Database System
  • 13.
    WORKING OF MEANSTACK ARCHITECTURE 1 3 MongoDB Express.js Angular.j s Node.js popular database manager which implements a NoSQL structure framework which supports and is used to host Node.js projects framework for building apps. It builds the classic HTML framework style and extends it to web apps Runtime environment, which runs server-side web applications, i.e. it works on the back-end MongoDB Express.js popular database manager which implements a NoSQL structure framework which supports and is used to host Node.js projects
  • 14.
    WORKING OF MEANSTACK ARCHITECTURE 14
  • 15.
    Why Mean Stack ? •Common language for both client-side and server-side • Offers a modern approach to web development • Its comes with powerful suite of testing tool • Infinite set of module library • Highly flexible • Cost effective • Time saver 15
  • 16.
    Why not MeanStack ? • There are still no general JS coding guidelines • MongoDB is not as robust as an SQL server • Once you’ve created the first site with this technology, it’s hard to go back to the old approach 16
  • 17.
    Mongo DB OPEN SOURCEAND HIGH PERFORMANCE DATABSE 17
  • 18.
    M E AN Introduction MongoDB • Cross Platform Document oriented Database • No SQL Database • ORM • Non-Structured • JSON-style documents with dynamic schemas 18 18
  • 19.
    M E AN • Started in 2007 when company build a PSS like (Windows Azur) • Developed by software company 10gen (now MongoDB Inc.) • It was initially developed as a PASS later in February 11, 2009 introduced in open-source server • Now that was maintained and supported by MongoDB Inc. • Licensed under the Server Side Public License (SSPL) • Latest version MongoDB 4.2 stable released on Aug 13,2019 HISTORY 19 19
  • 20.
    M E AN What is NoSQL Database ? • Key-values stores • Column stores • Document Databases • GDB • It is non-relational Database • Dynamic schema • Unstructured query language 20 20
  • 21.
    M E AN DIFFERENCE MySQL MongoDB Data Store Structure Data base Indexes Deployment DATA BASE DATA STORE STRUCTURE INDEXES DEPLOYMENT A relational database is a digital database based on the relational model of data A non-relational database is a database that does not use the tabular schema of rows and columns to store data In MongoDB, each individual records are stored as document In MySQL, each individual records are stored as ‘rows’ in a table. MySQL stores its data in tables and uses the SQL to access the data In MongoDB, data is stored in JSON- like documents that can have varied structures if an index is not defined, the database engine must scan the entire table to find all relevant rows. If an index is not found, every document within a collection must be scanned to select the documents that provide a match to the query statement Written in C and C++ Written in C and C++ 21
  • 22.
    M E AN Collection • Collections of MongoDB is like table in SQL • It is a Dynamic schema • There is no '$' or '0' in name of collection • Capped collections 22 22
  • 23.
    db.post.insert([ { title: ‘Full Stack', description: ‘Mean Stack', by: ‘Team 2', tags: ['mongodb', ‘ExpressJS', ‘Angular 2’, ’nodeJS’] } ]) M E A N Create new Collection { title : Full stack description : Mean Stack by : Team 2 tags : [‘mongodb’,’ExpressJS’, ‘Angular 2’, ‘nodeJS’] } title: ‘Full Stack ', KEY VALU E 23
  • 24.
    M E AN Features of MongoDB 24 • No SQL • JSON everywhere • Fast and iterative • Replication and availability • Lightweight
  • 25.
    M E AN Advantages of MongoDB • Flexible Database • Sharding • High Speed • High Availability • Scalability • Ad-hoc Query Support • Easy Environment Setup • Full Technical Support • Joins not Supported • High Memory Usage • Index takes up a lot of RAM • Very unreliable Disadvantages of MongoDB 25
  • 26.
    EXPRESS JS High performance,High class web development for Node.js
  • 27.
    M E AN JSEXPRESS27 27 What is Express JS? • It’s a web framework that helps to structure a web application to handle multiple different http requests at a specific URL . • Express.js is a modular web framework for Node.js • Express is a minimal, open source and flexible Node.js web app framework designed to make developing websites, web apps, & API’s much easier.
  • 28.
    M E AN JSEXPRESS 28 Why to Use Express JS? • Express helps to respond the requests with route support so that you may write responses to specific URLs. • Express.js simplifies development and makes it easier to write secure, modular and fast applications • It’s very simple and it’s open-source
  • 29.
    M E AN JSEXPRESS 29 Architecture of ExpressJS
  • 30.
    M E AN JSEXPRESS 30 • Express.js is a light-weight Web framework for Node.js • Express supports MVC Architecture with little bit of work. • It used to build RESTful APIs faster. • It use many templating languages like Jade or EJS which reduce the amount of HTML code you have to write for a page. • Has support for NoSQL databases out of the box. And pretty simple implementing it too. (can also use relation Databases) features of Express.js
  • 31.
  • 32.
    M E AN 32 • AngularJS is a client side JavaScript framework to develop a dynamic web application. • AngularJS changes static HTML to dynamic HTML. • It extends the ability of HTML by adding built-in attributes and components. • provides an ability to create custom attributes using simple JavaScript. What is AngularJS ?
  • 33.
    M E AN 33 History of AngularJS • AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. • Hevery started working on a project at Google. • The application from 17,000 lines to 1,500 lines by his GetAngular. • GetAngular project into a new project, named it AngularJS • The idea turned out very well, and the project is now officially supported by Google.
  • 34.
    M E AN 34 AngularJs Architecture
  • 35.
    M E AN 35 Controlle r Model View The model is responsible for man- -aging application data.the model responds to the request from view and to the instructions from controller to update itself A presentation of data in a particular format, triggered by the controller's decision to present the data Controller responds to user input and performs interaction on the data model object
  • 36.
    M E AN 36 Features of AngularJs • Two-way binding – AngularJs keeps the data and presentation layer in sync. • Angular supports testing, both Unit Testing, and Integration Testing. • Angular can take care of routing which means moving from one view to another • directives help in extending the functionality of existing HTML elements to give more power to your web application.
  • 37.
  • 38.
    M E AN 38 • Node.js uses a module architecture to simplify the creation of complex applications. • Every function in Node.js is asynchronous • Node.js is only an run time environment • Easily build the Scalable network application • It uses a single threaded no deadlock Introduction
  • 39.
    M E AN 39 Node.js single Threaded architecture
  • 40.
    M E AN 40 Node.js PHP You need to build a dynamic single page application A blog or e-commerce website with CMS Real-Time Applications such as instant messengers Ease of deployment and integration You are using frontend technologies such as – Angular and React Goes perfectly with LAMP stack (Linux Apache, MySQL, PHP) Fit for : MEAN/MERN Fit for : LAMP
  • 41.
    M E AN 41 Advantages of Node.js • Performance and Scalability • FullStack JavaScript • Freedom and Flexibility • Speed and efficient • No buffering • Fast development cycle Disadvantages of Node.js • Not ideal for Heavy-Computation Apps • Comparatively Immature Environment
  • 42.
  • 43.
  • 44.
  • 45.
    45Why choose MEAN? MongoDb, ExpressJS, AngularJS, Node.js MongoDb, ExpressJS, React, Node.js Helps to resist unnecessary grunt work, thus keeping the web application development much organized With the JavaScript stack, developers only need to be proficient in JavaScript and JSON. VsMEAN STACK MERN STACK
  • 46.
    WHY MEAN STACKIS POPULAR ? JAVA SCRIPT HIGH COST OPEN SOURCE 46 Here JavaScript is used for both client side and server side. As the whole program is written in JavaScript If a company is at the tender stage, and not able to afford a lot and MEAN stack becomes the right solution. With MEAN stack onboard, you don’t need to hire any specialist but rather do it all yourself The technologies present in the MEAN stack are completely free and open- source. And so, no expenses are required in order to develop an application with MEAN stack
  • 47.
    47WHO’S USING THEMEAN STACK? • PayPal, Dow Jones and Uber have already placed a business Node.js solutions into production • Yahoo, HP and many others have planned their next generation products on this MEAN stack platform
  • 48.
  • 49.