1 Hour MEAN Stack Hackathon Valeri Karpov Software Engineer, MongoDB www.thecodebarbarian.com www.slideshare.net/vkarpov15 github.com/vkarpov15 @code_barbarian Building a Food Journal Single Page App + Workflow
May 14, 2015
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
*
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