shifting(the(paradigm( withthe(mean(stack · 2 agenda introduction...

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