shifting(the(paradigm( withthe(mean(stack · 2 agenda introduction...
TRANSCRIPT
1
Shifting the Paradigm with the MEAN Stack
2
AgendaIntroductionWhy we built the Submission Platform (Sub)
Building with the MEAN StackI’ll give you an overview of how we built Sub
DemoI’ll show you how to features to a simple MEAN app
3
Introduction
4
5
Washington Post Peeps Contest
https://www.washingtonpost.com/graphics/lifestyle/peeps-diorama-contest/2016/
6
Dynamic form builder that lets you collect user submissions of text, images and other data
7
Successful Adoption
150+ Forms
= 50 Forms
8
Successful Adoption
250+ Users
= 50 Users
9
Successful Adoption
70K+ Submissions
= 10k Submissions
10
Successful Adoption
~15000 Media Sets
= 5000 Media Sets
11
How did we do this?
12
13
MongoDB
14
MongoDB ExpressJS
15
MongoDB ExpressJS AngularJS
16
MongoDB ExpressJS AngularJS NodeJS
17
The MEAN Stack
Client
Server
Database
SEND JSON
POST TO DB
SEND JSON AJAX
18
The MEAN Stack
Database
SEND JSON
POST TO DB
19
The MEAN Stack
Server POST TO DB
SEND JSON AJAX
SEND JSON
20
The MEAN Stack
ClientSEND JSON AJAX
21
The MEAN Stack
Client
Server
Database
SEND JSON
POST TO DB
SEND JSON AJAX
22
Why the MEAN Stack?
23
Structure your data with the app in mind
24
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
25
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.
26
Using Node and Mongoose
Submission Schema
27
Using Mongoose ModelsSubmission Schema from previous slide (Submit.js):
Using the schema in server.js (node runs this on start up):
28
Demo
29
Demo
https://github.com/styonsk/percona-live-meanstack-demo
The following slides cover topics that we will cover in the demo. If you want to revisit something from the demo, these slides will be posted by Percona Live after the talk.
30
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!
Me
31
Questions
32
Resources
• MongoDB• Mongoose.js• Elasticsearch• Express.js• AngularJS• Node.js• https://github.com/styonsk/percona-live-meanstack-demo
• https://www.npmjs.com/package/elmongoose