A Gentle Introduction to Building Serverless Apps

Do you want to crank out features the business wants, or spend a lot of time writing code and capacity planning for authentication, authorization, and complicated data access? Of course we all know the answer.

In this session will begin a beginner friendly introduction to Serverless computing. We will then do a quick overview of the MongoDB ecosystem in the 3 major cloud providers for rapid application building. Then we will walk through a guided tutorial of how to use the MongoDB Stitch serverless platform to build your elastically scalable microservices based app within minutes, complete with end-user authentication and access rules, on a fully managed MongoDB cluster in your favorite cloud platform.

Transcript

1. A Gentle Introduction To Building Serverless Apps Joe Karlsson | Developer Advocate | @JoeKarlsson1
2. @JoeKarlsson1 I’ve heard of Serverless, but I don't know much about it
3. { 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”
4. Agenda @JoeKarlsson1 Introduction to Serverless Guided Serverless Demo Future of Serverless
5. Agenda @JoeKarlsson1 Introduction to Serverless Guided Serverless Demo Future of Serverless
6. Introduction to Serverless @JoeKarlsson1
7. What is Serverless? Quickly build applications without having to set up server infrastructure.
11. @JoeKarlsson1 Ok, so why is Serverless so popular rn?
12. Why is Serverless so cool? No managing of infrastructure, whatsoever No provisioning No patching No capacity planning No scaling
13. 77% 
 increase in delivery speed Serverless Survey: +77% Delivery Speed, 4 Dev Workdays/Mo Saved & -26% AWS Monthly Bill by Annika Helendi
15. @JoeKarlsson1 Sounds great, so what’s the catch?
16. Serverless, what’s the catch? Server’s need to “warmed up” State must be external DevOps is still a thing
17. @JoeKarlsson1 Okay, but when should I consider using Serverless?
18. 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!
19. @JoeKarlsson1 There are a ton of serverless providers out there, which one should I choose?
20. Serverless Provider considerations: Avoid Vendor lock-in Works with a broad set of services Easy
21. I may be biased, but…
22. @JoeKarlsson1 MongoDB Stitch is a great choice @JoeKarlsson1
23. QueryAnywhere Functions Triggers Mobile Sync
24. Agenda @JoeKarlsson1 Introduction to Serverless Guided Serverless Demo Future of Serverless/ Recap
26. @JoeKarlsson1 App Architecture Stitch MongoDB Atlas Journal.entries Trigger onSharedItems Function notifyUsersOfShare Services Amazon SES React Journal App Amazon SES
27. Connecting a React app up to a serverless provider
28. 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( <StitchApp appId={“YOURE_STICH_ID”} />, document.getElementById("root") ); appId: PropTypes.string.isRequired
29. Alright, let’s get some data! QueryAnywhere
30. 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( <StitchApp appId={“YOURE_STICH_ID”} />, 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 ( <Page> <Journal mongodb={this.mongodb} /> </Page> ); } index.js
31. 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 ( <JournalContainer> { this.state.entries.map((entry) => { return <Card data={entry} /> }); } </JournalContainer> ); } } export default Journal;
32. 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 ) })); };
33. Speed Round!
34. Stitch Services @JoeKarlsson1 * Includes more than 20 services
35. @JoeKarlsson1 ▪ Fire in Response to Data Changes ▪ Built on MongoDB Change Streams ▪ Pass Change Events to Functions ▪ Use Multiple Triggers per Collection Triggers
36. Stitch Logs @JoeKarlsson1 Useful for auditing any events in your application Can also be invaluable in root cause analysis for any other issues
37. 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
38. Agenda @JoeKarlsson1 Introduction to Serverless Guided Serverless Demo Future of Serverless
39. @JoeKarlsson1 What’s next for Serverless?
40. 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!
41. Intro to Serverless
42. Why is serverless so cool? No managing of infrastructure, whatsoever No provisioning No patching No capacity planning No scaling Intro to Serverless
43. 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?
44. 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?
45. 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?
46. Intro to Serverless Guided Serverless Demo
47. Intro to Serverless Guided Serverless Demo Stitch Trigger Function Services React Amazo
48. Intro to Serverless Guided Serverless Demo Connecting to a Serverless Provider
49. Intro to Serverless Guided Serverless Demo Connecting to a Serverless Provider Querying MongoDB from the frontend
50. Intro to Serverless Guided Serverless Demo The Future of Serverless
51. 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
52. @JoeKarlsson1 Questions?
53. @JoeKarlsson1 What’s Next?
54. http://bit.ly/fromSQLToNoSQL
55. @JoeKarlsson1 Want $100 in FREE MongoDB Atlas credits? Use code JoeK100 http://bit.ly/FreeAtlasCredits
56. @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
57. { 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”
58. @JoeKarlsson1 Thank you!
59. { 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”
60. @JoeKarlsson1