starting from scratch with the mean stack
TRANSCRIPT
1
Starting from Scratch with the MEAN Stack
2
Who We Are
Sruti Cheedalla:Senior Developer
Kat Styons: Senior Developer
Matt Cwalinski: Lead Developer
3
Diverse Experience
4
AgendaIntroductionSruti Cheedalla
Building with the MEAN StackKat Styons
What Now and What’s Next?Matt Cwalinski
5
Introduction
6
The Problem
7
Travel Photo Contest 2014
8
9
Dynamic form builder that lets you collect and manage user submissions of text, images and other data
10
11
ADMIN TOOL
12
ADMIN TOOL
13
Successful Adoption
100 + Forms
14
Successful Adoption
170 + Users
15
Successful Adoption
50,000 + Submissio
ns
16
Successful Adoption
7,000 + Media Files
17
18
MongoDB
19
MongoDB ExpressJS
20
MongoDB ExpressJS AngularJS
21
MongoDB ExpressJS AngularJS NodeJS
22
The MEAN Stack
Client
Server
Database
SEND JSON
POST TO DB
SEND JSON AJAX
23
The MEAN Stack
Database
SEND JSON
POST TO DB
24
The MEAN Stack
Server POST TO DB
SEND JSON AJAX
SEND JSON
25
The MEAN Stack
ClientSEND JSON AJAX
26
The MEAN Stack
Client
Server
Database
SEND JSON
POST TO DB
SEND JSON AJAX
27
● Universal end-to-end Workflow
● Focus on speed of development
● Flexible pieces
Value of the MEAN Stack
28
● Universal end-to-end Workflow
Value of the MEAN Stack
29
● Universal end-to-end Workflow
● Focus on speed of development
Value of the MEAN Stack
30
● Universal end-to-end Workflow
● Focus on speed of development
● Flexible pieces
Value of the MEAN Stack
R
31
=Front End
Database Infrastructure
Back End
Full Stack
32
Why we chose MongoDB
33
???
Put graphic transition here
34
Structure your data with the app in mind
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
MongoDB vs. Relational DBWith 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
Building with the MEAN Stack
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
Using Node and Mongoose
Submission Schema
40
Using Mongoose ModelsSubmission Schema from previous slide (Submit.js):
Using the schema in server.js (node runs this on start up):
41
Mongoose vs. Mongo Java Driver
• Mongoose
• Mongo Java Driver
42
Life of a submission
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
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
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
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
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 Submissionreq.body
48
Let’s do some customization
49
Search and analytics engine
Hook into your Mongoose Models: Elastic Search
Fuzzy Matching, Relationships, Complex Aggregations
50
Try ElMongoose
https://www.npmjs.com/package/elmongoose
El
51
ElMongoose: Plugin for syncing data with elastic search through mongoose.
Hook into your Mongoose Models: Elastic Search
52
ElMongoose: Plugin for syncing data with elastic search through mongoose.
Hook into your Mongoose Models: Elastic Search
53
Hook into your Mongoose Models: Custom Plugin
You can add methods and hooks to that schema
54
Hook into your Mongoose Models: Custom Plugin
You can add methods and hooks to that schema
55
Ok... What Now and What’s Next?
56
MEANingful Success?
MongoDB ExpressJS AngularJS NodeJS
57
New Opportunities
SaaS
Modular Development
58
Modular Development - What is it?
Modular Development
59
Modular Example
Rolodex Module(Handles End User Management)
ModuleRoutes Controllers Assets
60
How Modular Development?
CORE PROJECT
Login Rolodex Email
Features
ModuleRoutes Controllers Assets
61
How Modular Development?
Routes Assets
62
How Modular Development?
ModuleRoutes Controllers Assets
CORE Project
ModuleRoutes Controllers Assets
SUB Module
63
How Modular Development?
64
Custom Version of SUB
SUB Application
Login User Management Email
65
What do we build with these?
66
SAAS(Software as a Service)
SaaS
• Modular Feature Design• White Label Best Practices
• Single and Multi Tenant Options
67
Single Tenant Application(Software as a Service)
Application
Database SecurityStorage
68
Single Tenant Application(Software as a Service)
Application
Database
LOGIN
Storage Security
69
Multi Tenant Application(Software as a Service)
Application
DatabaseCollection Collection CollectionCollection
70
Multi Tenant Application(Software as a Service)
Application
DatabaseNewspaper ID Not For Profit ID School ID
Newspaper Not For Profit School
71
Multi Tenant Application(Software as a Service)
Application
Newspaper Not For Profit School
Newspaper Not For Profit School
Config Service
72
Integration
73
Why We (heart) The MEAN Stack
74
Questions?
75
Contact
Matt CwalinskiLinkedIn: https://www.linkedin.com/in/mcwalinski
Twitter: @mcwalinski
Kat StyonsLinkedIn:https://www.linkedin.com/pub/kat-styons/48/3a4/604Twitter: @HappyKatTweets
Sruti CheedallaLinkedIn:https://www.linkedin.com/in/sruticheedallaTwitter: @shrootyc
Follow us on Twitter, @SubPlatform!
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