Slide 1
Slide 1 text
A Gentle Introduction To
Building Serverless Apps
Joe Karlsson | Developer Advocate | @JoeKarlsson1
Slide 2
Slide 2 text
@JoeKarlsson1
I’ve heard of Serverless, but I
don't know much about it
Slide 3
Slide 3 text
{
name: “Joe Karlsson”,
company: “MongoDB”,
title: [
“Developer Advocate”,
“Software Engineer”
],
}
twitter: “@JoeKarlsson1”,
twitch: “joe_karlsson”,
tiktok: “joekarlsson”,
website: “joekarlsson.com”,
opinions: “my own”,
links: “bit.ly/IntroToServerless”
Slide 4
Slide 4 text
Agenda
@JoeKarlsson1
Introduction to Serverless
Guided Serverless Demo
Future of Serverless
Slide 5
Slide 5 text
Agenda
@JoeKarlsson1
Introduction to Serverless
Guided Serverless Demo
Future of Serverless
Slide 6
Slide 6 text
Introduction to
Serverless
@JoeKarlsson1
Slide 7
Slide 7 text
What is
Serverless?
Quickly build applications
without having to set up
server infrastructure.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@JoeKarlsson1
Ok, so why is Serverless
so popular rn?
Slide 12
Slide 12 text
Why is Serverless so cool?
No managing of infrastructure, whatsoever
No provisioning
No patching
No capacity planning
No scaling
Slide 13
Slide 13 text
77%
increase in delivery
speed
Serverless Survey: +77% Delivery Speed, 4 Dev Workdays/Mo Saved & -26% AWS Monthly Bill by Annika Helendi
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
@JoeKarlsson1
Sounds great, so what’s
the catch?
Slide 16
Slide 16 text
Serverless, what’s the catch?
Server’s need to “warmed up”
State must be external
DevOps is still a thing
Slide 17
Slide 17 text
@JoeKarlsson1
Okay, but when should I
consider using Serverless?
Slide 18
Slide 18 text
When should you go Serverless?
Occasional Server needs on a static site
Variable traffic levels
Additional compute without extending current system
Any web app that you want to be cheaper!
Slide 19
Slide 19 text
@JoeKarlsson1
There are a ton of
serverless providers out there,
which one should I choose?
Slide 20
Slide 20 text
Serverless Provider considerations:
Avoid Vendor lock-in
Works with a broad set of services
Easy
Slide 21
Slide 21 text
I may be biased,
but…
Slide 22
Slide 22 text
@JoeKarlsson1
MongoDB Stitch
is a great
choice
@JoeKarlsson1
Slide 23
Slide 23 text
QueryAnywhere Functions
Triggers Mobile Sync
Slide 24
Slide 24 text
Agenda
@JoeKarlsson1
Introduction to Serverless
Guided Serverless Demo
Future of Serverless/
Recap
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
@JoeKarlsson1
App Architecture
Stitch
MongoDB Atlas
Journal.entries
Trigger
onSharedItems
Function
notifyUsersOfShare
Services
Amazon SES
React Journal App
Amazon SES
Slide 27
Slide 27 text
Connecting a React
app up to a
serverless provider
Slide 28
Slide 28 text
import React, { Component } from "react";
import ReactDOM from “react-dom";
class StitchApp extends Component {
static propTypes = {
};
}
import {
Stitch,
UserPasswordCredential,
RemoteMongoClient
} from "mongodb-stitch-browser-sdk";
ReactDOM.render(
,
document.getElementById("root")
);
appId: PropTypes.string.isRequired
Slide 29
Slide 29 text
Alright, let’s get
some data!
QueryAnywhere
Slide 30
Slide 30 text
import React, { Component } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import {
Stitch,
UserPasswordCredential,
RemoteMongoClient
} from "mongodb-stitch-browser-sdk";
class StitchApp extends Component {
static propTypes = {
appId: PropTypes.string.isRequired
};
}
ReactDOM.render(
,
document.getElementById("root")
);
import Page from "./components/Page";
import Journal from "./components/Journal";
constructor(props) {
super(props);
this.appId = props.appId;
}
this.client = Stitch.initializeDefaultAppClient(this.appId);
this.mongodb = this.client.getServiceClient(
RemoteMongoClient.factory,
"mongodb-atlas"
);
render() {
return (
);
}
index.js
Slide 31
Slide 31 text
import React, { Component } from "react";
import Card from “../Card”;
class Journal extends Component {
constructor(props) {
super(props);
Journal.js
const { mongodb } = this.props;
this.entries = mongodb.db(“Journal”).collection(“entries”);
this.state = {
entries: []
};
}
async componentDidMount() {
// Fetch existing journal entries
const entries = await this.entries.find({}).asArray();
// Add entries to Component State
this.setState({ entries });
}
render() {
return (
{
this.state.entries.map((entry) => {
return
});
}
);
}
}
export default Journal;
Slide 32
Slide 32 text
addEntry = async (title = "Untitled", body) => {
const { currentUser } = this.props;
const newEntry = {
title,
body,
owner_id: currentUser.id,
author: currentUser.profile.data.email,
date: new Date(),
sharedWith: []
};
// Add newEntry to MongoDB here
const result = await this.entries.insertOne(newEntry);
newEntry._id = result.insertedId;
// Add newEntry to Component State
this.setState(({ entries }) => ({
entries: [...entries, newEntry]
}));
};
removeEntry = async entryId => {
// Delete the entry from MongoDB
await this.entries.deleteOne({ _id: entryId });
// Remove Entry from Component State
this.setState(({ entries }) => ({
entries: entries.filter(entry => entry._id !== entryId)
}));
};
updateEntry = async (entryId, newBody) => {
// Update the Entry body in MongoDB
await this.entries.updateOne({ _id: entryId }, { $set: { body: newBody } });
// Update the Entry body and disable editing in Component State
this.setState(({ entries }) => ({
entries: entries.map(
entry =>
entry._id === entryId
? { ...entry, body: newBody, isEditable: false }
: entry
)
}));
};
Slide 33
Slide 33 text
Speed Round!
Slide 34
Slide 34 text
Stitch
Services
@JoeKarlsson1
* Includes more than 20 services
Slide 35
Slide 35 text
@JoeKarlsson1
▪ Fire in Response to Data Changes
▪ Built on MongoDB Change Streams
▪ Pass Change Events to Functions
▪ Use Multiple Triggers per Collection
Triggers
Slide 36
Slide 36 text
Stitch Logs
@JoeKarlsson1
Useful for auditing any events in
your application
Can also be invaluable in root
cause analysis for any other
issues
Slide 37
Slide 37 text
FAQ
▪ Can I use this for free?
▪ Yes! Stitch provides a free tier:
▪ Do I have to use the GUI?
▪ No, There is a CLI available
▪ Do I have to use JS to write serverless
functions?
▪ Yes
Slide 38
Slide 38 text
Agenda
@JoeKarlsson1
Introduction to Serverless
Guided Serverless Demo
Future of Serverless
Slide 39
Slide 39 text
@JoeKarlsson1
What’s next for Serverless?
Slide 40
Slide 40 text
The future of Serverless
Abstraction is on the rise
More serverless services will have a Serverless option
MongoDB acquired Realm
Any web app that you want to be cheaper!
Slide 41
Slide 41 text
Intro to Serverless
Slide 42
Slide 42 text
Why is serverless so cool?
No managing of infrastructure, whatsoever
No provisioning
No patching
No capacity planning
No scaling
Intro to Serverless
Slide 43
Slide 43 text
Server’s need to “warmed up”
State must be external
DevOps is still a thing
Serverless, what’s the catch?
Intro to Serverless
Why is serverless so cool?
Slide 44
Slide 44 text
Occasional Server needs on a static site
Variable traffic levels
Additional compute without extending current system
Any web app that you want to be cheaper!
When should you go Serverless?
Serverless, what’s the catch?
Intro to Serverless
Why is serverless so cool?
Slide 45
Slide 45 text
MongoDB Stitch
Avoid Vendor lock-in
Works with a broad set of services
Easy
When should you go Serverless?
Serverless, what’s the catch?
Intro to Serverless
Why is serverless so cool?
Slide 46
Slide 46 text
Intro to Serverless
Guided Serverless Demo
Slide 47
Slide 47 text
Intro to Serverless
Guided Serverless Demo
Stitch
Trigger Function
Services
React
Amazo
Slide 48
Slide 48 text
Intro to Serverless
Guided Serverless Demo
Connecting to a Serverless Provider
Slide 49
Slide 49 text
Intro to Serverless
Guided Serverless Demo
Connecting to a Serverless Provider
Querying MongoDB from the frontend
Slide 50
Slide 50 text
Intro to Serverless
Guided Serverless Demo
The Future of Serverless
Slide 51
Slide 51 text
Intro to Serverless
Guided Serverless Demo
Abstraction is on the rise
More serverless services will have a Serverless option
MongoDB acquired Realm
Any web app that you want to be cheaper!
The Future of Serverless
Slide 52
Slide 52 text
@JoeKarlsson1
Questions?
Slide 53
Slide 53 text
@JoeKarlsson1
What’s Next?
Slide 54
Slide 54 text
http://bit.ly/fromSQLToNoSQL
Slide 55
Slide 55 text
@JoeKarlsson1
Want $100 in FREE MongoDB Atlas
credits?
Use code JoeK100
http://bit.ly/FreeAtlasCredits
Slide 56
Slide 56 text
@JoeKarlsson1
Additional
Resources
Stitch Docs: https://docs.mongodb.com/stitch
Source code: https://github.com/JoeKarlsson/
mongodb-stitch-todo-tutorial
All Resources: https://bit.ly/IntroToServerless
Slide 57
Slide 57 text
{
name: “Joe Karlsson”,
company: “MongoDB”,
title: [
“Developer Advocate”,
“Software Engineer”
],
}
twitter: “@JoeKarlsson1”,
twitch: “joe_karlsson”,
tiktok: “joekarlsson”,
website: “joekarlsson.com”,
opinions: “my own”,
links: “bit.ly/IntroToServerless”
Slide 58
Slide 58 text
@JoeKarlsson1
Thank you!
Slide 59
Slide 59 text
{
name: “Joe Karlsson”,
company: “MongoDB”,
title: [
“Developer Advocate”,
“Software Engineer”
],
}
twitter: “@JoeKarlsson1”,
twitch: “joe_karlsson”,
tiktok: “joekarlsson”,
website: “joekarlsson.com”,
opinions: “my own”,
links: “bit.ly/IntroToServerless”
Slide 60
Slide 60 text
@JoeKarlsson1