1

Starting from Scratch with the MEAN Stack

2

Who We Are

Sruti Cheedalla:Senior Web Developer

Kat Styons: Web Developer

Matt Cwalinski: Senior Web Developer

3

Diverse Experience

4

Agenda

IntroductionSruti Cheedalla

Building with the MEAN StackKat Styons

What’s Next?Matt Cwalinski

5

Introduction

6

The Problem

7

Travel Photo Contest 2014

8

9

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

10

11

ADMIN TOOL

12

ADMIN TOOL

13

14

Successful Adoption

15

Successful Adoption

16

Successful Adoption

17

Successful Adoption

18Photo Credit: Muriel Silva Photography

=

19

20

MongoDB

21

MongoDB ExpressJS

22

MongoDB ExpressJS AngularJS

23

MongoDB ExpressJS AngularJS NodeJS

24

The MEAN Stack

Client

Server

Database

SEND JSON

POST TO DB

SEND JSON

AJAX

25

The MEAN Stack

Database

SEND JSON

POST TO DB

26

The MEAN Stack

Server POST TO DB

SEND JSON AJAX

SEND JSON

27

The MEAN Stack

ClientSEND JSON

AJAX

28

The MEAN Stack

Client

Server

Database

SEND JSON

POST TO DB

SEND JSON

AJAX

29

● Universal end-to-end Workflow

● Focus on speed of development

● Flexible pieces

Value of the MEAN Stack

30

● Universal end-to-end Workflow

Value of the MEAN Stack

31

● Universal end-to-end Workflow

● Focus on speed of development

Value of the MEAN Stack

32

● Universal end-to-end Workflow

● Focus on speed of development

● Flexible pieces

Value of the MEAN Stack

R

33

No MongoDB?

How Dare You!

34

=Front End

Database Infrastructure

Back End

Full Stack

35

MEAN in the Cloud

36

Building with MEAN Stack

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

What were we thinking?

Put graphic transition here

39

Structure your data with the app in mind

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

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.

42

Using Node and Mongoose

Submission Schema

43

Using Mongoose Models

Submission Schema from previous slide (Submit.js):

Using the schema in server.js (node runs this on start up):

44

Mongoose vs. Mongo Java Driver

• Mongoose

• Mongo Java Driver

45

Life of a submission

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

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

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

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

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

51

Jarvis, let’s customize this

52

Search and analytics engine

Hook into your Mongoose Models: Elastic Search

Fuzzy Matching, Relationships, Complex Aggregations

53

Try ElMongoose

https://www.npmjs.com/package/elmongoose

El

54

ElMongoose: Plugin for syncing data with elastic search through mongoose.

Hook into your Mongoose Models: Elastic Search

55

ElMongoose: Plugin for syncing data with elastic search through mongoose.

Hook into your Mongoose Models: Elastic Search

56

Hook into your Mongoose Models: Custom Plugin

You can add methods and hooks to that schema

57

Hook into your Mongoose Models: Custom Plugin

You can add methods and hooks to that schema

58

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

59

MEANingful Success?

MongoDB ExpressJS AngularJS NodeJS

60

New Opportunities

Developers Users

61

Opportunities

SaaS

Modular Development

62

Modular Development - What is it?

Modular Development

63

Why Modular Development?

More FlexibleFaster

64

Modular Example

Rolodex Module(Handles End User Management)

ModuleRoutes Controllers Assets

65

How Modular Development?

CORE PROJECT

Login Rolodex Email

Features

ModuleRoutes Controllers Assets

66

How Modular Development?

Routes Assets

67

How Modular Development?

ModuleRoutes Controllers Assets

CORE Project

ModuleRoutes Controllers Assets

SUB Module

68

How Modular Development?

69

How Modular Development?

gruntfile.js

70

Custom Version of SUB

SUB Application

Login User Management

Email

71

What do we build with these?

72

SAAS(Software as a Service)

SaaS

■ Modular Feature Design■ Single and Multi Tenant Options

73

Single Tenant Application(Software as a Service)

Application

Database SecurityStorage

74

Single Tenant Application(Software as a Service)

Application

Database

LOGIN

Storage Security

75

Multi Tenant Application(Software as a Service)

Application

DatabaseCollection Collection CollectionCollection

76

Multi Tenant Application(Software as a Service)

Application

DatabaseDeveloper ID Admin ID Party Animal ID

Developer Administrator Party Animal

77

SAAS - How Do We Do It?(Software as a Service)

78

SAAS - How Do We Do It?(Software as a Service)

img source: aws.amazon.com

79

SAAS - How Do We Do It?(Software as a Service)

Tenant Type

User Parameters

Instance Build

New Application

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

SAAS - How Do We Do It?(Software as a Service)

(spec file with parameters)

Tenant Type

User Parameters

Instance Build

New Application

82

SAAS - How Do We Do It?(Software as a Service)

Tenant Type

User Parameters

Instance Build

New Application

83

SAAS - How Do We Do It?(Software as a Service)

Tenant Type

User Parameters

Instance Build

New Application

84

Why We (heart) The MEAN Stack

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

Questions?

87

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!

88

Resources

• MongoDB• Mongoose.js• Elasticsearch• Express.js• AngularJS• Node.js• https://www.npmjs.com/package/elmongoose• http://coenraets.org/blog/