MEAN Stack

transcript

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)

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 codevar isEqual = function(x,y)

{ return x==y;

}; console.log(isEqual("1",1));

ANSWER: true

Quiz 2

> What is the output of the following codevar 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

Learn about JavaScript

(Most Important Step)

Learn Node JS with Express

and other important modules.

Learn about productivity

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

Software