presented by Sruti Cheedalla, Senior Web Developer, The Washington Post; Kat Styons, Web Developer, The Washington Post; Matthew Cwalinski, Senior Web Developer, The Washington Post at MongoDB Evenings DC on October 13, 2015

1. 1
Starting from Scratch
with the MEAN Stack

2. 2
Who We Are
Sruti Cheedalla:
Senior Developer
Kat Styons:
Senior Developer
Matt Cwalinski:
Lead Developer

3. 3
Diverse Experience

4. 4
Agenda
Introduction
Sruti Cheedalla
Building with the MEAN Stack
Kat Styons
What Now and What’s Next?
Matt Cwalinski

5. 5
Introduction

6. 6
The Problem

7. 7
Travel Photo Contest 2014

8. 8

9. 9
Dynamic form builder that lets you collect and
manage user submissions of text, images and
other data

10. 10

11. 11
ADMIN TOOL

12. 12
ADMIN TOOL

13. 13
Successful Adoption
100 +
Forms

14. 14
Successful Adoption
170 +
Users

15. 15
Successful Adoption
50,000 +
Submissions

16. 16
Successful Adoption
7,000 +
Media Files

17. 17

18. 18
MongoDB

19. 19
MongoDB ExpressJS

20. 20
MongoDB ExpressJS AngularJS

21. 21
MongoDB ExpressJS AngularJS NodeJS

22. 22
The MEAN Stack
Client
Server
Database
SEND
JSON
POST
TO DB
SEND
JSON
AJAX

23. 23
The MEAN Stack
Database
SEND
JSON
POST
TO DB

24. 24
The MEAN Stack
Server POST
TO DB
SEND
JSON AJAX
SEND
JSON

25. 25
The MEAN Stack
Client
SEND
JSON
AJAX

26. 26
The MEAN Stack
Client
Server
Database
SEND
JSON
POST
TO DB
SEND
JSON
AJAX

27. 27
● Universal end-to-end Workflow
● Focus on speed of development
● Flexible pieces
Value of the MEAN Stack

28. 28
● Universal end-to-end Workflow
Value of the MEAN Stack

29. 29
● Universal end-to-end Workflow
● Focus on speed of development
Value of the MEAN Stack

30. 30
● Universal end-to-end Workflow
● Focus on speed of development
● Flexible pieces
Value of the MEAN Stack
R

31. 31
=
Front End
Database Infrastructure
Back End
Full Stack

32. 32
Why we chose MongoDB

33. 33
???
Put graphic transition here

34. 34
Structure your data with the app in mind

35. 35
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

36. 36
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.

37. 37
Building with the MEAN Stack

38. 38
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

39. 39
Using Node and Mongoose
Submission Schema

40. 40
Using Mongoose Models
Submission Schema from previous slide (Submit.js):
Using the schema in server.js (node runs this on start up):

41. 41
Mongoose vs. Mongo Java Driver
• Mongoose
• Mongo Java Driver

42. 42
Life of a submission

43. 43
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

44. 44
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

45. 45
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

46. 46
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

47. 47
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

48. 48
Let’s do some customization

49. 49
Search and analytics engine
Hook into your Mongoose Models:
Elastic Search
Fuzzy Matching, Relationships, Complex Aggregations

50. 50
Try ElMongoose
https://www.npmjs.com/package/elmongoose
El

51. 51
ElMongoose: Plugin for syncing data with elastic
search through mongoose.
Hook into your Mongoose Models:
Elastic Search

52. 52
ElMongoose: Plugin for syncing data with elastic
search through mongoose.
Hook into your Mongoose Models:
Elastic Search

53. 53
Hook into your Mongoose Models:
Custom Plugin
You can add methods and hooks to that schema

54. 54
Hook into your Mongoose Models:
Custom Plugin
You can add methods and hooks to that schema

55. 55
Ok... What Now and What’s Next?

56. 56
MEANingful Success?
MongoDB ExpressJS AngularJS NodeJS

57. 57
New Opportunities
SaaS
Modular Development

58. 58
Modular Development - What is it?
Modular Development

59. 59
Modular Example
Rolodex Module
(Handles End User Management)
ModuleRoutes Controllers Assets

60. 60
How Modular Development?
CORE PROJECT
Login Rolodex Email
Features
ModuleRoutes Controllers Assets

61. 61
How Modular Development?
Routes Assets

62. 62
How Modular Development?
ModuleRoutes Controllers Assets
CORE Project
ModuleRoutes Controllers Assets
SUB Module

63. 63
How Modular Development?

64. 64
Custom Version of SUB
SUB Application
Login User
Management
Email

65. 65
What do we build with these?

66. 66
SAAS
(Software as a Service)
SaaS
• Modular Feature Design
• White Label Best Practices
• Single and Multi Tenant Options

67. 67
Single Tenant Application
(Software as a Service)
Application
Database SecurityStorage

68. 68
Single Tenant Application
(Software as a Service)
Application
Database
LOGIN
Storage Security

69. 69
Multi Tenant Application
(Software as a Service)
Application
DatabaseCollection Collection CollectionCollection

70. 70
Multi Tenant Application
(Software as a Service)
Application
DatabaseNewspaper ID Not For Profit ID School ID
Newspaper Not For Profit School

71. 71
Multi Tenant Application
(Software as a Service)
Application
Newspaper Not For Profit School
Newspaper Not For Profit School
Config Service

72. 72
Integration

73. 73
Why We (heart)
The MEAN Stack

74. 74
Questions?

75. 75
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!

76. 76
Resources
• MongoDB
• Mongoose.js
• Elasticsearch
• Express.js
• AngularJS
• Node.js
• https://www.npmjs.com/package/elmongoose
• https://www.mongodb.com/webinar/get-started-with-the-
mean-stack?jmp=twt
• http://coenraets.org/blog/
• https://www.mongodb.com/blog/post/building-your-first-
application-mongodb-creating-rest-api-using-mean-stack-
part-1