JS-IL: Getting MEAN in 1 Hour
3 likes830 views
This document summarizes a 1 hour hackathon on building a full-stack single page application using the MEAN stack (MongoDB, Express, AngularJS, Node.js). It outlines the steps to build a food journal app that allows users to search a nutrition database, track daily food entries, and view calorie calculations. The steps include setting up the Express backend, Mongoose schema and API, AngularJS controllers and routing, and adding features like unit testing and Twitter authentication.
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
- 8. * Follow along on GitHub
- 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
- 10. * What does SR-25 data look like?
- 11. * What Nutrients Look Like
- 12. * What Weights Look Like
- 13. * Simple SR-25 Query •How many carbs in 1 serving of raw kale? •Good baby step for food journal
- 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
- 22. * First, SR-25 Nutrition Item Schema
- 23. * Having Users is a Positive
- 24. * Constructing the Day Schema
- 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!
- 28. * 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!
- 30. * Search for a Food Item Note: text search API is atypical, docs here
- 31. * Load a Day
- 32. * Save a Day
- 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
- 37. * Single Page App Basics
- 38. * What index.html Looks Like ng-view is where the magic happens
- 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
- 43. * Modifying the AngularJS Module
- 46. * TrackController in the HTML
- 49. * Code Sharing - calculations.js
- 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
- 51. * search() call
- 52. * addFood() call
- 53. * Step 7: Unit Testing with Kittens
- 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
- 60. * Tying Tests Together with make
- 61. * Browserify SPA Testing Advantages •Code sharing •Single test framework - Mocha
- 62. * Step 8: Authentication •Last step!
- 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
- 64. * Setting up app.js with Passport
- 67. * Passport Setup
- 69. * Displaying the Logged In User
- 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