Download - JS-IL: Getting MEAN in 1 Hour
![Page 1: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/1.jpg)
1 Hour MEAN Stack Hackathon
Valeri KarpovSoftware Engineer, MongoDBwww.thecodebarbarian.com
www.slideshare.net/vkarpov15github.com/vkarpov15
@code_barbarian
Building a Full Stack Single Page App and Workflow
![Page 2: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/2.jpg)
*
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
![Page 3: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/3.jpg)
*
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
![Page 4: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/4.jpg)
*
What we’re building
![Page 5: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/5.jpg)
*
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
![Page 6: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/6.jpg)
*
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
![Page 7: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/7.jpg)
*
Step by Step, Continued
•Step 7: Unit testing
•Step 8: Authentication
![Page 9: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/9.jpg)
*
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
![Page 10: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/10.jpg)
*
What does SR-25 data look like?
![Page 11: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/11.jpg)
*
What Nutrients Look Like
![Page 12: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/12.jpg)
*
What Weights Look Like
![Page 13: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/13.jpg)
*
Simple SR-25 Query
•How many carbs in 1 serving of raw kale?
•Good baby step for food journal
![Page 14: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/14.jpg)
*
Text Search in MongoDB 2.6
•Don’t want users to have to enter “Kale, raw”
•Example: top 3 results for “grass-fed beef”
![Page 15: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/15.jpg)
*
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
![Page 16: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/16.jpg)
*
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
![Page 17: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/17.jpg)
*
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
![Page 18: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/18.jpg)
*
passport.json Setup
![Page 19: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/19.jpg)
*
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
![Page 20: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/20.jpg)
*
Quick Overview of Mongoose
•ODM for MongoDB and NodeJS
•Schema design and validation
•Convenience objects
•MEAN Stack’s official best friend
![Page 21: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/21.jpg)
*
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
![Page 22: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/22.jpg)
*
First, SR-25 Nutrition Item Schema
![Page 23: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/23.jpg)
*
Having Users is a Positive
![Page 24: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/24.jpg)
*
Constructing the Day Schema
![Page 25: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/25.jpg)
*
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
![Page 26: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/26.jpg)
*
Omni-di to tie this all together
•Avoid dependency hell: don’t require in every file!
![Page 27: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/27.jpg)
*
Omni-di’s `assemble()` function
![Page 28: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/28.jpg)
*
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!
![Page 29: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/29.jpg)
*
The API Methods
![Page 30: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/30.jpg)
*
Search for a Food Item
Note: text search API is atypical, docs here
![Page 31: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/31.jpg)
*
Load a Day
![Page 32: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/32.jpg)
*
Save a Day
![Page 33: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/33.jpg)
*
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`
![Page 34: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/34.jpg)
*
Step 5: AngularJS + Browserify
•Single Page App: how to manage code bloat?
![Page 35: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/35.jpg)
*
Browserify = Write Node For Client
•AngularJS dependency in package.json
•Never deal with flakey CDNs again!
![Page 36: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/36.jpg)
*
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
![Page 37: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/37.jpg)
*
Single Page App Basics
![Page 38: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/38.jpg)
*
What index.html Looks Like
ng-view is where the magic happens
![Page 39: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/39.jpg)
*
http://localhost:3000/#/
![Page 40: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/40.jpg)
*
http://localhost:3000/#/track
![Page 41: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/41.jpg)
*
Why Single Page App?
•No server side templating:• Better server throughput
• Cleaner separation of concerns
• Less bandwidth usage
•More control over UX
![Page 42: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/42.jpg)
*
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
![Page 43: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/43.jpg)
*
Modifying the AngularJS Module
![Page 44: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/44.jpg)
*
TrackController Structure
![Page 45: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/45.jpg)
*
TrackController API
![Page 46: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/46.jpg)
*
TrackController in the HTML
![Page 47: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/47.jpg)
*
Implementation of loadDay()
![Page 48: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/48.jpg)
*
Implementation of recalculate() ?
![Page 49: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/49.jpg)
*
Code Sharing - calculations.js
![Page 50: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/50.jpg)
*
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
![Page 51: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/51.jpg)
*
search() call
![Page 52: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/52.jpg)
*
addFood() call
![Page 53: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/53.jpg)
*
Step 7: Unit Testing with Kittens
![Page 54: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/54.jpg)
*
Get Serious About Testing
•Foundation: proper unit tests, automation
•Heuristic: code “works” iff npm test succeeds
•Grunt or Makefile, either works well
![Page 55: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/55.jpg)
*
Omni-di and unit tests
•Beauty of DI: easy to control how much to stub
•For unit tests, stub everything
![Page 56: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/56.jpg)
*
Testing PUT /api/day/:date
![Page 57: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/57.jpg)
*
Testing PUT /api/day/:date
![Page 58: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/58.jpg)
*
Testing TrackController
![Page 59: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/59.jpg)
*
Testing TrackController
![Page 60: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/60.jpg)
*
Tying Tests Together with make
![Page 61: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/61.jpg)
*
Browserify SPA Testing Advantages
•Code sharing
•Single test framework - Mocha
![Page 62: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/62.jpg)
*
Step 8: Authentication
•Last step!
![Page 63: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/63.jpg)
*
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
![Page 64: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/64.jpg)
*
Setting up app.js with Passport
![Page 65: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/65.jpg)
*
checkLogin middleware
![Page 66: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/66.jpg)
*
checkLogin and TrackController
![Page 67: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/67.jpg)
*
Passport Setup
![Page 68: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/68.jpg)
*
Client-side User Tracking
![Page 69: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/69.jpg)
*
Displaying the Logged In User
![Page 70: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/70.jpg)
*
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
![Page 71: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/71.jpg)
*
And that’s a wrap! Time to Review
•Mongoose = work-free API (with right schema!)
•MongoDB 2.6 text search
![Page 72: JS-IL: Getting MEAN in 1 Hour](https://reader033.vdocuments.us/reader033/viewer/2022051412/549a5560ac795959288b5c49/html5/thumbnails/72.jpg)
*
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