DevEX - reference for building teams, processes, and platforms
JS-IL: Getting MEAN in 1 Hour
1. 1 Hour MEAN Stack Hackathon
Valeri Karpov
Software Engineer, MongoDB
www.thecodebarbarian.com
www.slideshare.net/vkarpov15
github.com/vkarpov15
@code_barbarian
Building a Full Stack Single Page App and Workflow
2. *
Who is this guy?
•Coined the MEAN stack in April ‘13
•Maintains mongoose, omni-di
•Contributor to node-mongodb-native, mquery, etc.
•AngularJS since 0.9.4 in 2010
•Production MEAN apps: Ascot Project, Bookalokal
•Former CTO, LevelUp
3. *
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
5. *
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
6. *
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
7. *
Step by Step, Continued
•Step 7: Unit testing
•Step 8: Authentication
9. *
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
14. *
Text Search in MongoDB 2.6
•Don’t want users to have to enter “Kale, raw”
•Example: top 3 results for “grass-fed beef”
15. *
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
•Note: mongoose >= 3.8.9 required
16. *
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
17. *
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
19. *
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
20. *
Quick Overview of Mongoose
•ODM for MongoDB and NodeJS
•Schema design and validation
•Convenience objects
•MEAN Stack’s official best friend
21. *
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
25. *
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
26. *
Omni-di to tie this all together
•Avoid dependency hell: don’t require in every file!
33. *
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`
34. *
Step 5: AngularJS + Browserify
•Single Page App: how to manage code bloat?
35. *
Browserify = Write Node For Client
•AngularJS dependency in package.json
•Never deal with flakey CDNs again!
36. *
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
41. *
Why Single Page App?
•No server side templating:
• Better server throughput
• Cleaner separation of concerns
• Less bandwidth usage
•More control over UX
42. *
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
50. *
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
54. *
Get Serious About Testing
•Foundation: proper unit tests, automation
•Heuristic: code “works” iff npm test succeeds
•Grunt or Makefile, either works well
55. *
Omni-di and unit tests
•Beauty of DI: easy to control how much to stub
•For unit tests, stub everything
63. *
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
70. *
And that’s a wrap! Time to Review
•Single page app with MEAN stack
•AngularJS routing
•Browserify for building client code
•Twitter Oauth
•Elegant MongoDB features
71. *
And that’s a wrap! Time to Review
•Mongoose = work-free API (with right schema!)
•MongoDB 2.6 text search
72. *
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