The Web site vs. Internet App Dichotomy Does not Exist
You don’t have to wade far into net growth discourse to listen to concerning the web site vs. net app dichotomy.
It posits that web sites may be grouped into two classes: largely static “paperwork” with little person interplay past following hyperlinks, and “functions” that contain wealthy dynamic habits.
Normally, folks invoke it to speak concerning the use, abuse or avoidance of JavaScript frameworks.
A extra nuanced view is that there’s a spectrum between web site and net app, and that the place a challenge sits determines which applied sciences are acceptable to construct it.
The implication is that sooner or later, it is smart to make use of a JavaScript framework relatively than progressively enhanced HTML.
Internet builders are inclined to divide themselves into roughly two camps right here — and relying on which camp you ask, the placement of that inflection level varies extensively.
One camp says that all the pieces to the left of Google Docs is an internet site that ought to perform with out JavaScript if potential.
The opposite camp says that something to the precise of a WordPress weblog is an online app that ought to be constructed with a JavaScript framework.
Svelte creator Wealthy Harris speaks to this in his 2021 discuss 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 place is that neither camp is totally appropriate; that almost all web sites span areas of the spectrum relatively than single factors.
He proposes the time period “transitional apps” to explain web sites which might be neither totally “doc” nor “utility”.
Whereas I agree that almost all web sites defy binary categorization, I don’t purchase the general “web site vs. net app” framing.
They’re each nebulous phrases that try to explain what a website is relatively than what it does.
Furthermore, I don’t assume a one-dimensional spectrum can sufficiently seize the tradeoffs concerned in net growth.
I like to consider web sites alongside two axes:
- Static vs. dynamic — how a lot of the web page updates in response to person interplay?
- On-line vs. offline — how a lot performance requires a persistent Web connection?
Clearly, that is nonetheless a reasonably crude survey, however I feel it broadly captures a very powerful architectural constraints.
Let’s name the intersections informational, transactional, realtime and native.
Everybody loves quadrant chart!
Informational Web sites
We’ll begin on the backside left, on the intersection of static and offline: informational web sites.
I’ve known as out WordPress, Medium and Wikipedia, however a lot of the net lives right here: pages of unmoving textual content and pictures, related by hyperlinks.
Our measure of static vs. dynamic is how a lot of the web page updates in response to person interplay, and web sites on this class have a tendency to only swap the entire thing out without delay.
Blogs, enterprise websites, newspapers and on-line programs all fall underneath this umbrella.1
WordPress alone powers over 40% of all web sites!
The important thing applied sciences on this quadrant are HTML and CSS.
When JavaScript is used, it’s often for options like animations or interactive visuals that complement the textual content material.
At that time, folks usually usher in a JavaScript framework — vastly overpowered for almost all of the web site — to accommodate probably the most dynamic elements of the web page.
Extra on this later.
One remark about this quadrant is that regardless that it doesn’t require an Web connection to be usable, treasured little of it’s truly accessible offline.2
If you’re off the grid, every browser tab teeters precariously on the point of annihilation.
One errant refresh and it’s gone till you reconnect!
Transactional Web sites
If we transfer as much as the intersection of static and on-line, we get transactional web sites.
These are so named as a result of interplay largely takes the type of transactions with an online server: the person clicks a button or submits a kind, an HTTP request triggers a state change on the server and the entire web page updates to mirror the brand new state.
For web sites on this quadrant, the server is a needed part of all significant interplay.
Any service that includes literal monetary transactions — like Amazon, or your financial institution’s web site — in all probability lives right here.
So do social networks and search engines like google.
In reality, after we exclude informational web sites, most remaining web sites are transactional.
This quadrant tends to be probably the most contentious.
When the JavaScript neighborhood talks about net apps, they’re usually referring to transactional web sites — regardless that many are each bit as static as this weblog.
Perhaps that’s why the JavaScript neighborhood has spent the previous couple years pouring sources into bettering the person expertise on this quadrant.
At this level, each main frontend framework consists of server-side rendering out of the field.
Newer options like React Server Components 
React Labs: What We’ve Been Working On – March 2023 – React The library for web and native user interfaces 
react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components and Qwik’s resumability 
Resumable | Concepts 📚 Qwik Documentation No hydration, auto lazy-loading, edge-optimized, and fun 🎉! 
qwik.builder.io/docs/concepts/resumable/ push even additional, mixing client-side and server-side code to extra simply categorical habits that spans community boundaries.
On the similar time, a extra conventional method to constructing transactional web sites is turning into en vogue once more, treating HTML as a hypermedia Hypermedia – Wikipedia 
en.wikipedia.org/wiki/Hypermedia that describes interactions relatively than simply as a rendering goal for JavaScript.
Within the essay When Should You Use Hypermedia? </> htmx ~ When Should You Use Hypermedia? 
htmx.org/essays/when-to-use-hypermedia/ , HTMX creator Carson Gross describes the perfect use case as “text-and-image heavy, with coarse-grain [UI] updates”.
That actually describes most transactional web sites, the place extra immersive multimedia is uncommon and it’s widespread to replace massive swaths of the web page without delay.
Realtime Web sites
On the intersection of dynamic and on-line, we’ve got realtime web sites.
These are web sites that require sooner and extra fine-grained updates than HTTP requests to an online server can moderately accommodate.
In 2024, the realtime web site with which we’re all most acquainted might be Zoom.
One other common one is Discord.
Within the excessive high proper nook 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 on-line 3D online game playable in a browser.
Realtime web sites usually use persistent bidirectional connections like websockets or WebRTC along with the request/response mannequin.
The server’s accountability is usually to transmit updates between purchasers and to make sure that its central database stays constant.
Whereas informational and transactional web sites can get by with out JavaScript in the event that they actually need to, realtime web sites don’t have that choice: they’re client-side apps by necessity, and JavaScript is the one sport on the town.
That is the place frontend frameworks shine, and I feel even their most hardened critics would acknowledge that it’s a justified use case.
Native Web sites
The ultimate quadrant is on the intersection of dynamic and offline: native web sites.
Earlier than the Web, these had been simply regular apps: applications the place all computation occurred in your pc, working on knowledge additionally saved in your pc.
Infeasible earlier than JavaScript grew to become a robust programming language, native web sites are the latest quadrant.
These are the true single-page apps: all the pieces occurs on one web page, as a result of there’s no net server in any respect.3
Consider it or not, these web site are in all places. Each counter app and todo checklist made to demo a JavaScript framework is a neighborhood web site.
Though they’re tougher to monetize, they share the identical benefits that informational apps get pleasure from: particularly, that the shortage of outdoor infrastructure makes them cheaper and simpler to keep up.
Within the age of software program as a service, outstanding native web sites that aren’t tech demos are tougher to seek out.
One enjoyable instance 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 !
All the things from the gameplay to the thesaurus to the share performance runs and not using a server.4
One other 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 picture editor that runs totally in an online browser.
Native web sites are carefully associated 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 free time period for web sites that may be put in on a tool, work offline and combine extra deeply with working system options.
The promise was that these web sites would mix the capabilities of native apps with the attain of net apps.
In observe, although, the excitement has far outstripped precise adoption, and native web sites stay a marginal class in comparison with the opposite three.
Declarative Dynamism
From a extra conventional perspective, you’d attain for a JavaScript framework to construct web sites on this space of the chart:
In case you contemplate your self a JavaScript developer, the world for which you’d use a JavaScript framework would possibly look extra like this:
Both method, it’s clear that dynamism — actual or perceived — is a driver of JavaScript framework adoption.5
More and more, although, we’re seeing folks experiment with methods to specific extra dynamic interactions declaratively in HTML and CSS.
The foremost instance right here might be HTMX </> htmx – high power tools for html htmx.org , which extends HTML with attributes for controlling community exchanges with an online server.
By making it straightforward to exchange smaller areas of a web page with new content material, HTMX permits builders so as to add extra dynamic interactions to their web sites with out changing the whole stack.
There’s additionally precedent for the way this hypermedia method would possibly lengthen to native interactions. One instance is Lea Verou’s Mavo 
Mavo: A new, approachable way to create Web applications 
mavo.io , which lets builders use HTML attributes to create reactive single-page net apps. In an identical 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 carried out by all three main browsers — defines a declarative strategy to set off occasions on HTML components similar to <dialog> and <audio>.
Transferring even additional towards the dynamic aspect of the chart, an structure known as islands is selecting 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 inside a static HTML doc.
Essentially the most generally cited instance of islands structure might be GitHub, which embeds dynamic widgets similar to wealthy textual content areas in server-side rendered pages.
However the sample reveals up everywhere in the net.
The Svelte framework was initially created for constructing interactive visualizations inside New York Instances articles.
Even the interactive demos on this blog 
Web Components Will Outlive Your JavaScript Framework | jakelazaroff.com If we’re building things that we want to work in five or ten or even 20 years, we need to avoid dependencies and use the web with no layers in between. 
jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/ are examples of islands structure!
One expertise driving adoption of the islands structure is net elements, which let folks create their very own HTML components.
Customized habits is carried out in JavaScript and managed utilizing attributes and browser occasions.
That mirrors how built-in HTML components are carried out with native languages — in spite of everything, deep within the stomach of the browser, it’s all crucial code.
Internet elements considerably decrease the bar to including dynamism to HTML with out imposing extra architectural constraints.
As I wrote in Web Components Eliminate JavaScript Framework Lock-in 
Web Components Eliminate JavaScript Framework Lock-in | jakelazaroff.com Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we’re going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework. jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/ , they will act as a glue layer that enables framework code to be embedded with out immediately utilizing the framework itself — in impact, turning them from competing applied sciences into complementary ones.
Sarcastically, one of the compelling examples of declarative dynamism is a React library: React Three Fiber 
React Three Fiber Documentation React-three-fiber is a React renderer for three.js 
docs.pmnd.rs/react-three-fiber/getting-started/introduction , which lets folks create 3D scenes through the use of JSX to manage the crucial Three.js 
Three.js – JavaScript 3D Library 
threejs.org library.
In spirit, React Three Fiber is an instance of islands structure — a <canvas> island rendering 3D visuals inside a DOM-based React app.
Certainly, we’re beginning to see equally bold net elements, similar to 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 Optionally available
One widespread thread within the high proper nook of the chart is the replication of current desktop apps with added multiplayer capabilities.
Essentially the most outstanding instance right here is Figma: a vector graphics editor with stay collaboration.
In distinction to realtime web sites, this collaboration is usually asynchronous.
In reality, the modifying itself can occur offline, with adjustments synced to the server when the person regains their Web connection.
Such apps are also known as local-first software program.
Coined by Ink & Swap 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 rules embodying the concept that we — not our software program — ought to personal our work.
Computation should happen on our personal computer systems, with the community being relegated to an elective syncing service relatively than a important part of the system as an entire.
By way of this lens, apps like Figma that rely upon a community service for core performance will not be true local-first software program.
Let’s name apps that observe local-first rules apart from knowledge possession asynchronous — speaking with a server may be deferred, however it should occur sooner or later.
Whether or not an app is local-first or asynchronous is often a enterprise resolution relatively than a technical constraint.
It’s not simply extremely dynamic web sites that may work this manner.
Linear is a transactional challenge administration app recognized for its offline sync capabilities 
Realtime sync and offline – Linear Docs Our application isn’t just fast – it works offline from our desktop app, any browser or the mobile web app. 
linear.app/docs/offline-mode .
This introduces stress throughout the quadrant: transactional web sites have a tendency towards coarse-grained updates through community exchanges with an online server, which makes them match for hypermedia relatively than crucial implementation.
However proper now, offline performance is troublesome to introduce even utilizing a JavaScript framework — not to mention declaratively in HTML!
Native-first web sites are even much less widespread.
They’re probably the most troublesome to construct, since collaboration options require distributed purchasers to resolve conflicts with no central server imposing knowledge integrity.
Usually, they take the type of artistic instruments that function on native information 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 identical Ink & Swap 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 .
Persons are beginning to chip away on the drawback house.
One significantly promising expertise 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 type of knowledge construction that may persistently sync edits made by a number of friends with no central server.
Many applied sciences on this space are both based mostly on or impressed 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 offer the constructing blocks for asynchronous and local-first performance.
These are subcategories I’d like to see flourish — particularly local-first, which is a essentially extra empowering paradigm (versus asynchronous, which is merely extra handy).
At present, constructing local-first means leaning closely on JavaScript frameworks; wanting additional forward, we once more see hints of how such web sites is likely to be constructed declaratively in Mavo, which may retailer knowledge regionally or in cloud companies.
What Subsequent?
Some ideas concerning the future:
- As new W3C requirements, net elements and libraries like HTMX make HTML extra highly effective, I hope to see extra declarative methods to construct dynamic interactions with out the necessity to totally purchase right into a JavaScript framework.
- The final level however, I hope to see extra JavaScript utilization for performance that’s troublesome or not possible to copy with out it, similar to strong offline assist.
- There’s no technical motive that almost all informational and native web sites ought to require an Web connection; I hope extra web sites use service employees and that browsers begin prioritizing offline use.
- Native-first software program has the potential to provide us actual knowledge possession within the age of cloud computing, and I hope we see much more motion there.
The web site vs. net app dichotomy doesn’t exist.
However I don’t assume any a method of constructing web sites goes to swallow all the remainder.
If there’s one takeaway from all this, it’s that the online is a versatile medium the place any variety of applied sciences may be mixed in all types of fascinating methods.