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.

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

3. 3
Diverse Experience

4. 4
Agenda
Introduction
Sruti Cheedalla
Building with the MEAN Stack
Kat Styons
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 user
submissions of text, images and other data

10. 10

11. 11
ADMIN TOOL

12. 12
ADMIN TOOL

13. 13

14. 14
Successful Adoption

15. 15
Successful Adoption

16. 16
Successful Adoption

17. 17
Successful Adoption

18. 18
Photo Credit: Muriel Silva Photography
=

19. 19

20. 20
MongoDB

21. 21
MongoDB ExpressJS

22. 22
MongoDB ExpressJS AngularJS

23. 23
MongoDB ExpressJS AngularJS NodeJS

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

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

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

27. 27
The MEAN Stack
Client
SEND
JSON
AJAX

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

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

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

60. 60
New Opportunities
Developers Users

61. 61
Opportunities
SaaS
Modular Development

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

68. 68
How Modular Development?

69. 69
How Modular Development?
gruntfile.js

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/