MEAN Stack

MEAN StackSuren Rodrigo
Associate Technical Architect

The partner of choice for ISV's
What do we need
> NodeJS
> Mongo DB
> Git
> Heroku Toolbelt for windows
(https://toolbelt.heroku.com/windows)

What are technology “Stacks”
> Collection of programing languages, tools, frameworks or
technologies that complement each other organized in a
way to enable developers to do their job.
> Ex: LAMP = Linux Apache MySQL PHP

Quiz 1
> What is the output of the following code
var isEqual = function(x,y)
{
return x==y;
};
console.log(isEqual("1",1));
ANSWER: true

Quiz 2
> What is the output of the following code
var addValue = function(x,y)
{
return
x+y;
};
console.log(addValue (1,1));
ANSWER: undefined

> What Is MEAN Stack?
> Why MEAN Stack?
> Demo Walkthrough (How easy it is to do MEAN things)
> What do I need to know to get started?
> Performance of MEAN Stack
> Productivity Tools
> What’s Bad in MEAN Stack

What is MEAN Stack?
"MEAN is a full stack JavaScript platform for modern web
applications“ - Mean.io
DatabaseBackend (Server)Front End (Client)

What is MEAN Stack?
> JavaScript is used in all tiers.
> JSON is the primary format to exchange data.
DatabaseBackend (Server)Front End (Client)
JavaScriptJavaScript JavaScriptJavaScript
JSONJSON JSONJSON
JSON (BSON)JSON (BSON)

Web Landscape has changed dramatically
> Customers want fast web sites/fast response times
> No page reloads (that’s so… 2010)
> Enterprises want to go virtual
> One box + Several virtual images => Shared Hardware
> System with minimal memory footprint/overhead needed
> As many concurrent requests as possible
> Only load resources when needed (conditional loading)
> Most of the data must come from a slim REST-API
> Mobile/Responsive UIs
> Automated build for backend AND frontend
> Including check for coding conventions, testing,…
> Integration in company’s continues integration platform (For JS see Grunt or Gulp)
We Need A Technology Stack that can enable these demands.

Why MEAN Stack?
• 100% free
• 100% Open Source
• 100% Java Script (+JSON and HTML)
• 100% Web Standards
• Huge community
• Consistent Models from the backend to the
frontend and back
• Use a uniform language throughout your
stack
• JavaScript (the language of the web)
• JSON (the data format of the web)
• Use JavaScript with a great framework
(compared to jQuery)
• Allows to start with the complete frontend
development first
• Very low memory footprint/overhead

Mongo DB (M)
> NoSQL DBMS
> SQL is not used to manipulate data, i.e. DML is not SQL
> Data manipulation is done via JavaScript
> Document Oriented
> Data is not organized into tables, rows and columns
> Data is organized into "collections" and "documents"
> "collection" is a rough map to a table and a "document" is a
rough map to a row.

Mongo DB (M)
> Documents are stored as BSON (Binary JSON)
> documents" are structured as BSON, BSON is nothing but
binary JSON
> Support Horizontal scaling i.e. splitting data between
multiple databases (Sharding)
> Mongo DB has Auto-Sharding

Mongo DB (M): Relational Vs NoSQL

Time to Mongo…

Node JS (N)
> Platform built on Chrome's JavaScript runtime (V8)
> So, Very Fast 
> You can program the server side using JavaScript!!!
> Asynchronous, Event Driven and None Blocking
> Node never wait, Events are handled using callbacks
> Single Threaded
> Excellent support for concurrent requests because of the
none blocking nature

Time for Node…

Angular (A)
> Powerful JavaScript based development framework to
create RICH Internet Application(RIA).
> Clean client side MVC pattern implementation. Support
other patterns such as MVVM too.
> Cross-browser compliant. AngularJS automatically handles
JavaScript code suitable for each browser
> Open source, completely free

Angular and JQuery
jQuery, you apply JavaScript to manipulate the DOM, but
in Angular you declare what the DOM should look like
ahead of time
Angular and JQuery Complement Each Other. So, You can
Use Both in your Applications.

Angular (A)
> Angular Applications are defined
as modules
> Modules can use other modules

Introduction to Cloud Computing : With AWS
“Blue” color slides are not mine.
Credits:
http://www.slideshare.net/AmazonWebServices/introduction-
to-amazon-web-services-7708257

Lunch?

Deploying our App to Cloud : Heroku
> Platform-as-a-Service (PaaS)
> Platform as a service (PaaS) is a category of cloud
computing services that provides a platform allowing
customers to develop, run and manage Web applications
without the complexity of building and maintaining the
infrastructure typically associated with developing and
launching an app.
> Quick Setup and Deployment

Deploying App to cloud: Heroku
> Go to http://www.heroku.com
> Register and Login
> Navigate to “meanapp_final_heroku” folder
> Create a git repo by entering “git init”
> Add and commit everything to repo
> git add –A
> git commit –m “first commit”

Deploying App to cloud: Heroku
> Type “heroku login” and provide the credentials when asked
> Issue “heroku create” to create the heroku application
> Issue “git remote –v” to view the remote repositories, confirm
heroku remote is listed.
> Issue “git push heroku master” to commit everything and
deploy the app
> Issue “heroku ps:scale web=1” to ensure at least 1 app
instance is running
> Issue “heroku open” to open the deployed app

Where do I begin? How to get started?
Learn Basics
on HTTP
and Web
Learn MVC
pattern in
Web
application
development
Learn about
JavaScript
(Most
Important
Step)
Learn
Angular JS
Learn Node
JS with
Express and
other
important
modules.
Learn
Mongo DB
Learn about
productivity
tools

MEAN Stack Performance
> Very Subjective matter
> MEAN Stack performance mainly depends on Node JS
performance since it’s where all the heavy processing is
done.
> Node JS is written in C++/C and have proven to be one of
the fastest.
> Some research show Node JS to be 20% faster than JAVA
EE.

Some of the Productivity Tools
> NPM (Well this is hardly optional) – Node Package
Manager
> Grunt/Gulp – Build Tools for JS
> Yeoman – Project Scaffolding Tool
> Bower – Client side package management
If you are thinking about any serious MEAN
development (or JS development for that
matter) you need to look into these.

What’s Bad in MEAN Stack
> For those who don’t like JavaScript – it’s going to be killing you!
> There are still no general JS coding guidelines
> SPAs need a new way of thinking(!)
> The browser is your platform!
> MongoDB is not as robust as an SQL server
> This security is what they sacrifice to gain speed
> You need to take care of rollbacks yourself (2-Phase-Commit)
> ACID => Possible – but part of the driver/client application
> It’s hard to find specialists that are no hipsters
> and have the big picture/architecture for enterprise solutions in mind
> Once you’ve created the first site with this technology, it’s hard to go
back to the old approach

the partner of choice for ISV's

MEAN Stack

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a MEAN Stack

Semelhante a MEAN Stack (20)

Mais de Dotitude

Mais de Dotitude (12)

Último

Último (20)

MEAN Stack

Notas do Editor