SlideShare a Scribd company logo
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!!!

More Related Content

What's hot

[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 

What's hot (20)

ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Introduction to MERN
Introduction to MERNIntroduction to MERN
Introduction to MERN
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation
 
NodeJS - Server Side JS
NodeJS - Server Side JS NodeJS - Server Side JS
NodeJS - Server Side JS
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Express js
Express jsExpress js
Express js
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
React js
React jsReact js
React js
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Expressjs
ExpressjsExpressjs
Expressjs
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
 

Similar to FULL stack -> MEAN stack

web development with mern stack in power point
web development with mern stack in power pointweb development with mern stack in power point
web development with mern stack in power point
RAMKUMARRIT20
 
Final year presentation topicssssss in 1
Final year presentation topicssssss in 1Final year presentation topicssssss in 1
Final year presentation topicssssss in 1
RAMKUMARRIT20
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JS
Amit Kumar
 

Similar to FULL stack -> MEAN stack (20)

Mean stack
Mean stackMean stack
Mean stack
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Meanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraMeanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore Chandra
 
Overview of MEAN Stack development
Overview of MEAN Stack developmentOverview of MEAN Stack development
Overview of MEAN Stack development
 
web development with mern stack in power point
web development with mern stack in power pointweb development with mern stack in power point
web development with mern stack in power point
 
Final year presentation topicssssss in 1
Final year presentation topicssssss in 1Final year presentation topicssssss in 1
Final year presentation topicssssss in 1
 
Introduction to MERN Stack
Introduction to MERN StackIntroduction to MERN Stack
Introduction to MERN Stack
 
Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts
 
Building Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN StackBuilding Modern Web Apps with MEAN Stack
Building Modern Web Apps with MEAN Stack
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
recenttrendtechnology-2112N18132657.pptx
recenttrendtechnology-2112N18132657.pptxrecenttrendtechnology-2112N18132657.pptx
recenttrendtechnology-2112N18132657.pptx
 
Top 10 frameworks of node js
Top 10 frameworks of node jsTop 10 frameworks of node js
Top 10 frameworks of node js
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JS
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
 
Oracle application container cloud back end integration using node final
Oracle application container cloud back end integration using node finalOracle application container cloud back end integration using node final
Oracle application container cloud back end integration using node final
 
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
 

More from Ashok Raj

More from Ashok Raj (11)

Manipulators in c++
Manipulators in c++Manipulators in c++
Manipulators in c++
 
How c++ stored in ram
How c++ stored in ramHow c++ stored in ram
How c++ stored in ram
 
Command line arguments
Command line argumentsCommand line arguments
Command line arguments
 
High Performance Computer
High Performance ComputerHigh Performance Computer
High Performance Computer
 
Super computers
Super computersSuper computers
Super computers
 
Pros and cons of c as a compiler language
  Pros and cons of c as a compiler language  Pros and cons of c as a compiler language
Pros and cons of c as a compiler language
 
Programming language paradigms
Programming language paradigmsProgramming language paradigms
Programming language paradigms
 
Printers and its types
Printers and its typesPrinters and its types
Printers and its types
 
Microprocessor
MicroprocessorMicroprocessor
Microprocessor
 
Mother board
Mother boardMother board
Mother board
 
Embedded systems
Embedded systemsEmbedded systems
Embedded systems
 

Recently uploaded

Recently uploaded (20)

Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
 
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
GraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysisGraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysis
 
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
 
A Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdfA Comprehensive Look at Generative AI in Retail App Testing.pdf
A Comprehensive Look at Generative AI in Retail App Testing.pdf
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in Michelangelo
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
De mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEDe mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FME
 
Studiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareStudiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting software
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning Framework
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 

FULL stack -> MEAN stack

  • 2. 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
  • 3. 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
  • 4. 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.,
  • 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 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
  • 7. 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. 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
  • 11. 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
  • 12. JSEXPRESS MongoDB ExpressJS Angular NodeJS 1 2 Back-end Web Frame work Front-end Web Frame work Back-end Runtime environment Database System
  • 13. 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
  • 14. WORKING OF MEAN STACK 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 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
  • 17. Mongo DB OPEN SOURCE AND HIGH PERFORMANCE DATABSE 17
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 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 A N Features of MongoDB 24 • No SQL • JSON everywhere • Fast and iterative • Replication and availability • Lightweight
  • 25. 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
  • 26. EXPRESS JS High performance, High class web development for Node.js
  • 27. 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.
  • 28. 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
  • 29. M E A N JSEXPRESS 29 Architecture of ExpressJS
  • 30. 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
  • 31. NGULARJS JavaScript-based open-source front-end web framework dynamic web apps
  • 32. 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 ?
  • 33. 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.
  • 34. M E A N 34 AngularJs Architecture
  • 35. 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
  • 36. 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.
  • 38. 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
  • 39. M E A N 39 Node.js single Threaded architecture
  • 40. 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
  • 41. 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
  • 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 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
  • 47. 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