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.
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.
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.
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 🙂
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:
We’ve got a couple of GraphQL queries defined as constants, and two important React components:
<VoteButton>is a button that votes Yes or No when clicked. Runs a GraphQL mutation and waits for a response.
<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.
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.
Learned something new? Want to improve your skills?
Join over 10,000 engineers just like you already improving their skills!
Here's how it works 👇
PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.