THE

STACK

{ JavaScript all the way }

Satheesh

Full Stack Developer

Coined by Valeri Karpov, who was a MongoDB developer

• What is MEAN Stack
• Why MEAN
• Who uses NODE
• Apps Suited for NODE JS
• Typical APP Architecture
• Mongo DB
• Angular JS
• Express JS
• Node JS
• ToolBox

Agenda

What is MEAN Stack

A cross-platform document-oriented database

Web development  Framework for Node JS

Superheroic frontend framework 

Event Based concurrency environment

Full-stack JavaScript
solution that helps you
build fast, robust and
maintainable production
web applications using:

Why MEAN

SAME LANGUAGE, SAME OBJECTS

{“_id”: ObjectId(“512638a28b799”),
“username” : “johdoe” }

{“_id”: “512638a28b799”,
“username” : “johdoe” }

{“_id”: “512638a28b799”,
“username” : “johndoe” }

Who are using Node JS

• E-Commerce
• Payment Processing
• Social Media
• Real-time Services
• Media Applications
• Enterprise Services

Apps suited for Node JS

Typical App Architecture

-----------------------------------------------------------------------------------------------

NoSQL cross-platform document-oriented database system

• JSON-like documents with dynamic schemas
• Easier & faster to send data between client
• and server (b/c data saved in JSON format)
• Local Install:
  • MongoDB: http://www.mongodb.org/
• MongoDB-as-a-Service:
  • Mongolab: https://mongolab.com
  • Modulus: https://modulus.io

Mongo DB

A lightweight framework used to build single and multi-page web applications in Node.JS

• Wrapper for the core Node.js HTTP module objects.
• Provides functions for everything you may need to build a modern web server
• Middleware, routing, templating, static-files, cookies, mime-types and much much more

Express JS

Client-side MVC framework

• AngularJS is what HTML would have been, had it been designed for building web-apps.
• A swiss army knife of JavaScript MVW goodness
  • Two Way Data-Binding
  • Directives, Filters and Services
  • Templates
  • Dependency Injection
  • Bonus: Testing

Angular JS

THE TOOLBOX

LET'S CODE

[TIME TO GET OUR HANDS DIRTY]

Angular Components 1 of 3

❖ Directives: allows you to extend HTML to answer the needs        of web applications. Directives let you specify how your              page should be structured for the data available in a given        scope.
❖ Data Binding: allow defining the binding between the data          in the scope and the content of the views.
❖ Filters: allow modifying the way data is displayed.
❖ Partial Views: used specially in single page applications.

Angular Components 2 of 3

❖ Modules: Apps are structured in modules that can depend        on other modules and can contain controllers,                              services, directives and filters
❖ Controllers contain the application behavior. Controllers            populate the scope with all the necessary data for the view.      Using proper separation of concerns, controllers should            never contain anything related to the DOM.
❖ Scope is used to link the controllers and the views to which        they are binded

Angular Components 3 of 3

❖ Services: allow reusing code that should be abstracted from
     controller. Services can be injected in controllers or in other
     services.
❖ Dependency Injection: retrieves some elements of the                application that should be configured when the module will      be loaded
❖ Events: $broadcast and $emit

Resources

Node.js - http://nodejs.org

Mongo DB - http://mongodb.org

Mongoose - http://mongoosejs.com

Express - http://expressjs.com

Angular JS - http://angularjs.org

Bower - http://bower.io

Yeoman - http://yeoman.io

Grunt - http://gruntjs.com

Gulp - http://gulpjs.com

Jasmine - http://jasmine.github.io

Protractor - https://angular.github.io/protractor/
Mocha - https://mochajs.org
Chai - http://chaijs.com