MongoDB Days Silicon Valley: Building Applications with the MEAN Stack

MEAN Stack Introduction and Development
Jason Zucchetto
MongoDB

2
Agenda
• Developing a Sample Application
• The MEAN Stack Components
• MEAN Stack Components Explained for Our
Sample Application

3
MongoMart
• Simple application for searching and viewing
MongoDB swag
• All product information stored in MongoDB
• Github location for the sample application will be
shown at the end of this presentation

7
MongoDB
• Document Oriented Database (JSON document)
• Returns JSON results, making it very easy to
store and retrieve JSON documents from your
Node.js application
• Dynamic schema
• Advanced secondary indexes (similar to an
RDBMS)
• Replication and scaling

8
Express
• Most popular Node.js web framework
• Simple, pluggable, and fast
• Great tool for building REST APIs
• Allows us to easily create endpoints in our
application (e.g. /items/45)

9
Angular
• Javascript framework for client side MVC (model-
view-controller)
• Create single page webapps
• HTML is used as the template language
• Adds HTML elements/attributes and interprets
those elements/attributes
• Frontend of the MEAN stack

10
Node.js
• Our web server
• Used for server-side web applications
• “… event-driven architecture and a non-blocking
I/O API designed to optimize an application's
throughput and scalability for real-time web
applications”

11
Setting Up MongoDB for our MongoMart App
• Download MongoDB
• Extract and add /bin directory to system PATH
• Create data directory
• Start MongoDB and point to data directory
• Load dataset using mongoimport (instructions in
GitHub, link at the end of this presentation)

{
"_id" : 20,
"title" : "MongoDB University T-shirt",
"slogan" : "Show Your MDBU Alumni Status",
"description" : "Crafted from ultra-soft combed
cotton,
this essential t-shirt features sporty
contrast
tipping and MongoDB's signature
leaf.",
"stars" : 0,
"category" : "Apparel",
"img_url" : "/img/products/univ-tshirt.jpg",
"price" : 45
}
Document from “items” Collection

13
Querying “items” Collection
• Any field within the collection can be queried, e.g.
db.items.find( { “category” : “Apparel” } )
• Ideally, every query to the database uses an
index, to ensure we maintain fast performance as
the database grows in size

Using .explain() in the MongoDB Shell
> db.items.find({ "category" : "Apparel" }
).explain("executionStats")
{
…
"executionStats" : {
"executionSuccess" : true,
"nReturned" : 6,
"executionTimeMillis" : 2,
"totalKeysExamined" : 6,
"totalDocsExamined" : 6,
"executionStages" : {
"stage" : "FETCH",
…
}
…

15
Item Reviews
• Several options
• Add a list of reviews to each “items” document
• Create a new collection called “reviews”, query
the collection for latest reviews for an item
• Create a collection called “reviews” and maintain
the last 10 reviews (or 10 most popular reviews)
in each “items” document (duplicating reviews
across the two collections)

16
Node.js
• Our webserver
• Easily clone the MongoMart github repo, install
needed dependencies, and run the server:
git clone <REPO>
npm install
npm start

17
What is NPM
● Bundled in the Node.js installer
● Dependency and management tool for Node.js
● Used for installing Node.js modules, such as
Express (which we’ll dive into next):
npm install express

18
Integrating Express Into MongoMart
● Express is a Node.js module to manage our
routes
● Initially, Express was installed, and the Express
generator for generating the complete structure
for an application
● Use the Express generator to generate the
MongoMart application
npm install express
npm install express-generator -g
express mongomart

19
Routes Generated By Express
// Within routes/users.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;

20
Create New Routes for MongoMart Items
// Create new file routes/items.js
var express = require('express');
var router = express.Router();
/* GET all items */
// Query MongoDB for items
});
/* GET item by id */
router.get('/:id', function(req, res, next) {
// Query MongoDB for an item
});
module.exports = router;

21
● MongoDB running with sample data
● Node.js application created
● Express installed for managing routes (e.g.
/items) within our Node.js application
Recap MongoMart Progress
● Query MongoDB from our application’s routes
● Display items to the user via Angular
Next Steps

22
● ODM for writing MongoDB validation, casting,
and business logic
● Greater simplifies how we query and work with
MongoDB
Adding Mongoose to Our Application
npm install mongoose

23
Create a Model for a MongoMart Item
// In models/item.js
var mongoose = require("mongoose");
var ItemSchema = new mongoose.Schema({
_id: Number,
name: String,
title: String,
slogan: String,
description: String,
stars: Number,
category: {
type: String,
index: true
},
img_url: String,
price: Number
});
module.exports = mongoose.model('Item', ItemSchema);

24
Mongoose MongoDB query from our Node.js App
// In routes/items.js
var mongoose = require( 'mongoose' );
var Item = require(__dirname+'/../models/Item')
/* GET all items */
Item.find(function(err, items) {
if (err)
res.send(err);
res.json(items);
});
});

25
Mongoose MongoDB query from our Node.js App
// In routes/items.js
* GET item by id */
router.get('/:id', function(req, res, next) {
Item.findById({ "_id" : req.params.id }, function(err,
item) {
if (err)
res.send(err);
res.json(item);
});
});

26
● Angular is a Javascript framework
● Client side MVC
● Create single page webapps, define all views and
controllers in client side Javascript
● Since Angular is a client side framework, we’ll install via
bower
● Bower should be used for client side components
(bootstrap, Angular, etc.)
● npm for node.js dependencies (Express, Mongoose,
etc.)
Integrating Angular Into MongoMart

27
bower install bootstrap // used for easy layouts/standard styles
bower install angular // the main angular.js file
bower install angular-route // needed for routing in angular
bower install angular-animate // animate transitions between views
bower install jquery // jquery library
ls bower_components/
Angular angular-animate angular-route bootstrap jquery

28
Integrating Angular Into MongoMart (index)
<!doctype html>
<html lang="en" ng-app="mongomartApp">
<head>
<meta charset="utf-8">
<title>MongoMart</title>
<link rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="stylesheets/style.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/controllers.js"></script>
</head>
<body>
<div class="view-container"><div ng-view class="view-frame"></div></div>
</body>
</html>

29
Integrating Angular Into MongoMart (app.js)
var mongomartApp = angular.module('mongomartApp', ['ngRoute','mongomartControllers',
'ngAnimate']);
mongomartApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/items', {
templateUrl: 'partials/item-list.html',
controller: 'ItemListCtrl'
}).
when('/items/:itemId', {
templateUrl: 'partials/item-detail.html',
controller: 'ItemDetailCtrl'
}).
otherwise({
redirectTo: '/items'
});
}]);

30
Integrating Angular Into MongoMart (app.js)

31
(controllers.js)
var mongomartControllers = angular.module('mongomartControllers', []);
mongomartControllers.controller('ItemListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('http://localhost:3000/items').success(function(data) {
$scope.items = data;
});
$scope.itemOrder = 'title';
}]);
mongomartControllers.controller('ItemDetailCtrl', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$scope.itemId = $routeParams.itemId;
$http.get('http://localhost:3000/items/' + $routeParams.itemId).success(function(data) {
$scope.item = data;
});
}]);

32
Integrating Angular Into MongoMart (item-
detail.html)
<div class="row">
<div class="col-md-8">
<img class="img-responsive" src="{{item.img_url}}" alt="">
</div>
<div class="col-md-4">
<h3>Product Description</h3>
<p>
{{item.description}}
</p>
</div>
</div>

33
● MongoDB as the backing database
● Express for routing in Node.js (e.g. /items)
● Angular for client side MVC, single page webapp
● Node.js as our application server
MEAN Stack for MongoMart

Our Node.js Application Structure
Client side components, such as Javascript libraries and
CSS (e.g. Bootstrap). Brief intro to Bower in the Angular
section of this presentation.
Our models using Mongoose
Publicly accessible static files, such as images and CSS.
Routes defined by express.
Templates populated by routes from above
app.js is our application’s starting place, this file is used to
load all dependencies and other Node.js files

37
Links
• MongoMart Github Location:
https://github.com/zuketo/meanstack
• MEAN Stack Course on Edx:
https://www.edx.org/course/introduction-
mongodb-using-mean-stack-mongodbx-m101x

#MDBDays
mongodb.com
Get your technical questions answered
In the foyer, 10:00 - 5:00
By appointment only – register in person

Tell me how I did today on Guidebook and enter for a
chance to win one of these
How to do it:
Download the Guidebook App
Search for MongoDB Silicon Valley
Submit session feedback

MongoDB Days Silicon Valley: Building Applications with the MEAN Stack

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to MongoDB Days Silicon Valley: Building Applications with the MEAN Stack

Similar to MongoDB Days Silicon Valley: Building Applications with the MEAN Stack (20)

More from MongoDB

More from MongoDB (20)

Recently uploaded

Recently uploaded (20)

MongoDB Days Silicon Valley: Building Applications with the MEAN Stack