Ch-ch-ch-ch-changes
Aydrian Howard, Developer Advocate, MongoDB
Taking Your Stitch Application to the Next Level
with Stitch Triggers
Turn and face the strange
Ch-ch-changes
Don't tell them to grow up and out of it
Ch-ch-ch-ch-changes
Turn and face the strange
Ch-ch-changes
Where's your shame?
You've left us up to our necks in it
Time may change me
But you can't trace time
-- David Bowie
Adding Triggers to Stitch
Faster Cheaper Easier
Industry Trends – Leading to
Stitch
1370 1990
Industry Trends – Leading to
Stitch
19901370 1997
Industry Trends – Leading to
Stitch
19971990 2001
Industry Trends – Leading to
Stitch
20011997 2007
Industry Trends – Leading to
Stitch
20072001 2014
Industry Trends – Leading to
Stitch
20142007 2018
Industry Trends – Leading to
Stitch
20182014
Intelligent Operational Data Platform
Best way to work
with data
Intelligently put data
where you want it
Freedom to run
anywhere
● MongoDB Stitch
● MongoDB Server 4.0
● MongoDB Compass
● MongoDB Charts
● MongoDB Mobile
● MongoDB Server 4.0
● MongoDB Atlas
● Ops Manager 4.0
● Free Cloud Monitoring
The evolution of MongoDB
3.0 3.2
Document Validation
$lookup
Fast Failover
Simpler Scalability
Aggregation ++
Encryption At Rest
In-Memory Storage Engine
BI Connector
MongoDB Compass
APM Integration
Profiler Visualization
Auto Index Builds
Backups to File System
Doc-Level
Concurrency
Compression
Storage Engine API
≤50 replicas
Auditing ++
Ops Manager
Linearizable reads
Intra-cluster compression
Views
Log Redaction
Linearizable Reads
Graph Processing
Decimal
Collations
Faceted Navigation
Zones ++
Aggregation ++
Auto-balancing ++
ARM, Power, zSeries
BI & Spark Connectors ++
Compass ++
Hardware Monitoring
Server Pool
LDAP Authorization
Encrypted Backups
Cloud Foundry Integration
3.4 3.6
Change Streams
Retryable Writes
Expressive Array Updates
Query Expressivity
Causal Consistency
Consistent Sharded Sec. Reads
Compass Community
Ops Manager ++
Query Advisor
Schema Validation
End to End Compression
IP Whitelisting
Default Bind to Localhost
Sessions
WiredTiger 1m+ Collections
MongoDB BI Connector ++
Expressive $lookUp
R Driver
Atlas Cross Region Replication
Atlas Auto Storage Scaling
4.0
Multi-Document ACID Transactions
Atlas Global Sharding
Atlas HIPAA
Atlas LDAP
Atlas Audit
Atlas Encrypted Storage Engine
Atlas AWS Backup Snapshots
Snapshot Reads
Agg Pipeline Type Conversions
40% Faster Shard Migrations
Non-Blocking Secondary Reads
SHA-2
TLS 1.1+
Compass Agg Pipeline Builder
Compass Export to Code
Charts Beta
Monitoring Cloud Service
Ops Manager K8s & OpenShift
MongoDB Stitch GA
MongoDB Mobile (Private Beta)
“We set out to build a database that we would want to use, so
that whenever developers wanted to build an application, they
could focus on the application, not on working around the
database.”
- Eliot Horowitz
MongoDB Query Language + Native DriversIntegrated Rules
Functions3rd Party Services
Native SDKs (JavaScript, Android, iOS)
Rest API
MongoDB Query Language + Native DriversIntegrated Rules
Functions3rd Party Services
Native SDKs (JavaScript, Android, iOS)
Rest API
Stitch Functions
Stitch is a collection of servers that
process application requests
Requests:
• Single actions for Database or Services
• Or executing a Stitch Function
• Integrated with Stitch’s rules
Functions:
• Scalable, hosted JavaScript (ES6)
Functions
• Integrated with application context
• User, Request, Services, Values, etc.
When do we want functions to
execute?
AUTHENTICATION
WEBHOOK/
INTEGRATION
DATABASE EVENTS
3 Contexts Where Functions
Execute
1
2
3
When do we want functions to
execute?
client.executeFunction(…)client.loginWithCredential(…)
AUTHENTICATION
WEBHOOK/
INTEGRATION
DATABASE EVENTS
1
2
3
When do we want functions to
execute?
Incoming Webhooks
(HTTP, Twilio, Github)
AUTHENTICATION
WEBHOOK/
INTEGRATION
DATABASE EVENTS
1
2
3
When do we want functions to
execute?
Database Events
Collection.insertOne(…)
AUTHENTICATION
WEBHOOK/
INTEGRATION
DATABASE EVENTS
1
2
3
Responding to Database Changes in the
Past
Oplog Format
Field Description
ts
The value for this field is a timestamp, which is a data type supported by BSON that is only
ever used for replication.
h The hash field gives each entry a unique identity.
v Version of the oplog format.
op The type of operation. This will be either d (delete), u (update) or i (insert).
ns
The value of the namespace field is the name of the database followed by the name of the
collection.
o2
For updates, the value for this field will be the _id of the document being updated. This field
won’t exist for insertions or deletions.
o
For updates, this field contains the operation that was performed, whilst for inserts and
deletions, it will be the _id of the document that was operated on.
Before Change Streams: Oplog
}
"ts" : Timestamp(1395663575, 1),
"h" : NumberLong("-5862498903080440015"),
"v" : 2,
"op" : "i",
"ns" : ”music.songs",
"o" : {
"_id" : ObjectId("533024470d7e2c31d4443d22"),
"author" : ”David Bowie",
"title" : ”Changes"
}
}
Before Change Streams: Oplog
var MongoDB = require('mongodb');
oplogurl = 'mongodb+srv://mike:<PASSWORD>@dotlocaltalk-hhfkg.mongodb.net/test?retryWrites=true’;
MongoDB.MongoClient.connect(oplogurl, function(err, db) {
db.collection("oplog.rs", function(err, oplog) {
oplog.find({}, {
ts: 1
}).sort({
$natural: -1
}).limit(1).toArray(function(err, data) {
lastOplogTime = data[0].ts;
if (lastOplogTime) {
queryForTime = {
$gt: lastOplogTime
};
} else {
tstamp = new MongoDB.Timestamp(0, Math.floor(new Date().getTime() / 1000))
queryForTime = {
$gt: tstamp
};
}
cursor = oplog.find({
ts: queryForTime
}, {
tailable: true,
awaitdata: true,
oplogReplay: true,
numberOfRetries: -1
});
stream = cursor.stream();
stream.on('data', function(oplogdoc) {
console.log(oplogdoc);
});
});
});
})
OPLOGOPLOG OPLOG
Application
W
R
db.users.insert({,,,})
PRIMARY SECONDARY SECONDARY
db.users.insert({,,,})
A
C
K
db.users.insert({,,,})
R
What’s an Oplog?
OUT OF DATE OUT OF DATE
OPLOGOPLOG OPLOG
Application
W
db.users.insert({,,,})
PRIMARY SECONDARY SECONDARY
db.users.insert({,,,})
A
C
K
db.users.insert({,,,})
W
db.users.update({,,,}) db.users.update({,,,})
A
C
K
db.users.update({,,,})
Monitor
R R
If (insert) {
aws.s3.insertObject(…);
}
Before ChangeStreams and
Triggers
TAILING THE OPLOG
Setting up a Change Stream
(NodeJS)
Setting up a Change Stream
(NodeJS)
Ignore events Tail the oplog Set up change
streams
Triggers
Ignore events Tail the Oplog Set up change
streams
Triggers
Ignore events Tail the oplog Set up change
streams
Triggers
Ignore events Tail the oplog Set up change
streams
Triggers
Triggers in Stitch
Traditional Database
Triggers• Triggers are:
• Code executed when a certain
database event occurs
• Executed within the Database
• Trigger uses include:
• Enforcing Referential/Business logic
• Auditing and Logging
• Security/Validation Logic
• Maintaining Replication
Stitch Coordinates Change
Streams1.Sets-up Change Stream
2.Maintains Streams over time
3.Passes Change Events to
Coordinator
Stitch Infrastructure
Stitch Connection
Event Coordinator
CS 1 CS 3
CS 2
Event Driven Life-cycle
Pending SucceededOwned
Failed Dead
Event is …
Waiting for a ConsumerAttempting ExecutionCompletedAwaiting RetriesRe-Attempting ExecutionUnable to Execute
(Trigger Disabled)
Event-driven Functions for
Communication
FUNCTION
Database
Update
Text/E-mail
EVENT
Push Notification
Event-driven Functions for Data
Propagation
FUNCTION
EVENT
Database
Operation
Stitch Ensures Correct
Execution• Database Events are:
• Generated by matching operations
({match: { …}})
• Fully Ordered
1. Event is Generated
2. Event added to Job Queue
3. Event waits for blocking Events
to complete
4. Event waits for consumer to
attempt execution
Adding Triggers to Stitch
Reduce Time to Market
Functions as a Service: No waiting on
infrastructure
Reduce boilerplate: Save code
Cross-Platform: Develop once
Existing Apps Untouched: No reverse-
engineering
Reduce Ops costs
Serverless: Zero wasted capacity
Payment: No up-front cost
Capacity on Demand: No need to over-
provision in advance
Secure by Default: Less operational effort
Reduce Dev Effort
Backend Integration Built in: No generic
backend code
HA & Scalability Built in: Hard and time
consuming to build Orchestrate Services:
Reuse what's out there
Faster Cheaper Easier
The MongoDB Swagstore
What is the
SwagstoreStandard Retail Store:
• Browse Items
• Add items to cart
• Checkout
• Request Notification for Restock
Additional Features:
• Update/text on item re-stock
• Shipping text/e-mail notification
Stitch Features
• Functions
• Triggers
• 3rd Party Services
Inventory Availability Notification
FUNCTION
Shipping Status
Updated
Your product
is available
EVENT
Swagstore in Action
SHOW COMPASS
CONNECTING TO DB –
SHOW OPLOG
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
Initialization
• Before we leverage any features of Stitch,
we must initialize our API with the Stitch
App Key
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { BrowserRouter } from 'react-router-dom'
import { StitchClientFactory } from 'mongodb-stitch'
const appId = 'ecommercechatbot-glwkl'
let stitchClientPromise = StitchClientFactory.create(appId)
stitchClientPromise.then(stitchClient => {
let db = stitchClient.service('mongodb', 'mongodb-
atlas').db('swagstore')
let props = { stitchClient, db }
ReactDOM.render(
<BrowserRouter>
<App {...props} />
</BrowserRouter>,
document.getElementById('root')
)
registerServiceWorker()
})
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
Authentication
• Leverage integration with Google Sign-in
to authenticate the user and set the user’s
profile context.
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
Browse
• Leverage SDK db.collection() to access
SWAG-STORE database and products
collection
import React, { Component } from 'react'
import { ProductDeck } from '../components/Products'
class ProductsPage extends Component {
constructor(props) {
super(props)
this.state = {
products: []
}
}
getProducts() {
this.props.db
.collection('products’)
.find({ category: this.props.match.params.category })
.execute()
.then(products => {
this.setState({ products })
})
.catch(err => {
console.log(err)
})
}
componentDidMount() {
this.getProducts()
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.match.params.category !== prevProps.match.params.category) {
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
Click on Product
• Reveals Product Page
getProduct() {
this.props.db
.collection('products’)
.findOne({ id: this.props.match.params.id })
.then(product => {
this.setState({
product,
notifying:this.props.notify
.includes(this.props.match.params.id)
})
this.props.handleBrowsedProduct(product)
})
.catch(err => {
console.log(err)
})
}
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
UPDATE NOTIFY
IN
STOCK?
AUTHENTICATION
BROWSE
SELECT ITEM
CART
CHECKOUT
UPDATE NOTIFY
IN
STOCK?
AUTHENTICATION
BROWSE
SELECT ITEM
CART
CHECKOUT
UPDATE NOTIFY
IN
STOCK?
AUTHENTICATION
BROWSE
SELECT ITEM
CART
CHECKOUT
UPDATE NOTIFY
IN
STOCK?
AUTHENTICATION
BROWSE
SELECT ITEM
CART
CHECKOUT
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
AUTHENTICATION
BROWSE
SELECT ITEM
IN
STOCK?
CART
CHECKOUT
UPDATE NOTIFY
Event
Subscriptions in
App StructureEvent Subscriptions are a top-level Stitch asset
Can be constructed in the UI or with the CLI
Event Subscriptions in App
StructureEvent Subscriptions are a top-level Stitch asset
Can be constructed in the UI or with the CLI
Change Streams Future Work
• Non-Atlas/Multiple Application per Application
• Events that span Multiple MongoDB Instances
• Timed Events
• Execute on a certain Interval
• Execute at a given time
• For now, can use Webhooks with CRON service
What do change events look like?
Event Subscription (Trigger) Event Source (Actual event document)
Example Trigger
Name of the Trigger
Type: DATABASE, AUTHENTICATION
Type of Operation to Trigger
Database
Collection
Match Criteria
Full Document or Partial
Function to be called on Trigger
Example Trigger Event Document
Type of Database Operation
Full Document impacted by operation
Database
Collection

MongoDB.local Austin 2018: Ch-Ch-Ch-Ch-Changes: Taking Your MongoDB Stitch Application to the Next Level With Triggers

  • 2.
    Ch-ch-ch-ch-changes Aydrian Howard, DeveloperAdvocate, MongoDB Taking Your Stitch Application to the Next Level with Stitch Triggers
  • 3.
    Turn and facethe strange Ch-ch-changes Don't tell them to grow up and out of it Ch-ch-ch-ch-changes Turn and face the strange Ch-ch-changes Where's your shame? You've left us up to our necks in it Time may change me But you can't trace time -- David Bowie
  • 4.
    Adding Triggers toStitch Faster Cheaper Easier
  • 5.
    Industry Trends –Leading to Stitch 1370 1990
  • 6.
    Industry Trends –Leading to Stitch 19901370 1997
  • 7.
    Industry Trends –Leading to Stitch 19971990 2001
  • 8.
    Industry Trends –Leading to Stitch 20011997 2007
  • 9.
    Industry Trends –Leading to Stitch 20072001 2014
  • 10.
    Industry Trends –Leading to Stitch 20142007 2018
  • 11.
    Industry Trends –Leading to Stitch 20182014
  • 12.
    Intelligent Operational DataPlatform Best way to work with data Intelligently put data where you want it Freedom to run anywhere ● MongoDB Stitch ● MongoDB Server 4.0 ● MongoDB Compass ● MongoDB Charts ● MongoDB Mobile ● MongoDB Server 4.0 ● MongoDB Atlas ● Ops Manager 4.0 ● Free Cloud Monitoring
  • 13.
    The evolution ofMongoDB 3.0 3.2 Document Validation $lookup Fast Failover Simpler Scalability Aggregation ++ Encryption At Rest In-Memory Storage Engine BI Connector MongoDB Compass APM Integration Profiler Visualization Auto Index Builds Backups to File System Doc-Level Concurrency Compression Storage Engine API ≤50 replicas Auditing ++ Ops Manager Linearizable reads Intra-cluster compression Views Log Redaction Linearizable Reads Graph Processing Decimal Collations Faceted Navigation Zones ++ Aggregation ++ Auto-balancing ++ ARM, Power, zSeries BI & Spark Connectors ++ Compass ++ Hardware Monitoring Server Pool LDAP Authorization Encrypted Backups Cloud Foundry Integration 3.4 3.6 Change Streams Retryable Writes Expressive Array Updates Query Expressivity Causal Consistency Consistent Sharded Sec. Reads Compass Community Ops Manager ++ Query Advisor Schema Validation End to End Compression IP Whitelisting Default Bind to Localhost Sessions WiredTiger 1m+ Collections MongoDB BI Connector ++ Expressive $lookUp R Driver Atlas Cross Region Replication Atlas Auto Storage Scaling 4.0 Multi-Document ACID Transactions Atlas Global Sharding Atlas HIPAA Atlas LDAP Atlas Audit Atlas Encrypted Storage Engine Atlas AWS Backup Snapshots Snapshot Reads Agg Pipeline Type Conversions 40% Faster Shard Migrations Non-Blocking Secondary Reads SHA-2 TLS 1.1+ Compass Agg Pipeline Builder Compass Export to Code Charts Beta Monitoring Cloud Service Ops Manager K8s & OpenShift MongoDB Stitch GA MongoDB Mobile (Private Beta)
  • 14.
    “We set outto build a database that we would want to use, so that whenever developers wanted to build an application, they could focus on the application, not on working around the database.” - Eliot Horowitz
  • 15.
    MongoDB Query Language+ Native DriversIntegrated Rules Functions3rd Party Services Native SDKs (JavaScript, Android, iOS) Rest API
  • 16.
    MongoDB Query Language+ Native DriversIntegrated Rules Functions3rd Party Services Native SDKs (JavaScript, Android, iOS) Rest API
  • 17.
    Stitch Functions Stitch isa collection of servers that process application requests Requests: • Single actions for Database or Services • Or executing a Stitch Function • Integrated with Stitch’s rules Functions: • Scalable, hosted JavaScript (ES6) Functions • Integrated with application context • User, Request, Services, Values, etc.
  • 18.
    When do wewant functions to execute? AUTHENTICATION WEBHOOK/ INTEGRATION DATABASE EVENTS 3 Contexts Where Functions Execute 1 2 3
  • 19.
    When do wewant functions to execute? client.executeFunction(…)client.loginWithCredential(…) AUTHENTICATION WEBHOOK/ INTEGRATION DATABASE EVENTS 1 2 3
  • 20.
    When do wewant functions to execute? Incoming Webhooks (HTTP, Twilio, Github) AUTHENTICATION WEBHOOK/ INTEGRATION DATABASE EVENTS 1 2 3
  • 21.
    When do wewant functions to execute? Database Events Collection.insertOne(…) AUTHENTICATION WEBHOOK/ INTEGRATION DATABASE EVENTS 1 2 3
  • 22.
    Responding to DatabaseChanges in the Past
  • 23.
    Oplog Format Field Description ts Thevalue for this field is a timestamp, which is a data type supported by BSON that is only ever used for replication. h The hash field gives each entry a unique identity. v Version of the oplog format. op The type of operation. This will be either d (delete), u (update) or i (insert). ns The value of the namespace field is the name of the database followed by the name of the collection. o2 For updates, the value for this field will be the _id of the document being updated. This field won’t exist for insertions or deletions. o For updates, this field contains the operation that was performed, whilst for inserts and deletions, it will be the _id of the document that was operated on.
  • 24.
    Before Change Streams:Oplog } "ts" : Timestamp(1395663575, 1), "h" : NumberLong("-5862498903080440015"), "v" : 2, "op" : "i", "ns" : ”music.songs", "o" : { "_id" : ObjectId("533024470d7e2c31d4443d22"), "author" : ”David Bowie", "title" : ”Changes" } }
  • 25.
    Before Change Streams:Oplog var MongoDB = require('mongodb'); oplogurl = 'mongodb+srv://mike:<PASSWORD>@dotlocaltalk-hhfkg.mongodb.net/test?retryWrites=true’; MongoDB.MongoClient.connect(oplogurl, function(err, db) { db.collection("oplog.rs", function(err, oplog) { oplog.find({}, { ts: 1 }).sort({ $natural: -1 }).limit(1).toArray(function(err, data) { lastOplogTime = data[0].ts; if (lastOplogTime) { queryForTime = { $gt: lastOplogTime }; } else { tstamp = new MongoDB.Timestamp(0, Math.floor(new Date().getTime() / 1000)) queryForTime = { $gt: tstamp }; } cursor = oplog.find({ ts: queryForTime }, { tailable: true, awaitdata: true, oplogReplay: true, numberOfRetries: -1 }); stream = cursor.stream(); stream.on('data', function(oplogdoc) { console.log(oplogdoc); }); }); }); })
  • 26.
    OPLOGOPLOG OPLOG Application W R db.users.insert({,,,}) PRIMARY SECONDARYSECONDARY db.users.insert({,,,}) A C K db.users.insert({,,,}) R What’s an Oplog? OUT OF DATE OUT OF DATE
  • 27.
    OPLOGOPLOG OPLOG Application W db.users.insert({,,,}) PRIMARY SECONDARYSECONDARY db.users.insert({,,,}) A C K db.users.insert({,,,}) W db.users.update({,,,}) db.users.update({,,,}) A C K db.users.update({,,,}) Monitor R R If (insert) { aws.s3.insertObject(…); } Before ChangeStreams and Triggers TAILING THE OPLOG
  • 28.
    Setting up aChange Stream (NodeJS)
  • 29.
    Setting up aChange Stream (NodeJS)
  • 30.
    Ignore events Tailthe oplog Set up change streams Triggers
  • 31.
    Ignore events Tailthe Oplog Set up change streams Triggers
  • 32.
    Ignore events Tailthe oplog Set up change streams Triggers
  • 33.
    Ignore events Tailthe oplog Set up change streams Triggers
  • 34.
  • 35.
    Traditional Database Triggers• Triggersare: • Code executed when a certain database event occurs • Executed within the Database • Trigger uses include: • Enforcing Referential/Business logic • Auditing and Logging • Security/Validation Logic • Maintaining Replication
  • 36.
    Stitch Coordinates Change Streams1.Sets-upChange Stream 2.Maintains Streams over time 3.Passes Change Events to Coordinator Stitch Infrastructure Stitch Connection Event Coordinator CS 1 CS 3 CS 2
  • 37.
    Event Driven Life-cycle PendingSucceededOwned Failed Dead Event is … Waiting for a ConsumerAttempting ExecutionCompletedAwaiting RetriesRe-Attempting ExecutionUnable to Execute (Trigger Disabled)
  • 38.
  • 39.
    Event-driven Functions forData Propagation FUNCTION EVENT Database Operation
  • 40.
    Stitch Ensures Correct Execution•Database Events are: • Generated by matching operations ({match: { …}}) • Fully Ordered 1. Event is Generated 2. Event added to Job Queue 3. Event waits for blocking Events to complete 4. Event waits for consumer to attempt execution
  • 41.
    Adding Triggers toStitch Reduce Time to Market Functions as a Service: No waiting on infrastructure Reduce boilerplate: Save code Cross-Platform: Develop once Existing Apps Untouched: No reverse- engineering Reduce Ops costs Serverless: Zero wasted capacity Payment: No up-front cost Capacity on Demand: No need to over- provision in advance Secure by Default: Less operational effort Reduce Dev Effort Backend Integration Built in: No generic backend code HA & Scalability Built in: Hard and time consuming to build Orchestrate Services: Reuse what's out there Faster Cheaper Easier
  • 42.
  • 43.
    What is the SwagstoreStandardRetail Store: • Browse Items • Add items to cart • Checkout • Request Notification for Restock Additional Features: • Update/text on item re-stock • Shipping text/e-mail notification Stitch Features • Functions • Triggers • 3rd Party Services
  • 44.
    Inventory Availability Notification FUNCTION ShippingStatus Updated Your product is available EVENT
  • 45.
  • 46.
    SHOW COMPASS CONNECTING TODB – SHOW OPLOG
  • 48.
    AUTHENTICATION BROWSE SELECT ITEM IN STOCK? CART CHECKOUT UPDATE NOTIFY Initialization •Before we leverage any features of Stitch, we must initialize our API with the Stitch App Key import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' import registerServiceWorker from './registerServiceWorker' import { BrowserRouter } from 'react-router-dom' import { StitchClientFactory } from 'mongodb-stitch' const appId = 'ecommercechatbot-glwkl' let stitchClientPromise = StitchClientFactory.create(appId) stitchClientPromise.then(stitchClient => { let db = stitchClient.service('mongodb', 'mongodb- atlas').db('swagstore') let props = { stitchClient, db } ReactDOM.render( <BrowserRouter> <App {...props} /> </BrowserRouter>, document.getElementById('root') ) registerServiceWorker() })
  • 49.
    AUTHENTICATION BROWSE SELECT ITEM IN STOCK? CART CHECKOUT UPDATE NOTIFY Authentication •Leverage integration with Google Sign-in to authenticate the user and set the user’s profile context.
  • 50.
    AUTHENTICATION BROWSE SELECT ITEM IN STOCK? CART CHECKOUT UPDATE NOTIFY Browse •Leverage SDK db.collection() to access SWAG-STORE database and products collection import React, { Component } from 'react' import { ProductDeck } from '../components/Products' class ProductsPage extends Component { constructor(props) { super(props) this.state = { products: [] } } getProducts() { this.props.db .collection('products’) .find({ category: this.props.match.params.category }) .execute() .then(products => { this.setState({ products }) }) .catch(err => { console.log(err) }) } componentDidMount() { this.getProducts() } componentDidUpdate(prevProps, prevState, snapshot) { if (this.props.match.params.category !== prevProps.match.params.category) {
  • 52.
    AUTHENTICATION BROWSE SELECT ITEM IN STOCK? CART CHECKOUT UPDATE NOTIFY Clickon Product • Reveals Product Page getProduct() { this.props.db .collection('products’) .findOne({ id: this.props.match.params.id }) .then(product => { this.setState({ product, notifying:this.props.notify .includes(this.props.match.params.id) }) this.props.handleBrowsedProduct(product) }) .catch(err => { console.log(err) }) }
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
    Event Subscriptions in App StructureEventSubscriptions are a top-level Stitch asset Can be constructed in the UI or with the CLI
  • 61.
    Event Subscriptions inApp StructureEvent Subscriptions are a top-level Stitch asset Can be constructed in the UI or with the CLI
  • 62.
    Change Streams FutureWork • Non-Atlas/Multiple Application per Application • Events that span Multiple MongoDB Instances • Timed Events • Execute on a certain Interval • Execute at a given time • For now, can use Webhooks with CRON service
  • 64.
    What do changeevents look like? Event Subscription (Trigger) Event Source (Actual event document)
  • 65.
    Example Trigger Name ofthe Trigger Type: DATABASE, AUTHENTICATION Type of Operation to Trigger Database Collection Match Criteria Full Document or Partial Function to be called on Trigger
  • 66.
    Example Trigger EventDocument Type of Database Operation Full Document impacted by operation Database Collection