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
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
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
