luke.dewitt

$ cd ~/talks/yellow-serverless-submarine

2018-10-01Web Unleashed 2018Toronto, ON

We All Live in a Yellow (Serverless) Submarine⁠

What "serverless" actually means for web developers: why you'd use it, when it fits, when it doesn't, and a live demo of a serverless meme generator.

$ open slides

  1. We All Live In A Yellow (Serverless) Submarine
  2. Welcome.
  3. Luke DeWitt WEB TEAM LEAD / DAD / SMOKER OF VARIOUS MEATS / SAD BLUE JAYS FAN This is Your Captain Speaking
  4. Luke DeWitt WEB TEAM LEAD / DAD / SMOKER OF VARIOUS MEATS / SAD BLUE JAYS FAN This is Your Captain Speaking ARRRRR!!
  5. Luke DeWitt WEB TEAM LEAD / DAD / SMOKER OF VARIOUS MEATS / SAD BLUE JAYS FAN This is Your Captain Speaking
  8. Serverless
  9. Serverless
  10. Serverless Server - Less =
  11. Serverless A cloud computing model where-by a server dynamically allocates machine resources to execute code on-demand.
  12. Serverless
  13. Serverless • Also referred to FaaS (Functions as a Service) • Originator: Zimki - 2006 • Introduced by Amazon in 2014 (AWS Lambda)
  14. Serverless
  15. Serverless
  16. Why?
  17. Why Serverless? • No need to deal with f*%&ing servers
  18. Why Serverless? • Let’s you concentrate on what’s important to your clients and users
  19. Why Serverless? • Cheap • 128MB • $0.000000208 / 100ms • 1024MB • $0.000001667 / 100ms • Function at 1024MB, runs 1000X at 80ms / exec • $0.1667 = 17 cents
  20. Why Serverless? • Auto-Scaling
  21. Why Serverless? • Less complex development
  22. Why Serverless? • Prototyping
  23. Why Serverless? • Get sh*t done faster
  24. When?
  25. When Serverless? • Websites / APIs
  26. When Serverless? • Event Streaming w/ Pub/Sub
  27. When Serverless? • IOT
  28. When Serverless? • Continuous Integration
  29. When Serverless? • Image / Video Manipulation NOT A HOTDOG
  30. Why?
  31. Why Not?
  32. Why Not Serverless? • Kind of a pain in the ass getting started • All of the providers are different
  33. Why Not Serverless? • No server = No control • Difficult to test • Logging and Error Handling
  34. Why Not Serverless? • Cost model may not make sense • Your language may not be supported • Execution time limits
  35. Why Not Serverless? • Cold start
  36. Why Not Serverless? • Cold start
  37. Serverless
  38. And then ... ?
  39. What’s Next? • Serverless Databases • Containers
  40. Talk is cheap...
  41. Demo time!
  42. Serverless Demo • React App • User Uploads a Photo to S3 • Triggers Lambda Function • Image Modified, Saved to S3 • Share to Social Media • Meme Generator
  43. Serverless Demo
  44. Serverless Demo
  45. React App NOT A REACT TALK
  46. Upload to S3 Amplify.configure({ Auth: { identityPoolId: process.env.IDENTITY_POOL_ID, region: process.env.AWS_REGION }, Storage: { bucket: process.env.UPLOAD_BUCKET, region: process.env.AWS_REGION } }); let filename = shortid.generate(); this.setState({ photoUrl: `//www.thatsweb.ca/uploads/${filename}.png` }); Amplify.Storage.put( `${filename}.png`, this.dataURItoBlob(this.photo.current.src), {…
  47. Trigger Lambda Function
  48. Lambda Function Code const s3 = new AWS.S3(); exports.handler = (event, context, callback) => { const key = event.Records ? event.Records[0].s3.object.key : process.env.TEST_IMAGE; const inputParams = { Bucket: process.env.TRIGGER_BUCKET, Key: key }; // download image from s3 that triggered the lambda event return s3.getObject(inputParams, (err, data) => { Get the image Get uploaded photo…
  49. Lambda Function Code Build the meme const input = data.Body; // composite the meme image on top of the uploaded image gm(input, "input.png") .composite("./thatsweb.png") .stream("png", (err, stdout, stderr) => { let buf = new Buffer(""); stdout.on("data", data => { buf = Buffer.concat([buf, data]); }); stdout.on("end", data => { // upload the meme to s3 const destinationParams = { Bucket:…
  50. Lambda Function Code Connect to DB Save Record const connection = mysql.createConnection({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASS, database: process.env.DB_NAME }); connection.connect(function(err) { if (err) { callback(err); } }); const record = { uuid: recordId[1], ip: event.Records ? event.Records[0].requestParameters.sourceIPAddress : "testing-ip"…
  51. Endpoint Polling searchForMeme() { let img = new Image(); img.onload = () => { this.photo.current.src = this.state.photoUrl; this.setState({ stage: "share" }); }; img.onerror = () => { // try again in half a second... img = null; return setTimeout(this.searchForMeme, 500); }; img.src = this.state.photoUrl; }
  52. BONUS?
  53. Fetch Flow
  54. Fetch Memes
  55. Get Endpoint connection.query("SELECT COUNT(*) AS count FROM thatsweb", (err, results) => { const { count } = results[0]; let query = "SELECT uuid FROM thatsweb ORDER BY (id * RAND())"; if (count > 20) { query += " LIMIT 20;"; } connection.query(query, (err, results) => { if (err) { callback(err); } function shuffle(a) { for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random()…
  56. Fetch Memes fetch("https://api.thatsweb.ca/v1/memes", { headers: { "x-api-key": process.env.API_GATEWAY_KEY } }) .then(resp => resp.json()) .then(resp => this.setState({ memes: resp.memes }) ); <div className="thatsweb-list__memes"> {memes.map((m, idx) => ( <MemeThumb uuid={m} key={idx} /> ))} </div> const MemeThumb = ({ uuid }) => { return ( <div className="thatsweb-list__meme"> <Link…
  57. Your Turn
  58. https://www.thatsweb.ca
  59. https://www.github.com/ whatadewitt/thatsweb
  60. Thank you for coming!
  61. redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspace LUKE DEWITT @whatadewitt Thank You!
  62. Thank You! Oh, by the way, we’re hiring! https://www.redspace.com/jobs
1 / 62
download pdf ↓

$ cat notes.md

I’m your captain today on this adventure through the high seas of serverless… but it’s a submarine, so I don’t know if “high seas” applies.

What it is

Serverless is one of those buzzwords everyone uses and not a lot of folks understand, like “big data” or “the blockchain.” The first misconception: it doesn’t mean no servers. It means you stop worrying about managing them. Leave the boxes to the professionals, and the code to you. Think of it as server-less.

The concise version: a cloud computing model where a server dynamically allocates resources to execute your code on demand. You’ll also hear it called FaaS, functions as a service.

It isn’t new, either. Zimki offered pay-as-you-go computing back in 2006, and was shut down on Christmas Eve 2007 (Ebenezer Scrooge must have been an investor). The idea was reborn in 2014 with AWS Lambda, and now it’s everywhere: Google Cloud Functions, Azure Functions, Apache OpenWhisk, and more. Lambda started with only Node and now runs Python, Java, Go and C# too. Most of this talk is about Lambda, because that’s where my experience is.

Why serverless?

  • No servers to deal with. Focus on what you do well: building something great for your users and clients.
  • It’s cheap. At 1024MB, a function that runs 1,000 times at 80ms each (AWS rounds up to 100ms) costs about 17 cents. Host the form on S3 too and you’re running a site for less than a quarter a month, before bandwidth and the database.
  • It scales automatically. If that form blows up to thousands of submissions a minute, it keeps up without you.
  • Less complex development, and fast prototyping. You can prove an idea is feasible quickly and cheaply.
  • You get stuff done faster. There are only so many hours in the day to play Fortnite.

When it fits

  • Websites and APIs with an endpoint or two.
  • Event streaming and pub/sub. Functions don’t have to run on an HTTP request: file uploads, log messages, cron schedules and database changes can all trigger them.
  • IoT. I hate the term, but a lot of those platforms run on serverless.
  • Continuous integration, like running tests on every push.
  • Image and video work: cropping, resizing, pulling audio, filters, even detecting illicit content. (Not a hotdog.)

Why not?

  • Getting started is a pain. There’s a lot to learn about security, permissions and deployments first, and every provider is different.
  • No server means less control.
  • Testing is hard, and logging and error handling take extra setup.
  • The cost model may not fit. A $3 or $4 server might be worth it to skip the hassle.
  • Your language might not be supported, and there are execution time limits (about five minutes on Lambda at the time).
  • Cold starts. The first run loads your function into memory, and you pay for that time. Under heavy concurrent load, you pay it on multiple boxes. If response time matters most, those extra hundreds of milliseconds could be a problem.

None of these are dealbreakers. Just know them, and pick what’s best for your project.

What’s next

“Serverless” is spreading past functions: serverless databases, priced on storage and I/O, and serverless containers like AWS Fargate, billed only while your container is up.

Demo: the #thatsweb meme generator

Talk is cheap. So: a React app (this is not a React talk) uploads a photo to S3 with AWS Amplify. The upload triggers a Lambda function that composites the #thatsweb frame onto the photo with ImageMagick, saves it to a public bucket, and records it in a serverless database. The app polls the public bucket until the meme shows up, then you share it. A second endpoint pulls 20 random memes back out, which is the more typical HTTP-triggered flow.

One tip from building it: lock down your upload bucket’s policy so people can’t upload whatever they want.

The code is on GitHub: whatadewitt/thatsweb.

visitor@whatadewitt: ~