Deep Dive on MongoDB Serverless

1. MongoDB Stitch Tutorial
Deep Dive on MongoDB Serverless

2. This presentation contains “forward-looking statements” within the meaning of Section 27A of the Securities Act of 1933,
as amended, and Section 21E of the Securities Exchange Act of 1934, as amended. Such forward-looking statements are
subject to a number of risks, uncertainties, assumptions and other factors that could cause actual results and the timing of
certain events to differ materially from future results expressed or implied by the forward-looking statements. Factors that
could cause or contribute to such differences include, but are not limited to, those identified our filings with the Securities
and Exchange Commission. You should not rely upon forward-looking statements as predictions of future events.
Furthermore, such forward-looking statements speak only as of the date of this presentation.
In particular, the development, release, and timing of any features or functionality described for MongoDB products
remains at MongoDB’s sole discretion. This information is merely intended to outline our general product direction and it
should not be relied on in making a purchasing decision nor is this a commitment, promise or legal obligation to deliver
any material, code, or functionality. Except as required by law, we undertake no obligation to update any forward-looking
statements to reflect events or circumstances after the date of such statements.
Safe Harbor Statement

3. Jason Flax
Senior Engineer
Stitch

4. Stitch

5. Stitch: What is it?
• Provide an interface for users to interact
with your app.
• Handle user actions and send requests to
the app server.
• Authenticate users and allow them to use
app features.
• Handle data requests and execute
business logic.
• Store and search persisted application
data.
• Manage data integrity, consistency, and
availability.

6. Stitch SDK
Packages the entire mobile stack together
Stitches the frontend and backend together
• End-to-end Mobile SDK
• API for local storage
• API for remote Stitch service invocation
• API for syncing between local and remote
• Provides a transparent bridge for applications
iOS SDK: https://github.com/mongodb/stitch-ios-sdk/
Android SDK: https://github.com/mongodb/stitch-android-sdk/
final StitchAppClient client = Stitch.getDefaultAppClient();
final MongoClient mongoClient = client.getServiceClient(LocalMongoDbService.ClientFactory);
MongoCollection<Document> items =
mongoClient.getDatabase(TodoItem.TODO_LIST_DATABASE).getCollection(TodoItem.TODO_LIST_COLLE
CTION);
public void updateChecked(final ObjectId itemId, final boolean isChecked) {
final Document updateDoc = new Document("$set", new Document(TodoItem.CHECKED_KEY, isChecked));
if (isChecked) {
updateDoc.append("$currentDate", new Document(TodoItem.DONE_DATE_KEY, true));
} else {
updateDoc.append("$unset", new Document(TodoItem.DONE_DATE_KEY, ""));
}
items.updateOne(new Document(TodoItem.ID_KEY, itemId), updateDoc);
...
}
private List<TodoItem> getItems() {
final ArrayList<TodoItem> todoItems = new ArrayList<>();
for (final Document doc : items.find()) {
if (TodoItem.isTodoItem(doc)) {
final TodoItem item = new TodoItem(doc);
todoItems.add(item);
}
}
return todoItems;
}
Stitch

7. Let’s build a chat app

8. User Authentication
Built-In Identity Providers
• Anonymous
• Email / Password
• OAuth 2.0 (Facebook & Google)
• API Key (Server & User)
• Custom (Bring Your Own Auth)
Application Users
• Associated with one or more identities
• Must authenticate to send requests
• Trigger authentication events

9. Custom User
/**
* The customer user object relative to our Stitch user that contains
* extended profile information.
*
* @param _id {String} the id of the associated Stitch user
* @param name {String} the chosen username of this user
* @param defaultAvatarOrdinal {Number} 0-7 the default avatar we choose for this user
* @param avatar {Binary?} the uploaded avatar for this user
* @param channelsSubscribedTo {StringArray} the channels this user is subscribed to
*/
export function User(_id, name, defaultAvatarOrdinal, avatar, channelsSubscribedTo) {
return {
_id, name, defaultAvatarOrdinal, avatar, channelsSubscribedTo
};
}

10. Server-Side Rules
Declarative Expressions
• Specify rule conditions with a document
• Access specific request/document values.
Dynamic Evaluation
• Add complex and/or personalized rules with
expansions and operators.
Secure by Default
• If an action does not pass any rule, Stitch
prevents the action

11. LoginView
export default class LoginView
extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
updateInputValue(evt) {
this.setState({
inputValue: evt.target.value
});
}
render() {
return (
<ChatLayout>
<LinearLayout>
<ChitChat>chit chat</ChitChat>
<Block />
<LoginInput placeholder="username"
style={{marginBottom: 20 + "px"}}
value={this.state.inputValue}
onChange={evt =>
this.updateInputValue(evt)} />
<LoginButton onClick={async () =>
await this.onLogin()}>login</LoginButton>
</LinearLayout>
</ChatLayout>
);
}

12. async onLogin() {
if (this.state.inputValue.length < 3) {
return
}
const stitchUser = await client.auth.loginWithCredential(new AnonymousCredential());
await usersCollection.insertOne(
EJSON.serialize(User(
stitchUser.id,
this.state.inputValue,
Math.floor(Math.random() * Math.floor(7)),
null,
["default"]
)));
const rootElement = document.getElementById("root");
ReactDOM.render(<ChatRoom />, rootElement);
}

13. ChannelSubscription
/**
* A vector clock that notifies us when a new message has been sent.
*
* @param _id {ObjectId} the unique id of this subscription
* @param ownerId {String} the user id of the owner of this subscription
* @param deviceId {String} the device id of the owner of this subscription
* @param localTimestamp {Numer} the local logical time
* @param remoteTimestamp {Number} the remote logical time
*/
export function ChannelSubscription(_id, channelId, ownerId, subscriptionId, localTimestamp,
remoteTimestamp) {
return {
_id, channelId, ownerId, deviceId: subscriptionId, localTimestamp, remoteTimestamp
};
}

14. ChannelMessage
/**
* A message one would send to a channel.
*
* @param _id {ObjectId} the unique id of the message
* @param channelId {String} the id of the channel this was sent to
* @param content {String} the actual text of the message
* @param sentAt {Number} the time the message was sent to the server or the time the
message hit the server
* @param remoteTimestamp {Number} the logical time of the message (to be updated by the
server trigger)
*/
export function ChannelMessage(_id, ownerId, channelId, content, sentAt, remoteTimestamp) {
return { _id, ownerId, channelId, content, sentAt, remoteTimestamp };
}

15. ChatRoom
export default class ChatRoom
extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
messages: [],
messageText: ""
}
}
componentDidMount() {
this.subscribeToChannel();
}
render() {
return <ChatLayout>
<ChatFeed messages={this.state.messages} />
<ChatBar sendMessage={text =>
this.sendMessage(text)}
setMessageText={(txt) => {
this.state.messageText = txt
this.setState(this.state)
}}
messageText={this.state.messageText}
/>
</ChatLayout>;
}
}

16. ChannelMessageObserver
export class ChannelMessageObserver extends Observable {
async sync(ids) {
if (this.stream) {
this.stream.close();
}
(await channelMessagesCollection.find({_id: { $in: ids }}).asArray()).forEach((msg) => {
this.notify({fullDocument: msg, operationType: "insert"})
});
this.stream = await channelMessagesCollection.watch(ids);
this.stream.onNext(this.notify);
}
}

17. UserObserver
export class UserObserver extends Observable {
constructor() {
super();
this.cache =
new LRU(50);
}
async sync(id);

18. ::sync(id)
if (this.stream) {
this.stream.close();
}
if (this.cache.has(id)) {
return this.cache.get(id);
}
const user = await usersCollection.find({ _id: id }).first();
this.cache.set(id, user);
this.stream = await usersCollection.watch(this.cache.keys());
this.stream.onNext((event) => { this.notify(event) });
return user;

19. ChannelSubscriptionObserver
export class ChannelSubscriptionObserver extends Observable {
constructor() {
super();
}
async notify(data);

20. ::notify
const subscription = data.fullDocument
if (data.operationType != "update"
|| subscription == null
|| subscription.localTimestamp == subscription.remoteTimestamp) {
return
}
await this.updateLocalVector(data.documentKey["_id"], subscription)
super.notify(data);

21. ::updateLocalVector(id, sub)
const latestMessageIds = (await channelMessagesCollection.find({
channelId: subscription.channelId,
remoteTimestamp: {
$gt: subscription.localTimestamp,
$lte: subscription.remoteTimestamp
}
}).asArray()).map(it => it["_id"])
await channelMessageObserver.sync(latestMessageIds)
await channelSubscriptionsCollection.updateOne(
{ _id: documentId },
{ $set : { localTimestamp: subscription.remoteTimestamp }}
)

22. Functions & Triggers
exports = function(changeEvent) {
// Parse values from the insert change event
// changeEvent.operationType === "INSERT"
const insertedDoc = changeEvent.fullDocument
const { _id, name } = insertedDoc;
// Instantiate a MongoDB service client
const cluster = context.services.get("myCluster");
const myDb = cluster.db("myDb");
const myColl = myDb.collection("myColl");
myColl.updateOne({ _id }, {
"$set": { "someField": "$set" }
})
}
Invoke Serverless Functions
• Written in JavaScript (ES6+)
• Execute dynamically based on context
• Run as a specific application user
• Connect to your application components
• Callable from an SDK or another Function
Trigger Functions on Events
• React to changes in a MongoDB collection
• Execute logic when users are created or log in
• Schedule functions with CRON expressions

23. functions > subscribeToChannel
var mongo = context.services.get("mongodb-atlas");
var channelMembersCollection = mongo.db("chats").collection("channel_members");
var channelSubscriptionsCollection =
mongo.db("chats").collection("channel_subscriptions");
await channelMembersCollection.updateOne({ "_id" : channelId },
{ "$push": { "members" : userId },
"$set": {
"__stitch_sync_version" : {
"spv" : BSON.Int32(1), "id" : “0", "v" : BSON.Long(1) }}},
{ upsert: true });

24. functions > subscribeToChannel
var otherSubscription = await channelSubscriptionsCollection.findOne({
"channelId" : channelId
})
var insertOneResult = await channelSubscriptionsCollection.insertOne({
"ownerId" : userId, "deviceId": deviceId, "channelId" : channelId,
"localTimestamp" : 0,
"remoteTimestamp": otherSubscription ? otherSubscription .remoteTimestamp : 0 }
);
return insertOneResult.insertedId;

25. ::sendMessage
async sendMessage(text) {
const msg = ChannelMessage(
new BSON.ObjectId(),
client.auth.user.id,
"default",
text,
Date.now(),
undefined);
await channelMessagesCollection.insertOne(msg);
this.state.messages.push(msg);
this.setState(this.state);
}

26. triggers > channelMessageHasInserted

27. triggers > channelMessageHasInserted
var messageId = changeEvent.documentKey._id;
var channelId = changeEvent.fullDocument.channelId;
var messagesCollection = context.services
.get("mongodb-atlas").db("chats").collection("messages");
var subscriptionsCollection = context.services
.get("mongodb-atlas")
.db("chats").collection("channel_subscriptions");

28. triggers > channelMessageHasInserted
await subscriptionsCollection.updateMany(
{ "channelId" : channelId },
{ "$inc": { "remoteTimestamp" : 1 }});
await messagesCollection.updateOne(
{ "_id" : messageId },
{ "$set":
{
"sentAt" : Date.now(),
"remoteTimestamp": (await subscriptionsCollection.findOne(
{ "channelId" : channelId })).remoteTimestamp
}
});

29. ::subscribeToChannel
async subscribeToChannel() {
channelMessageObserver.subscribe(event => {
this.state.messages.push(event.fullDocument);
this.setState(this.state);
});
const subscriptionId = await client.callFunction("subscribeToChannel", [
client.auth.user.id,
new ObjectId().toHexString,
"default"
]);
channelSubscriptionObserver.sync(subscriptionId);
}

30. The power of observation
export default class ChatMessage extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.observeUser();
}

31. The power of observation
render() {
const direction = this.props.isFromCurrentUser ? "right" : "left";
const { isLastFromUser, isFirstFromUser, shouldShowHeader } = this.props;
const { sentAt, content } = this.props.message;
const avatar = this.state.user &&
this.state.user.avatar ? 'data:image/jpeg;base64,' +
this.state.user.avatar.buffer.toString('base64') :
this.state.user ? defaultAvatars(this.state.user.defaultAvatarOrdinal)
: "img/mind_map_icn_3.png";
return (...)
}

32. The power of observation
async observeUser() {
usersObserver.subscribe(event => {
if (event.operationType != "update"
|| event.documentKey["_id"] != this.props.message.ownerId) {
return;
}
this.state = { user: event.fullDocument }
this.setState(this.state);
});
this.state = { user: await usersObserver.sync(this.props.message.ownerId) }
this.setState(this.state);
}

33. The power of observation
<input type="file" id="file-upload" onChange={() => {
var reader = new FileReader();
reader.onload = function(e) {
const buffer = new Uint8Array(e.target.result);
console.log(buffer);
const binary = new Binary(buffer);
binary.write(buffer);
console.log(binary);
usersCollection.updateOne(
{ _id: client.auth.user.id },
{ $set: { avatar: binary }}
).then((it) => console.log(it));
}
reader.readAsArrayBuffer(document.querySelector('input').files[0]);
}}/>

34. Licensing,
Pricing, and
Support

35. What’s Next

36. Thank You!