Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    How serverless beats servers

    You're building an app. It needs to store some data. What do you do?


    Put it in local storage.

    Click through for source
    Click through for source

    You can read 'item' next time users visit your app. Yay.

    Unless they're on a different computer. Or browser. Or need to share between users.

    Time to add a backend. How hard can it be?

    Start a RubyOnRails project, create a model for your data, add routes for reading and writing, add some glue code in your controller, install the JBuilder gem, write a JSON view, create a migration file, run the Postgres database locally, start your Rails app and you're ready to test.

    Then you go to AWS, create a new EC2 instance, pick from a billion Linux distributions, set up an HTTP server like Nginx, run your Rails app, add a cronjob to restart the app when it dies, buy a new domain on Namecheap, set up its DNS servers, wait a few hours, point the domain to your server ...

    ... and you still need the production database.

    You now have a virtual server and database running 24/7. Unless they die.

    You're in charge of keeping them up, maintaining configuration, waking up at 3am if something goes wrong, and paying for every second of every day even if nobody uses your app.

    Just to store some data.

    kill_me giphy

    Yes, services like Heroku make it easier. Docker gives you pre-configured Linux machines, and Kubernetes does whatever Kubernetes does. Helps keep your servers alive? Maybe improve deployments?

    Did I mention you still have to host your webapp somewhere?

    You'll need a static file server, some CDN setup, optimize JavaScript builds for production ... you want your webapp to be fast. Can't have it hitting Rails for every little CSS file.

    It's a lot of work.

    Weeks of engineering time at my day job. πŸ˜…

    There's a better way, my friend. Serverless for the backend, JAMStack for the frontend.

    Serverless for the backend

    The simplest serverless backends look just like functions.

    Click through for source
    Click through for source

    That's all it takes. That's a server 😍

    I like to use TypeScript for the backend so I make fewer mistakes. That's where the APIGatewayEvent part comes from.

    We talked about GraphQL last week, so let's see what it takes to build a basic GraphQL API with serverless.

    You need just 2 files:

    • an infrastructure definition
    • a lambda function that creates your GraphQL server

    infrastructure as code

    Click through for source
    Click through for source

    This might look scary, but imagine doing it by hand. Eeeevery time you want to make a small change.

    It's your whole infrastructure. Defines your runtime environment, API endpoints, even creates a database using DynamoDB. And it hooks everything up on its own.

    Your infrastructure becomes code.

    That way you always know what's running in production. Every branch of your project can use a different setup, every feature can add what it needs. Never mess around by hand ever again. ✌️

    We go into more detail in my new course, ServerlessReact.Dev

    a small GraphQL server

    Click through for source
    Click through for source

    And you're done.

    In those 50 lines of code, you've defined the shape of your API with a GraphQL schema, mapped it to resolver functions, and created a server. It even comes with a playground so you can test your API.

    Heck, here's a link πŸ‘‰ try this basic API

    GraphQL machinery handles data transformations and understanding queries. Serverless machinery sets up your servers, keeps them running, and exposes a URL to the world.

    Your frontend skills transfer directly to the backend. If you can write a JavaScript function, you can write your backend. And that's amazing, my friend.

    You'll learn this in more detail with ServerlessReact.dev

    Serverless runs only when it needs to

    Serverless keeps your code ready, but not running. You only pay what you use.

    That's why I'm so ready to host that example above and give you a link. Costs me nothing. Server only runs when you hit the link.

    You visit the URL and that's when the magic happens.

    Serverless wakes up a server, creates a new instance, routes the URL to your function, and calls your code. Code talks to a database, gets the data, and returns. Just like a normal function.

    All within milliseconds.

    πŸ‘‰ simple servers, running simple functions; on demand. It's brilliant.

    JAMStack to host the frontend

    That's your backend then. What about the webapp?

    Well, there's a bunch of startups solving that problem. The industry looked at how hard this was and thought "Nah, we can fix this"

    And they did!

    Netlify is great because it's popular. But Zeit's my favorite. Just because of how slick it is.

    Go into your webapp folder and run

    Click through for source
    Click through for source

    That's it. You have a globally deployed webapp with a public URL, CDN configuration, static builds at deploy, and everything else a modern app needs.

    Don't know about you, my friend, but this is the most excited I've been about web development since I discovered React in 2015.

    Cheers, ~Swizec

    PS: yes both Netlify and Zeit added support for cloud functions in the latter parts of 2019. As much as I love the bleeding edge, I think staying a year or two behind the curve is best. They both use AWS Lambda under the hood anyway :)

    PPS: don't forget, ServerlessReact.Dev that teaches you this wonderful new stack in detail is $100 off just this week

    Published on January 28th, 2020 in Back End, Technical

    Did you enjoy this article?

    Continue reading about How serverless beats servers

    Semantically similar articles hand-picked by GPT-4

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help πŸ‘‰ swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers πŸ‘‰ ServerlessHandbook.dev

    Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️

    Created by Swizec with ❀️