Application Holotypes: A Guide to Architecture Decisions - JASON Format

Analyzing the characteristics of real-world applications is difficult. We often make generalizations about applications we see in the wild, both anecdotal and statistical: "Single-Page Applications are slower than multipage" or "apps with low TTI loaded fast". However, the extent to which these generalizations hold for the performance and architectural characteristics we care about varies. I believe one of the primary determinants of this variability are a product's features and design constraints, and classifying applications based on their features & constraints can enable more targeted and impactful solutions to the problems faced by each.

Constructing a set of named categories into which applications can be effectively grouped presents a challenge: it's difficult to predict all possible groups, and the boundaries set by each are subjective and likely to change over time. Furthermore, abstract groupings like this can be difficult to reason about or visualize. For example, what performance optimization techniques might we recommend to developers of "thick-client, page-centric rich media applications with offline browsing and user contribution"? It's much easier to frame discussions in the concrete, asking instead what we might recommend to developers of "Instagram-like apps".

In order to establish this framing, we can construct a list of holotype applications. These can either be representative of the web as it exists today, or predicated on changes we foresee developers making in response to trends and platform initiatives. To make things easier, holotypes representing portions of the web's long tail of historical and legacy content can be more general, whereas those representing current and upcoming applications can be more narrowly scoped to allow for more specific recommendations.

Each holotype application is accompanied by a rough category name, additional real-world examples, as well as the characteristics & constraints that define its architecture. Ideal implementation and delivery techniques are also provided, based on the architectural context.

Holotype: FacebookExamples: LinkedIn, Reddit, Google+Characteristics: multifaceted, sub-applications, infinite scrolling content, user contribution, realtime updates, notificationsConstraints: extended session depth, large scale, realtime updates, resource contention from embedded content, nested applications, SEOIdeal Implementation: Single-Page Application with prerendering of shell and landing pages.Ideal Delivery: PWA in standalone display mode. TWA.

Holotype: InstagramExamples: Youtube, TwitterCharacteristics: rich media, infinite scrolling content, user contribution, realtime updates, notifications, embeddability, embedded contentConstraints: extended session depth, realtime updates, resource contention from embedded content, uninterruptible media playback, SEOIdeal Implementation: Single-Page Application with app shell prerendering & caching.Ideal Delivery: PWA in standalone display mode.

Holotype: AmazonExamples: Bestbuy, Newegg, Shopify(-based stores)Characteristics: search, payments, discoverability, filtering & sortingConstraints: shallow to medium session depth, small interactions, high cart/checkout dropoff, SEOIdeal Implementation: Server-rendered site with CSR/SPA takeover or turbolinks-style transitions.Ideal Delivery: PWA in default display mode.

Holotype: CNNExamples: FT, BBC, BuzzFeed, Engadget, Salon, Smashing Magazine, The OnionCharacteristics: discoverability, rich media, embedded contentConstraints: shallow session depth (~1), resource contention from ads & multivariate testing, SEOIdeal Implementation: Server-rendered site with turbolinks-style transitions.Ideal Delivery: PWA in default display mode.

Holotype: GmailExamples: Google Calendar, Outlook.com, FastmailCharacteristics: thick-client, infinite lists, embedded content, rich text editing, sanitization, MDI, storage, offline & sync, notificationsConstraints: extended session length, sensitive & largely uncacheable data, high security risk, often offlineIdeal Implementation: Single Page App with app shell caching.Ideal Delivery: PWA in standalone display mode.

Holotype: Google DocsExamples: Office.com, Zoho, Dropbox, BoxCharacteristics: thick-client, rich text editing, offline & sync, filesystem, clipboard, storage, image manipulation, embedded contentConstraints: extended session length and multiple concurrent sessions favor client-side implementation.Ideal Implementation: Single Page App. Consider app shell caching. Unload page between apps.Ideal Delivery: PWA in standalone display mode.

Holotype: SpotifyExamples: Youtube Music, Google Play Music, Tidal, Soundcloud, Pandora, DeezerCharacteristics: rich media, thick-client, infinite scrolling content, filtering & sorting, notifications, OS integration, offline, embeddabilityConstraints: extended session length, playback must continue as the user navigates.Ideal Implementation: Single Page App with app shell prerendering & caching. Server-render <head> for discovery.Ideal Delivery: PWA in standalone display mode.

Holotype: FigmaExamples: AutoCAD, Tinkercad, Photopea, PolarrCharacteristics: 3D rendering & GPU, image manipulation, fullscreen & pointer capture, MDI, storage, offline, filesystem, threads, wasmConstraints: long session length, sensitivity to input & rendering latency, large objects/filesIdeal Implementation: Single Page App. Separate lighter browsing UI from editor.Ideal Delivery: PWA in standalone display mode.

Holotype: SoundtrapExamples: LooplabsCharacteristics: Audio processing, device integration (midi,usb), storage, offline, filesystem, threads, wasmConstraints: long session length, low-latency DSP, low-latency media recording & playback, large file sizes/IOIdeal Implementation: Single Page App. Separate lighter browsing UI from editor.Ideal Delivery: PWA in standalone display mode.

Holotype: CodesandboxExamples: Codepen, Jupyter Notebook, RStudio, StackBlitzCharacteristics: thick-client, MDI, storage, offline, filesystem, threads, embedded contentConstraints: extremely long session length, low-latency text input, large memory footprint, custom input handling and text rendering, security of preview contentIdeal Implementation: Single Page App. Consider separating browsing UI from editor.Ideal Delivery: PWA in standalone display mode.

Holotype: StadiaExamples: Heraclos, Duelyst, OUIGOCharacteristics: 3D rendering & GPU, P2P, audio processing, fullscreen & pointer capture, storage, offline, filesystem, threads, device integration (gamepad), wasmConstraints: long session length (highly interactive), immersion, extremely sensitive to input and rendering latency, requires consistent or stepped FPS, extreme asset sizesIdeal Implementation: Single Page AppIdeal Delivery: PWA in fullscreen display mode.

Holotype: RobostormExamples: Tank Off, War Brokers, GoreScript, Air Wars, ".io games"Characteristics: 2D & 3D rendering & GPU, P2P, audio processing, storage, offline, embeddabilityConstraints: long session length, sensitive to input and rendering latency, needs consistent/stepped FPSIdeal Implementation: Single Page AppIdeal Delivery: embedded in another site, or PWA in fullscreen display mode.