Skip to content
Swizec Teller - a geek with a hatswizec.com

The ultimate test for your webapp: Airplane wifi

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 busy1, 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.

The loading screen

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.

Did you enjoy this article?

Published on October 29th, 2020 in

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works ๐Ÿ‘‡

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet ๐Ÿ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet ๐Ÿ“–

Then get thoughtful letters ๐Ÿ’Œ on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers 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 โค๏ธswizec.com