1 Hour MEAN Stack Hackathon

Valeri KarpovSoftware Engineer, MongoDBwww.thecodebarbarian.com

www.slideshare.net/vkarpov15github.com/vkarpov15

@code_barbarian

Building a Food Journal Single Page App + Workflow

*

Who is this guy?

•Coined the MEAN stack in April ‘13

•Contributor to:• node-mongodb-native

• mongoose

• mquery

• omni-di, etc.

•AngularJS since 0.9.4 in 2010

•Production MEAN apps: Ascot Project, Bookalokal

*

General Outline

•Building a single page app - LeanMEAN

•Food journal counts calories for you (FitDay)

•MEAN = MongoDB, ExpressJS, AngularJS, NodeJS

•Additional tools:• browserify

• make

• omni-di

• mongoose

• MongoDB 2.6 text search

• PassportJS / Twitter oauth

*

What we’re building

*

Beyond the Hack

•Nitty-gritty deep dive into code and workflow

•Build tools and workflow: browserify, make

•Code organization: browserify, omni-di

•Unit testing and benchmarks: mocha

*

Step by Step

•Step 0: Understand SR-25 data set

•Step 1: Create Express app

•Step 2: Restructure Express app

•Step 3: Construct Models

•Step 4: Define API

•Step 5: Set up client-side routing

•Step 6: Client-side integration with API

*

Step by Step, Continued

•Step 7: Unit testing

•Step 8: Authentication

*

Follow along on GitHub

*

Step 0: USDA SR-25 Nutrition Data

•Need data: calories, carbs, lipids for common foods

•Thankfully available from USDA’s website

•mongorestore-friendly dump for MongoDB here

•My blog post about the data set

*

What does SR-25 data look like?

*

What Nutrients Look Like

*

What Weights Look Like

*

Simple SR-25 Query

•How many carbs in 1 serving of raw kale?

•Good baby step for food journal

*

Text Search in MongoDB 2.6

•Don’t want users to have to enter “Kale, raw”

•Example: top 3 results for “grass-fed beef”

*

Text Search in MongoDB 2.6

•Static data = perfect use case for text search

•Need to create a text index first from shell:• db.nutrition.ensureIndex({ description :

“text” });

•Read more here

*

Step 1: Creating an Express App

•Can create an Express app with 2 commands:• `npm install express -g` installs Express

• `express lean-mean-nutrition-sample` creates the app

*

Step 2: Restructuring the App

•Single page app doesn’t need Jade templating

•views folder obsolete

•Set up package.json file

•package.json - workflow for setting up env:• `git clone`: pull down repo

• `npm install`: install dependencies

• `npm test`: run tests

• `npm start`: start the server

*

passport.json Setup

*

Step 3: Create Database Schema

“Ontology deals with questions concerning what entities exist or can be said to exist, and how such entities can be grouped, related within a hierarchy, and subdivided according to similarities and differences”

- Wikipedia article on ontology

*

Quick Overview of Mongoose

•ODM for MongoDB and NodeJS

•Schema design and validation

•Convenience objects

•MEAN Stack’s official best friend

*

Objects in LeanMEAN World

•FoodItem: from SR-25

•User: because any real API scopes by user

•Day: the FoodItems a User ate on a given date

*

First, SR-25 Nutrition Item Schema

*

Having Users is a Positive

*

Constructing the Day Schema

*

Day Schema Subtleties

•Want to let user select from multiple weights

•Want user to enter custom amount for a weight

•Difference between selectedWeight / weights

•Nutrient amounts per 100G

*

Omni-di to tie this all together

•Avoid dependency hell: don’t require in every file!

*

Omni-di’s `assemble()` function

*

Why Two Food Item Services?

Text score sorting in Mongoose, see pull requestWill be fixed in next version of Mongoose!

*

Step 4: Define an API

Complexity creeps up on you like a snake in the grass. Good thing we have a Mongoose on our side!

*

The API Methods

*

Search for a Food Item

Note: text search API is atypical, docs here

*

Load a Day

*

Save a Day

*

Wait, Where’s The Work?

•Mongoose validates client foods data w/ schema

•Only modifying foods - free access control

•No need to check if date exists: upsert flag

•isNew flag in `GET /api/date/:date`

*

Step 5: AngularJS + Browserify

•Single Page App: how to manage code bloat?

*

Browserify = Write Node For Client

•AngularJS dependency in package.json

•Never deal with flakey CDNs again!

*

Build Process with Browserify

•Output: all.js, contains all JS in 1 file

•Input: all files in client directory + dependencies

•browserify -o ./public/javascripts/all.js client/*

•Or, make build_client

*

Single Page App Basics

*

What index.html Looks Like

ng-view is where the magic happens

*

http://localhost:3000/#/

*

http://localhost:3000/#/track

*

Why Single Page App?

•No server side templating:• Better server throughput

• Cleaner separation of concerns

• Less bandwidth usage

•More control over UX

*

Step 6: Let’s Build a Client!

•AngularJS controller for each particular view

•Right now only need TrackController

•Controller talks to server

•Controller provides API for UI

*

Modifying the AngularJS Module

*

TrackController Structure

*

TrackController API

*

TrackController in the HTML

*

Implementation of loadDay()

*

Implementation of recalculate() ?

*

Code Sharing - calculations.js

*

NodeJS SPA and Code Sharing

•Code sharing is trivial with browserify

•MEAN stack principle: The objects your server deals with should be almost identical to the objects your client deals with and the objects stored in your database.

•Same objects => easy code sharing

•Calculations a good candidate in this case

*

search() call

*

addFood() call

*

Step 7: Unit Testing with Kittens

*

Get Serious About Testing

•Foundation: proper unit tests, automation

•Heuristic: code “works” iff npm test succeeds

•Grunt or Makefile, either works well

*

Omni-di and unit tests

•Beauty of DI: easy to control how much to stub

•For unit tests, stub everything

*

Testing PUT /api/day/:date

*

Testing PUT /api/day/:date

*

Testing TrackController

*

Testing TrackController

*

Tying Tests Together with make

*

Browserify SPA Testing Advantages

•Code sharing

•Single test framework - Mocha

*

Step 8: Authentication

•Last step!

*

Authentication in SPA

•PassportJS makes oauth easy

•But… requires redirect

•Not that much of a problem

•Handle cases where user hits API but not logged in

*

Setting up app.js with Passport

*

checkLogin middleware

*

checkLogin and TrackController

*

Passport Setup

*

Client-side User Tracking

*

Displaying the Logged In User

*

Displaying the Logged In User

*

And that’s a wrap! Time to Review

•Single page app with MEAN stack

•AngularJS routing

•Browserify for building client code

•Validating complex objects with Mongoose

•MongoDB text search

•Testing and automation

•Twitter Oauth

*

Thanks for Listening!

•Slides on:• Twitter: @code_barbarian

• Slideshare: slideshare.net/vkarpov15

•Repo on github: github.com/vkarpov15/lean-mean-nutrition-sample

•Blog post on SR-25 data set