MEAN Stack Suren RodrigoAssociate 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)
The partner of choice for ISV's
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
The partner of choice for ISV's
Quiz 1
> What is the output of the following codevar isEqual = function(x,y)
{ return x==y;
}; console.log(isEqual("1",1));
ANSWER: true
The partner of choice for ISV's
Quiz 2
> What is the output of the following codevar addValue = function(x,y) { return x+y; }; console.log(addValue (1,1));
ANSWER: undefined
The partner of choice for ISV's
> 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
The partner of choice for ISV's
What is MEAN Stack?
"MEAN is a full stack JavaScript platform for modern web applications“ - Mean.io
DatabaseBackend (Server)Front End (Client)
The partner of choice for ISV's
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)
The partner of choice for ISV's
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.
The partner of choice for ISV's
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
The partner of choice for ISV's
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.
The partner of choice for ISV's
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
The partner of choice for ISV's
Mongo DB (M): Relational Vs NoSQL
The partner of choice for ISV's
Time to Mongo…
The partner of choice for ISV's
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
The partner of choice for ISV's
Time for Node…
The partner of choice for ISV's
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
The partner of choice for ISV's
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.
The partner of choice for ISV's
Angular (A)
> Angular Applications are defined as modules
> Modules can use other modules
The partner of choice for ISV's
Introduction to Cloud Computing : With AWS
“Blue” color slides are not mine.Credits:
http://www.slideshare.net/AmazonWebServices/introduction-to-amazon-web-services-7708257
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
The partner of choice for ISV's
Lunch?
The partner of choice for ISV's
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
The partner of choice for ISV's
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”
The partner of choice for ISV's
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
The partner of choice for ISV's
Where do I begin? How to get started?
Learn Basics on HTTP and
Web
Learn about JavaScript
(Most Important Step)
Learn Node JS with Express
and other important modules.
Learn about productivity
tools
The partner of choice for ISV's
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.
The partner of choice for ISV's
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.
The partner of choice for ISV's
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