Svelte creator Rich Harris speaks to this in his 2021 talk Have Single-Page Apps Ruined the Web? Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes The backlash to modern front end development is gaining steam, with good reason: single-page apps have ruined the web. Can we rescue it without going backwar... youtu.be/860d8usGC0o . His position is that neither camp is fully correct; that most websites span regions of the spectrum rather than single points. He proposes the term “transitional apps” to describe websites that are neither fully “document” nor “application”.
While I agree that most websites defy binary categorization, I don’t buy the overall “website vs. web app” framing. They’re both nebulous terms that attempt to describe what a site is rather than what it does. Moreover, I don’t think a one-dimensional spectrum can sufficiently capture the tradeoffs involved in web development.
I like to think about websites along two axes:
- Static vs. dynamic — how much of the page updates in response to user interaction?
- Online vs. offline — how much functionality requires a persistent Internet connection?
Obviously, this is still a pretty crude survey, but I think it broadly captures the most important architectural constraints. Let’s call the intersections informational, transactional, realtime and local. Everyone loves a good quadrant chart!
We’ll start at the bottom left, at the intersection of static and offline: informational websites.
I’ve called out WordPress, Medium and Wikipedia, but most of the web lives here: pages of unmoving text and images, connected by hyperlinks. Our measure of static vs. dynamic is how much of the page updates in response to user interaction, and websites in this category tend to just swap the whole thing out at once. Blogs, business sites, newspapers and online courses all fall under this umbrella.1 WordPress alone powers over 40% of all websites!
One observation about this quadrant is that even though it doesn’t require an Internet connection to be usable, precious little of it is actually available offline.2 When you’re off the grid, each browser tab teeters precariously on the brink of annihilation. One errant refresh and it’s gone until you reconnect!
If we move up to the intersection of static and online, we get transactional websites.
These are so named because interaction mostly takes the form of transactions with a web server: the user clicks a button or submits a form, an HTTP request triggers a state change on the server and the whole page updates to reflect the new state. For websites in this quadrant, the server is a necessary component of all meaningful interaction.
Any service that involves literal financial transactions — like Amazon, or your bank’s website — probably lives here. So do social networks and search engines. In fact, when we exclude informational websites, most remaining websites are transactional.
At the intersection of dynamic and online, we have realtime websites.
These are websites that require faster and more fine-grained updates than HTTP requests to a web server can reasonably accommodate.
In 2024, the realtime website with which we’re all most familiar is probably Zoom. Another popular one is Discord. In the extreme top right corner is RuneScape The world of RuneScape Welcome to the world of RuneScape - One world, two amazing games! RuneScape is the original game that's been evolving for over 20 years! Old School RuneScape is the game as you remember it from 2007 - improved and expanded! play.runescape.com , a massively multiplayer online 3D video game playable in a browser.
Realtime websites often use persistent bidirectional connections like websockets or WebRTC in addition to the request/response model. The server’s responsibility is mostly to transmit updates between clients and to ensure that its central database remains consistent.
The final quadrant is at the intersection of dynamic and offline: local websites.
In the age of software as a service, prominent local websites that aren’t tech demos are harder to find. One fun example is Wordle Wordle - A daily word game Guess the hidden word in 6 tries. A new puzzle is available each day. www.nytimes.com/games/wordle/index.html ! Everything from the gameplay to the word list to the share functionality runs without a server.4 Another is Photopea Photopea | Online Photo Editor Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free! www.photopea.com , a Photoshop-esque raster image editor that runs entirely in a web browser.
Local websites are closely related to progressive web apps What are Progressive Web Apps? | Articles | web.dev An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps. web.dev/articles/what-are-pwas — a loose term for websites that can be installed on a device, work offline and integrate more deeply with operating system features. The promise was that these websites would combine the capabilities of native apps with the reach of web apps. In practice, though, the buzz has far outstripped actual adoption, and local websites remain a marginal category compared to the other three.
The foremost example here is probably htmx </> htmx - high power tools for html htmx.org , which extends HTML with attributes for controlling network exchanges with a web server. By making it easy to replace smaller regions of a page with new content, htmx allows developers to add more dynamic interactions to their websites without replacing the entire stack.
There’s also precedent for how this hypermedia approach might extend to local interactions. One example is Lea Verou’s Mavo Mavo: A new, approachable way to create Web applications mavo.io , which lets developers use HTML attributes to create reactive single-page web apps. In a similar vein, the Invokers proposal The Invokers Are Coming Yet another game changer that will make building interactive UI on the web oh so much easier. thathtml.blog/2023/11/invokers-are-coming/ — which has been experimentally implemented by all three major browsers — defines a declarative way to trigger events on HTML elements such as
Moving even further toward the dynamic side of the chart, an architecture called islands is picking up steam. Coined by Katie Sylor-Miller Katie Sylor-Miller (@[email protected]) 421 Posts, 304 Following, 831 Followers · Frontend Architect @ Etsy, Fairy Gitmother @ ohshitgit.com, Pronouns are she/her. opinions are my own front-end.social/@ksylor and popularized by the Astro web framework Astro Islands Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. “Islands architecture” was first coined by Etsy's frontend architect Katie Sylor-Miller in 2019, and expanded on by Preact creator Jason Miller. docs.astro.build/en/concepts/islands/ , islands are self-contained dynamic areas within a static HTML document.
In spirit, React Three Fiber is an example of islands architecture — a
<canvas> island rendering 3D visuals within a DOM-based React app.
Indeed, we’re starting to see similarly ambitious web components, such as Lea Rosema’s
<shader-art> GitHub - shader-art/shader-art: web component that creates a WebGL canvas for running GLSL shaders web component that creates a WebGL canvas for running GLSL shaders - GitHub - shader-art/shader-art: web component that creates a WebGL canvas for running GLSL shaders github.com/shader-art/shader-art .
Async; Await Optional
One common thread in the top right corner of the chart is the replication of existing desktop apps with added multiplayer capabilities.
The most prominent example here is Figma: a vector graphics editor with live collaboration. In contrast to realtime websites, this collaboration is often asynchronous. In fact, the editing itself can happen offline, with changes synced to the server when the user regains their Internet connection.
Such apps are often referred to as local-first software. Coined by Ink & Switch in a paper of the same name Local-first software: You own your data, in spite of the cloud A new generation of collaborative software that allows users to retain ownership of their data. www.inkandswitch.com/local-first/ , local-first describes a set of principles embodying the idea that we — not our software — should own our work. Computation must take place on our own computers, with the network being relegated to an optional syncing service rather than a critical component of the system as a whole.
Through this lens, apps like Figma that depend on a network service for core functionality are not true local-first software. Let’s call apps that follow local-first principles other than data ownership asynchronous — communicating with a server can be deferred, but it must happen at some point. Whether an app is local-first or asynchronous is usually a business decision rather than a technical constraint.
Local-first websites are even less common. They’re the most difficult to build, since collaboration features require distributed clients to resolve conflicts with no central server enforcing data integrity. Often, they take the form of creative tools that operate on local files and monetize with subscriptions for multiplayer collaboration. Two examples are Muse Inspired & focused thinking with Muse Muse is a canvas for thinking that helps you get clarity on things that matter. Think in private or collaborate with others. Available for iPad and Mac. museapp.com — created by the same Ink & Switch that coined the local-first moniker — and Excalidraw Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them. excalidraw.com .
People are starting to chip away at the problem space. One particularly promising technology is the Conflict-free Replicated Data Type An Interactive Intro to CRDTs | jakelazaroff.com CRDTs don't have to be all academic papers and math jargon. Learn what CRDTs are and how they work through interactive visualizations and code samples. jakelazaroff.com/words/an-interactive-intro-to-crdts/ , or CRDT: a kind of data structure that can consistently sync edits made by multiple peers with no central server. Many technologies in this area are either based on or inspired by CRDTs, and there’s a burgeoning community Local-First Web Development A fresh way to think about building web applications. localfirstweb.dev/ that has emerged to provide the building blocks for asynchronous and local-first functionality.
Some thoughts about the future:
- There’s no technical reason that most informational and local websites should require an Internet connection; I hope more websites use service workers and that browsers start prioritizing offline use.
- Local-first software has the potential to give us real data ownership in the age of cloud computing, and I hope we see a lot more movement there.
The website vs. web app dichotomy doesn’t exist. But I don’t think any one way of building websites is going to swallow all the rest. If there’s one takeaway from all this, it’s that the web is a flexible medium where any number of technologies can be combined in all sorts of interesting ways.
From a reader’s point of view, that is. For instance, while reading a blog post on Medium can be done offline, an Internet connection is required to publish it. Many websites actually have multiple use cases which exist in separate places on the chart. ↩
Technology exists to make inroads into solving this problem. Chris Ferdinandi’s article Offline First with Service Workers and Vanilla JS Offline first with service workers and vanilla JS So far this week, we’ve looked at how to write your first service worker, and how to cache pages for offline viewing. Today, we’re going to look at a strategy called “offline-first.” (If you haven’t read the first two articles in this series, you should go do that first or today’s article won’t make much sense.) What is offline-first? Up to this point, we’ve used our service worker cache to serve files if the network can’t be reached (as in, if the user is offline). gomakethings.com/offline-first-with-service-workers-and-vanilla-js/ outlines a strategy for building more offline-friendly informational websites. ↩
I mean, sure: technically there’s a web server to serve the static files. But once you have those, there’s no additional infrastructure needed to run the app. ↩
Or at least it did, before the New York Times bought it; I’m not sure how much of it requires an account now. ↩