Starting from Scratch with the MEAN Stack
Download as PPTX, PDF13 likes8,361 views
The document discusses building applications with the MEAN stack. It introduces the speakers and their experience. It then discusses using MongoDB, Express, AngularJS and Node.js together. It provides an example of how a submission flows through the full stack, from a user filling out a form to it being saved to the database. It also discusses customizing applications with plugins, modular development, and building software as a service applications.
Starting from Scratch with the MEAN Stack
- 1. 1 Starting from Scratch with the MEAN Stack
- 2. 2 Who We Are Sruti Cheedalla: Senior Web Developer Kat Styons: Web Developer Matt Cwalinski: Senior Web Developer
- 4. 4 Agenda Introduction Sruti Cheedalla Building with the MEAN Stack Kat Styons What’s Next? Matt Cwalinski
- 7. 7 Travel Photo Contest 2014
- 8. 8
- 9. 9 Dynamic form builder that lets you collect user submissions of text, images and other data
- 10. 10
- 11. 11 ADMIN TOOL
- 12. 12 ADMIN TOOL
- 13. 13
- 18. 18 Photo Credit: Muriel Silva Photography =
- 19. 19
- 20. 20 MongoDB
- 23. 23 MongoDB ExpressJS AngularJS NodeJS
- 24. 24 The MEAN Stack Client Server Database SEND JSON POST TO DB SEND JSON AJAX
- 26. 26 The MEAN Stack Server POST TO DB SEND JSON AJAX SEND JSON
- 28. 28 The MEAN Stack Client Server Database SEND JSON POST TO DB SEND JSON AJAX
- 29. 29 ● Universal end-to-end Workflow ● Focus on speed of development ● Flexible pieces Value of the MEAN Stack
- 30. 30 ● Universal end-to-end Workflow Value of the MEAN Stack
- 31. 31 ● Universal end-to-end Workflow ● Focus on speed of development Value of the MEAN Stack
- 32. 32 ● Universal end-to-end Workflow ● Focus on speed of development ● Flexible pieces Value of the MEAN Stack R
- 33. 33 No MongoDB? How Dare You!
- 34. 34 = Front End Database Infrastructure Back End Full Stack
- 35. 35 MEAN in the Cloud
- 36. 36 Building with MEAN Stack
- 37. 37 What we’ll cover • Using MongoDB in our project – NodeJS and MongooseJS • Life of a submission: See the whole stack • Custom Mongoose Plugin: – ElMongoose: Mongoose >> Elastic Search
- 38. 38 What were we thinking? Put graphic transition here
- 39. 39 Structure your data with the app in mind
- 40. 40 MongoDB vs Relational DB: Viewing a single submission would have required pulling data from 6 tables if we had use a relational DB: - Submissions for each app have different form fields - To make up for lack of flexibility this becomes a complex schema
- 41. 41 MongoDB vs. Relational DB With mongo we can store our submissions in a single collection - All data for a submission resides in one document - This fits with the way we use submissions in our app.
- 42. 42 Using Node and Mongoose Submission Schema
- 43. 43 Using Mongoose Models Submission Schema from previous slide (Submit.js): Using the schema in server.js (node runs this on start up):
- 44. 44 Mongoose vs. Mongo Java Driver • Mongoose • Mongo Java Driver
- 45. 45 Life of a submission
- 46. 46 Life of a Submission User fills out a form • Angular has a data model called $scope • Each form field is bound to a key in the object stored at $scope.submission
- 47. 47 Life of a Submission User Submits the form • Left: submission json generated by the form in the previous slide • Below: Angular POSTs submission json to /submitForm $scope.submission hostedController.js
- 48. 48 Life of a Submission User Submits the form • Left: submission json generated by the form in the previous slide • Below: Angular POSTs submission json to /submitForm $scope.submission hostedController.js
- 49. 49 Life of a Submission Request is received by ExpressJS • Express is listening at port 3000 for all requests • It’s easy to define routes in express
- 50. 50 Submission is saved to Mongo • Left: the json object has not changed • Below: submission saved to Mongo through the Mongoose Model Sub Life of a Submission req.body
- 51. 51 Jarvis, let’s customize this
- 52. 52 Search and analytics engine Hook into your Mongoose Models: Elastic Search Fuzzy Matching, Relationships, Complex Aggregations
- 54. 54 ElMongoose: Plugin for syncing data with elastic search through mongoose. Hook into your Mongoose Models: Elastic Search
- 55. 55 ElMongoose: Plugin for syncing data with elastic search through mongoose. Hook into your Mongoose Models: Elastic Search
- 56. 56 Hook into your Mongoose Models: Custom Plugin You can add methods and hooks to that schema
- 57. 57 Hook into your Mongoose Models: Custom Plugin You can add methods and hooks to that schema
- 58. 58 Ok... What Now and What’s Next?
- 59. 59 MEANingful Success? MongoDB ExpressJS AngularJS NodeJS
- 62. 62 Modular Development - What is it? Modular Development
- 63. 63 Why Modular Development? More FlexibleFaster
- 64. 64 Modular Example Rolodex Module (Handles End User Management) ModuleRoutes Controllers Assets
- 65. 65 How Modular Development? CORE PROJECT Login Rolodex Email Features ModuleRoutes Controllers Assets
- 66. 66 How Modular Development? Routes Assets
- 67. 67 How Modular Development? ModuleRoutes Controllers Assets CORE Project ModuleRoutes Controllers Assets SUB Module
- 70. 70 Custom Version of SUB SUB Application Login User Management Email
- 71. 71 What do we build with these?
- 72. 72 SAAS (Software as a Service) SaaS ■ Modular Feature Design ■ Single and Multi Tenant Options
- 73. 73 Single Tenant Application (Software as a Service) Application Database SecurityStorage
- 74. 74 Single Tenant Application (Software as a Service) Application Database LOGIN Storage Security
- 75. 75 Multi Tenant Application (Software as a Service) Application DatabaseCollection Collection CollectionCollection
- 76. 76 Multi Tenant Application (Software as a Service) Application DatabaseDeveloper ID Admin ID Party Animal ID Developer Administrator Party Animal
- 77. 77 SAAS - How Do We Do It? (Software as a Service)
- 78. 78 SAAS - How Do We Do It? (Software as a Service) img source: aws.amazon.com
- 79. 79 SAAS - How Do We Do It? (Software as a Service) Tenant Type User Parameters Instance Build New Application
- 80. 80 SAAS - How Do We Do It? (Software as a Service) Tenant Type User Parameters Instance Build New Application Multi Tenant or Single Tenant?
- 81. 81 SAAS - How Do We Do It? (Software as a Service) (spec file with parameters) Tenant Type User Parameters Instance Build New Application
- 82. 82 SAAS - How Do We Do It? (Software as a Service) Tenant Type User Parameters Instance Build New Application
- 83. 83 SAAS - How Do We Do It? (Software as a Service) Tenant Type User Parameters Instance Build New Application
- 84. 84 Why We (heart) The MEAN Stack
- 85. 85 MORE OPPORTUNITIES!!! careers.washingtonpost.com @wpcareers ● We’re in a unique environment in our team. ● What we are working has visibility. ● We could re-invent ourselves with any challenge. ● If you proved it could work, we could use it. ● Ownership of projects from end to end. ● No Red Tape ● Our work is more fulfilling.
- 86. 86 Questions?
- 87. 87 Contact Matt Cwalinski LinkedIn: https://www.linkedin.com/in/mcwalinski Twitter: @mcwalinski Kat Styons LinkedIn:https://www.linkedin.com/pub/kat-styons/48/3a4/604 Twitter: @HappyKatTweets Sruti Cheedalla LinkedIn:https://www.linkedin.com/in/sruticheedalla Twitter: @shrootyc Follow us on Twitter, @SubPlatform!
- 88. 88 Resources • MongoDB • Mongoose.js • Elasticsearch • Express.js • AngularJS • Node.js • https://www.npmjs.com/package/elmongoose • http://coenraets.org/blog/