@rob_rich

Welcome to
the MEAN Stack:
MongoDB, Express, AngularJS, Node

by Rob Richardson

@rob_rich

http://robrich.org/

November 9, 2013

About Me

Rob Richardson is a software craftsman building web properties in ASP.NET and Node. He's a frequent speaker at conferences, user groups, and community events, and a diligent teacher and student of high quality software development. You can find this and other talks on http://robrich.org/presentations and follow him on twitter at @rob_rich.

The MEAN stack:

All are free and open-source

What is a "Stack"?

the LAMP stack

OS Linux
Web Server Apache
Database MySQL
Server-side Language PHP or Perl or Python

the Microsoft stack

OS Windows
Web Server IIS
Database SQL Server
Server-side Language C# / .NET

the MEAN stack Compared

  LAMP Microsoft MEAN
OS Linux Windows  
Web Server Apache IIS Node
Database MySQL SQL Server MongoDB
Server-side Language PHP, Perl, Python C# / .NET  
Server-side MVC Framework     Express
Client-side MVC Framework     Angular

the MEAN stack Compared

  LAMP Microsoft MEAN
OS Linux Windows typically Linux
Web Server Apache IIS Node
Database MySQL SQL Server MongoDB
Server-side Language PHP, Perl, Python C# / .NET JavaScript
Server-side MVC Framework     Express
Client-side MVC Framework     Angular

Characteristics of
the MEAN stack

  • JavaScript in all the things
  • No OS preference (though typically Linux)
  • It's a S.P.A. ("Single Page Application") stack

Executive Evaluation of
the MEAN stack

Pros

  • JavaScript in all the things means single skill set
  • It's naturally asynchronous
  • It's blazing fast

Cons

  • Don't typically share code between client and server:
    • leveraging different frameworks
    • solving different problems
  • It's not what your legacy codebase uses
  • JavaScript is "a little weird"

The components of
the MEAN stack

Mongo

What is it?

  • Document Database
  • Stores JSON documents as BSON (Binary JSON)
  • Schemaless: different documents can have different properties
  • Supports indexes
  • No joins
  • Transaction scope is only per document

Mongo

How do I Install it?

The Mongo Admin Console

Launch: 
mongo
List DBs: 
show dbs
Pick DB:
* doesn't need to exist yet		 
use test
List Collections:
(think tables)		 
show collections
Insert: 
db.users.insert({name:'value'})
Search: 
db.users.find({name:'value'})
By the way, this is a JavaScript runtime environment
Is there a GUI tool for this?
* wimp		 http://www.mongovue.com/

Mongo

Resources

Node

Node

What is it?

  • Thin network-enabled wrapper around Google V8 JavaScript engine (same as in Chrome)
  • Sponsored by Joyent
  • Asynchronous to a fault
  • Very light-weight
  • Blazing fast I/O
  • Network services (web servers) or command-line tools
  • Open-source: https://github.com/joyent/node
  • Phenominal culture of testing and open-source distribution
  • Bundled with NPM, the Node Package Manager

Node

How do I Install it?

Node

How do I use it?

node somefile.js

Run at startup?

Linux: cron or init.d

Windows: scheduled task or service

Node

Resources

Express

Express

What is it?

  • Sinatra-like MVC framework for Node
  • Leverages Node's built-in http.Server
  • Think of it as an event pipeline for request / response
  • Leverage HTML, CSS, and JavaScript templating preprocessors:
       Jade, EJS, LESS, SASS, SWAG, CoffeeScript, etc
  • pulls in "middleware" modules for distinct tasks

Express


Middleware:
a function that does something in the
request / response pipeline

Express

How do I install it?

npm install -g express-cli

Express

How do I use it?


$ express someapp
$ cd someapp
$ npm install
$ npm start
$ chrome http://localhost:3000/

Express

Resources

Angular

Angular

What is it?

  • Client-side MVC framework (in the browser)
  • Built and backed by Google
  • Two-way data-binding using Handlebars syntax
  • Create custom Web parts

Angular

How do I install it?

Download from http://angularjs.org/
or live-link from Google CDN

Angular

How do I use it?

Source: http://docs-angularjs-org-dev.appspot.com/cookbook/helloworld


<html ng-app>
  <head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
	<script src="script.js"></script>
  </head>
  <body>
	<div ng-controller="HelloCntl">
	  Your name: <input type="text" ng-model="name" value="World"/>
	  Hello {{name}}!
	</div>
  </body>
</html>
					

function HelloCntl($scope) {
  $scope.name = 'World';
}

Angular

Hello Angular

Your name:

Hello {{hello_name}}!

Angular

What else is in the box?

  • Web Parts
  • Dependency Injection
  • Testability: Karma
  • In-page Routing (push state)
  • Animations
  • AJAX framework
    • bind to REST
    • bind to AJAX promise

Angular

Resources

Other stuff

Strictly speaking, that's the MEAN stack

Pragmatically, that's hardly enough

Here's the other stuff:

Great compliments to the MEAN stack

  • Mongoose
  • Lo-dash
  • Twitter Bootstrap
  • Handlebars
  • Modernizr
  • Async
  • Passport
  • Browserify
  • Redis
  • Mocha
  • Travis CI

    • The Botique of JavaScript

    • Browser compatability: Modernizr
    • Client-side templating: Handlebars / Moustache
    • 2-way data binding: Ember / Angular / Knockout / Marionette
    • Validation: jQuery.validate / HTML5
    • Styling platforms: jQuery Mobile, Kendo UI
    • Controls: jQuery UI, Kendo UI, "that thing on that site"
    • D.I.: AMD with Require.js / CommonJS with Browserify
    • "Compile to" languages: LESS / SASS / Stylus / CoffeeScript / TypeScript
    • CSS theming: YUI, Twitter Bootstrap
    • Build: Gulp / Grunt / Uglify / JSHint / r.js
    • Scaffolding: Compass / Volo / Yeoman
    • Unit Testing: Qunit / Jasmine / Mocha
    • IDE: Sublime Text / WebStorm / vi / emacs
    • Browser Testing: PhantomJS / Selenium / Watir
    • What do you use?

    Sources for a JavaScript Toolchest

    Great MEAN Stack resources

    Questions?

    @rob_rich

    http://robrich.org/