Swizec Teller - a geek with a hatswizec.com

    Is hot dog taco?

    What if I told you modern tools let you build and launch a small webapp in 30 minutes? Complete with SSL, a .com domain, a database, a documented API, CDN hosting, fast static initial loads, and a hydrated SPA?

    That's the challenge I posed at Silicon Valley Code Camp this weekend. The audience didn't believe me, so it was time to perform some magic. πŸ§™

    Here's the app πŸ‘‰ ishotdogtaco.com

    And the code πŸ‘‰ Swizec/hot-dog-taco

    Like all magicians, I cheated on stage. Had some code snippets prepared, knew what I was building, and how. Like Penn & Teller once said:

    Sometimes, magic is just someone spending more time on something than anyone else might reasonably expect.

    The real build, from scratch, while figuring it out ... that takes 70min.

    Click through for source
    Click through for source

    But how?

    Click through for source
    Click through for source

    It's all about the stack. A new paradigm for building webapps that's emerging.

    You build the application logic, platforms take care of the rest. Focus on the part that makes your idea special.

    Your app comes in two parts:

    • server for sharing and persisting data between clients, heavy slow operations, data analysis, etc.
    • web/mobile for user-facing UI, single user logic, etc.

    You use serverless technologies to host your server. A few lines of configuration, some javascript code, and you're ready to accept requests. Plus it's scalable.

    No need to deal with Kubernetes and Dockers and setting up your own DNS configs and dev environments and whatnot. It's pretty neat.

    For the frontend, you use the JAMstack. Loosely. Create a single page app, use Gatsby or Next to get fast static initial loads, talk to your backend via API – a GraphQL API.

    Since your frontend and backend are decoupled, you can host them separately. Let serverless deal with just your API and data, host everything else as a static page on a CDN.

    Your app is live, fast, and scales well.

    static fff0598333278989c0aa583cfdb3f08c 590cf 03 hotdog

    The server side

    I encourage you to look at github for the full code. Here's a couple interesting bits.

    Hot Dog Taco is a small app so the backend is simple: A graphql server that handles one API endpoint serving all queries.

    Bigger graphql servers still have just a single API, but their type definitions and query resolvers are bigger :)

    Click through for source
    Click through for source

    Those 56 or so lines are all it took. Apollo GraphQL libraries do most of the heavy lifting.

    We write a type definition for our GraphQL schema – the types, queries, and mutations – and a bunch of resolvers that say "When this query comes in, run this function to get or save data to the database"

    The database is DynamoDB because that's quickest to set up.

    Oh and I promised a documented API. Apollo takes care of that when you open the GraphQL playground.


    The web side

    The web side is a bunch of React components using Apollo hooks to run queries and fetch data. No central authority, no setup for global state, just components getting what they need when they need.

    You can see the webapp code on github

    Apollo caching takes care of speed and performance behind the scenes, I think. Haven't dug into that very deep yet to be honest.

    Here's how the webapp works:

    Click through for source
    Click through for source

    We've got a couple of GraphQL queries defined as constants, and two important React components:

    1. <VoteButton> is a button that votes Yes or No when clicked. Runs a GraphQL mutation and waits for a response.
    2. <Votes> pokes our GraphQL API with a query and returns the results. This is where we see whether a hot dog is a taco.

    Notice how each component handles its own API communication internally? No need to bother the whole app with global state and other weird complications.

    It's like edge computing but for React components πŸ€”

    The rest is Gatsby machinery handling all the hard stuff. Compiles to a static build at deploy, gives us routing, basic page layout, even a little bit of CSS defaults.

    Host it with Netlify or Zeit and voila: A live webapp with SSL and fast CDN setup.

    But why?

    but_why giphy

    Because the Cube Rule is an amazing unified theory of food identification.

    But also to show that it can be done.

    You can launch an app with little effort these days. The web stack has never been so productive and I'm excited as heck to see what happens next.

    I'm expecting a cambrian explosion of indie startups. Small apps solving real problems, making their creators rich.

    You excited?

    Cheers, ~Swizec

    Did you enjoy this article?

    Published on October 21st, 2019 in Back End, Front End, Technical

    Learned something new?
    Want to become an expert?

    Here's how it works πŸ‘‡

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters πŸ’Œ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. πŸ‘Œ"

    ~ Ashish Kumar

    Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

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

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

    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 bySwizecwith ❀️