Remember when we could travel? Those were the days
You roll up to the airport, "breeze" through security, walk endless corridors designed to keep you busy[^1], see beautiful handbags and makeup you'd never buy, grab a bottle of overpriced water, a sandwich for the plane, and sit down in your oh so very comfortable chair.
On your left is a stressed out business person frantically finishing a presentation, on your right a college kid going on vacation chill as heck not a care in the world.
You're stuck in the middle seat. Forgot to buy early ... again.
But hey! Two arm rests. 🤘
You take out your laptop and get to work. Airplanes are a fun time to focus. Nothing else you can do.
Unit testing was invented on an airplane, did you know? [2]
You get the wifi package and open a website.
Heck yeah! Super fast all the metrics look good! Time to first byte, amazing, time to interactive, fantastic.
Time to useful ... it's not on Lighthouse, who cares. 😇
Airplane wifi is a beast to deal with [name|my friend]. Great bandwidth, terrible latency, poor reliability.
I clocked a flight once at 50MB/s with fast.com ... 70% drop rate. Guess what 70% of connections never succeeding did to my browsing experience?
Your typical webapp makes hundreds of requests for every page load. That's how you get them metrics Google cares about. Snappy first load, quick to interactive, tiny payloads.
On an airplane all that turns to jank. Nothing works.
Same is true for LTE when you're walking, elevators, moving to the edge of your wi-fi range, highway tunnels, and downtown San Francisco where cell coverage is surprisingly bad for a place that thinks of itself as the center of tech.
But there's a way to fix this in your app.
The JAMStack helps
The goal with JAMStack apps is that your first page load is useful. Static HTML with all the data baked in at deploy time.
You build a React app. Same as always.
Fetch some data, talk to an API, render a UI. Like this:
const ContentList = () => {
const content = fetch(content_url)
return (
<ul>
{content.map(c =>
<li>{c.name}</li>
)}
<ul>
)
}
That's pseudocode but you get the idea. Load data, render data.
What happens next is my favorite part.
You deploy the app and it becomes a static piece of HTML. A normal file like in the old days. Served by ultra fast servers, images on a CDN, all the good stuff.
When users hit your page, they get this:
<html>
<body>
<ul>
<li>awesome content</li>
<li>more awesomeness</li>
<li>wow this is amazing</li>
<li>oh gosh not a single API request</li>
<li>hot damn</li>
</ul>
</body>
</html>
It's all there. No loading spinners, no API requests, not even any JavaScript. Great time to first byte, fantastic time to interactive, exceptional time to useful.
😍
And then [name|my friend], then it turns into a React app. After that initial load of useful content, the JavaScript flies in, hydrates your app and it becomes a typical React app. With all the features and flexibility that you're used to.
That's what The JAMStack Workshop on November 9th is about. Check it out
Cheers,
~Swizec
[^1] funfact: the walk to baggage claim is long and convoluted on purpose. Makes the wait feel shorter because you're walking instead of waiting.
Continue reading about The ultimate test for your webapp: Airplane wifi
Semantically similar articles hand-picked by GPT-4
- Learn Gatsby and NextJS with my new workshop
- How JAMStack helps you ship
- Never give up
- Build better apps faster with the JAMStack
- It's never been this easy to build a webapp
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 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. 👌"
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 ❤️