popular FULL stacks and full reference of an MEAN stack with real time applications and more.MEAN stack is mainly for single page web applications and have an professional dynamic web page.
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.,
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
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
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
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
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
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.
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