August 2019 Devops Columbia Meetup slide deck on Serverless in AWS. Presentation delivered by Hamik Mukelyan.

1. Super Lazy Side Projects
with serverless & other tools for the certifiably lazy

2. What’s this about?
● DevOps Columbia has had a couple of serverless talks
● I’ll do a little serverless review, but...
● Broad goal: “what’s the laziest way to do a side project?”
○ Specifically, with web apps
● There are a lot of choices for serving a backend
○ Docker, Firebase, Heroku, FaaS, your PC, Jeff Bezos’s PC
○ What makes sense for a small side project?
● And what about frontends?
○ Hopefully not too basic 😶

3. Who am I?
● 2nd time software engineer at Snapchat in LA
○ Worked on infra my first time at Snap
○ Now work on Adobe Premiere-like web apps for publishers
● I left for 2 years to start a Y Combinator funded company
● I was super lazy about starting college
○ Delayed matriculation at Caltech by 1 year 6 times
○ Spent that time rock climbing/mountaineering
○ Graduated and started career at age 27

4. Don’t be an ideas guy
● Let’s say you have a
fun/profitable/ironic idea
● Try a web app!
○ You often don’t need a native
app for idea validation
○ Progressive web apps
(PWAs) blur the lines anyway
○ If you monetize, the app store
won’t take 30%

5. What is a web app?
● They live at URLs. E.g., Gmail
○ Can be single-page apps (SPAs)
● They are built with HTML, CSS, JavaScript
○ Frameworks simplify DOM operations and encourage code reuse
○ React is the most popular, but Vue is 🔥. Angular is like PHP - just don’t
○ Use jQuery for simple projects
○ Use WebAssembly for hardcore projects
● They have (surprisingly?) steep dev learning curves
○ See learning frontend roadmap
○ Consider a templating service like Divjoy for bootstrapping

6. What’s the laziest way to make a web app?
● Just pick a template for some framework and go
○ React: npx create-react-app my-app
○ Vue: npm install -g @vue/cli && vue create my-app
● Don’t waste time learning frontend toolchains a priori
○ Lots of opinions and holy wars
○ Learn about babel, webpack, etc. later
○ All hail hot reloading
● Do waste time playing with Chrome Dev Tools
○ Console tab, network tab, and element inspector are lifesavers

7. What’s the laziest way to make a web app?
● Beware CSS
○ So many nights wasted 😫
○ Be lazy — use a framework
○ Apply complex styles with simple
class names
○ Move over Bootstrap, Bulma 🔥
● Fiddle in Devtools, not code
○ Hot reloading is awesome, but
not that awesome

8. Sweet — you made a web app. Where to put it?
● What’s the laziest way to host?
○ By far, AWS S3 + AWS Route 53 + AWS CloudFront
● Use Route 53 to buy or import domains
○ Routes traffic to your website files (static assets)
● CloudFront serves pages fast
○ In addition to caching, useful for configuring https
● S3 is a file store. Similar to Google Cloud Store (GCS)
○ Static assets go here
○ Check a couple of boxes to serve files to public

9. Sweet — your site is up
● But it has a mocked backend 💔
● What are modern options for the real thing?
○ Hosted on VMs or containers (physical machines are deprecated)
○ Hostless. AKA serverless
● Hosted means you have to do DevOps stuff
○ There are real, persistent machines
○ They are rowdy
○ Have to profile CPU, monitor disk space, manage fleet, patch, etc.
● Hostless means that’s all abstracted away

10. Hosted approach
● Sweating about load balancers/scaling is no longer a thing
○ Thanks, Bezos
● Pros
○ Better for low-level or compute-intensive tasks. E.g., training ML models
○ Sessions and web sockets are easier
○ Friends who might help out are probably more familiar with this approach
○ Dev experience is arguably better. Tooling is more mature
● Cons
○ The zeitgeist has moved on
○ Boils down to: slower to bootstrap, likely more expensive

11. Hostless approach
● There’s still a server… right?
○ Yes, but it’s abstracted away
○ They are spun up and down on an as needed basis
○ No users, no servers running
“All problems in computer science can be solved by another level of
indirection.” — David Wheeler

12. Hostless approach — what is it?
● Bezos wrote generic services to expose familiar backend
things through web interface or (local) CLI
○ E.g., message queues, databases, auth, API gateways
● Instead of configuring VMs or containers with those
things, you click around aws.amazon.com instead
○ Or use CloudFormation to do away with clicking
○ Awesome because you can reproduce and even version your backend
○ Or — this is the laziest way — use a framework like Serverless to
abstract away CloudFormation with a simple YAML file

13. Hostless approach
● Pros
○ Faster to bootstrap
○ Arguably easier to learn
○ Much more elastic. Low traffic → super cheap. No server when no usage
● Cons
○ Cold starts are a thing
○ Execution times are capped. Not ideal for long-running tasks
○ Need to think about idempotency because of at least once delivery
■ Newer versions of Kafka support exactly once delivery, so hopefully this won’t be a thing
○ Tooling is less mature. Friends might not be familiar with ecosystem
○ Vendor lock-in

14. Hosted vs. Hostless
● Example: database backed web app
● Hosted approach. Could…
○ Configure/deploy Cassandra/MongoDB cluster. Maybe Redis cluster too
○ Set up message queue server with e.g. Kafka
○ Write/deploy monolith or some microservices
○ Tune # of instances, set up scaling rules
● Hostless approach. Could…
○ Describe DB, Redis cache, message queue, and API w/ Serverless YAML
○ Write a function for each API endpoint. Use client libs from cloud provider
for DB, Redis, etc. Done!

15. A real, live side project
● Problem: my wife and I like wine
● Worse: my wife used to drink bottles from our cellar
without checking them out of our old inventory app 😿
● Solution: side project that makes it really, really easy to
check bottles out

16. The idea
● Out of scope: programmatically getting bottle info
○ I.e., like Vivino. That’s a big, hard problem. Not a side project
● Put up https://cellarproject.com
● Write a Python script that generates QR codes
○ Each code maps to CellarProject URL with UUID in a URL param
○ Grids of QR codes are printed onto sticker sheets
○ They sit in a stack in our cellar
● We get QR scanning “for free” because of iOS camera

17. Use case 1 — add bottle
● Need to add a new bottle to our cellar
● Grab a pre-printed QR sticker and put it on bottle
● Scan sticker with iPhone camera
● CellarProject pops up
● It sees that unknown UUID was scanned
● Asks you to enter info about bottle, optionally including
(area, row, col) tuple

18. Use case 2 — search for bottle
● Some good friends are over. The night is young
● Want a fancy bottle
● Open CellarProject (without scanning anything)
● Use search feature to find bottle by vineyard, vintage, etc.
● Check it out (see use case 3)
● The night is no longer young. Opus One and two buck
chuck are effectively the same thing
● Use search feature to find cheapest bottle

19. Use case 3 — drink bottle
● Just pulled a bottle out (might have searched for it and
found its location with search feature from use case 2)
● Scan QR code with iPhone camera app
● CellarProject pops up
● It gives bottle details like price and lets you check it out
● If you click yes, it marks it consumed in inventory
● Two taps to check out bottle!

20. Use case 4
● Open it up to other users!
○ Need auth
○ Ideally with federated identities (Google, Facebook)
● But users need stickers. Either
1. Give them script and expect them to print own stickers
2. Mail stickers to users and charge to recoup postage/material cost

21. Here’s what it looks like!
https://cellarproject.com

22. How did I build the frontend?
● Iteration 1
○ Had literally never built a front-end
○ HTML + CSS + direct DOM manipulation 😱
○ Check out the horror in my github repo:
https://github.com/hamikm/wine-cellar-inventory
○ That really shouldn’t be public. Oh well ¯_(ツ)_/¯
● Iteration 2
○ Vue with stock toolchain
○ Bulma for most styling. Bootstrap for file drag/drop

23. How did I build the backend?
● Iteration 1
○ One massive AWS Lambda
○ Pasted it into the Lambda web interface
○ Tested it with test events in web interface
○ Manually configured API Gateway on web and pointed it to Lambda
○ One endpoint for everything: add, delete, modify bottle
○ Manually configured DynamoDB (NoSQL) table
○ Details on github
● Yes, it was really ghetto 😱
○ But it was fast to bootstrap and cheap 💯

24. How did I build the backend?
● Iteration 2
○ Used Serverless framework. Infrastructure as code!
○ I.e., described entire backend from iteration 1 as a single YAML file
■ AWS API Gateway
■ AWS DynamoDB table
■ AWS Cognito and federated identities pools
■ AWS Systems Manager (to store secrets)
○ Used Serverless framework to deploy it
○ Broke out different tasks (add bottle, remove, etc.) into different lambdas
and different API Gateway endpoints
○ Added a dev and prod environment. Really easy with Serverless

25. Case study: 💰 lambda
● Submitting form calls the
GetQRsV2 lamnda
● If there’s auth, not a simple
HTTP POST to API URL
● Need to sign request with
credentials from Cognito
○ Can be a little hard to get right
○ Much easier with Firebase

26. Case study: 💰 lambda invocation in frontend
await AWS.config.credentials.getPromise();
const creds = {
identityId: AWS.config.credentials.identityId,
accessKey: AWS.config.credentials.accessKeyId,
secretAccessKey: AWS.config.credentials.secretAccessKey,
sessionToken: AWS.config.credentials.sessionToken,
});
const apigClient = apigClientFactory.newClient({
invokeUrl: VUE_APP_API_URL,
accessKey: creds.accessKey,
secretKey: creds.secretAccessKey,
sessionToken: creds.sessionToken,
region: VUE_APP_REGION,
});
const resp = await apigClient.invokeApi(
{}, `${VUE_APP_BASE_URL}/qr/v2`, 'POST', {}, body);

27. Case study: 💰 lambda definition in serverless.yaml
# More config above
GetQRsV2:
handler: lambdas/getQRsV2.handler
runtime: python2.7
environment:
FROM_ADDY: scripthamikmukelyan@gmail.com
TO_ADDY: hamikmukelyan@gmail.com
PASSWORD: ${ssm:sendEmailPassword~true}
events:
- http:
path: qr/v2
method: post
cors: true
authorizer: aws_iam
# More config below
# To deploy, run `sls deploy --stage stage` in terminal

28. Case study: 🤑 lambda file (getQRsV2.py)
# Imports, constants above
def sendEmail(subject, recipients, new_content_html):
from_address = os.environ['FROM_ADDY']
msg = MIMEMultipart()
msg['From'] = from_address
msg['Subject'] = subject
msg.attach(MIMEText(new_content_html, 'html'))
server = smtplib.SMTP('smtp.gmail.com', 587)
server.starttls()
password = os.environ['PASSWORD']
try:
server.login(from_address, password)
text = msg.as_string()
server.sendmail(from_address, recipients, text)
server.quit()
except Exception as err:
raise err
def handler(event, context):
body = json.loads(event['body'])
args = {
'{name}': body['name'],
'{stickers}': body['howMany'],
'{address}': body['address'],
}
contents = str(EMAIL_TEMPLATE)
for k, v in args.iteritems():
contents = contents.replace(k, str(v))
sendEmail('Got order', os.environ['TO_ADDY'], contents)
return {
'statusCode': 201,
'body': '',
'headers': {'Access-Control-Allow-Origin': '*' },
}

29. Serverless gotchas
● How to share code between lambdas?
○ Let lambdas call each other
○ Make util files and deploy all with each lambda
○ See directory structure to right
● Don’t have to think about most devops
things, but still need to choose…
○ Read/write capacity units for tables
○ Timeout limits & amount of memory for lambdas
● Need to config AWS access permissions

30. And that’s a wrap
● Conclusion: use serverless & frontend templates to move
really fast on side projects
● Serverless, Snapchat, Uber all fair game for questions 😅
● Keep in touch!
○ github.com/hamikm
○ linkedin.com/in/hamik/
○ hamikmukelyan@gmail.com