Client Platforms · 1 of 6

Web

The browser is the most-installed runtime on Earth — no SDK, no app store, instant updates. The trade is sandboxed access to the device and a moving target of standards across vendors.

HTMLCSSJavaScriptTypeScriptWebAssemblyWeb APIs
← Back to Client Side
Quick Facts

At a Glance

Basic Concepts

  • Three core technologies: HTML for structure, CSS for presentation, JavaScript for behavior. TypeScript compiles down to JS.
  • Rendering engines: Blink (Chrome, Edge, Brave), WebKit (Safari, all iOS browsers), Gecko (Firefox). Three implementations of the same standards.
  • Same-origin policy isolates each site. CORS opens specific cross-origin holes.
  • The platform is the spec: WHATWG (HTML, DOM, Fetch), W3C (CSS, ARIA), TC39 (JavaScript). Vendors implement, devs use.
  • Backwards compatibility is a hard rule — code from 1996 still runs. Nothing else in computing has this property.
Reach

Why Web Wins on Distribution

  • Zero install: click a link, you're using the app. No store review, no version skew.
  • Instant deploy: ship 20 times a day. Native apps wait days for review.
  • Universal: every OS, every form factor, every locale.
  • Discoverable: search engines index it. Apps don't.
  • No revenue cut on payments — vs 15–30% on iOS/Android stores.
Mechanics

How a Page Becomes Pixels

The Critical Rendering Path
  1. Parse HTML → DOM tree.
  2. Parse CSS → CSSOM. Render-blocking by default.
  3. Render tree = DOM × CSSOM, minus display:none nodes.
  4. Layout (a.k.a. reflow) — compute geometry.
  5. Paint — fill pixels into layers.
  6. Composite — GPU stitches layers together.
Rendering Modes
  • CSR (Client-Side Rendering) — server ships an empty shell, JS builds the UI. Fast subsequent navigation, slow first paint.
  • SSR (Server-Side Rendering) — server renders HTML per request. Good first paint, more server cost.
  • SSG (Static Site Generation) — pre-render at build time. Fast and cheap; stale until rebuild.
  • ISR (Incremental Static Regen) — SSG with on-demand revalidation. Vercel/Next popularized it.
  • RSC (React Server Components) — components rendered on the server stream into a client app.
  • Edge — SSR running in a region near the user (Cloudflare, Vercel Edge).
Core Web Vitals — What Google Measures
MetricMeasuresGood
LCP (Largest Contentful Paint)When the main content appears≤ 2.5s
INP (Interaction to Next Paint)Responsiveness to user input≤ 200ms
CLS (Cumulative Layout Shift)How much content jumps around≤ 0.1

INP replaced FID in March 2024. These feed Google search ranking.

The Web Platform APIs
  • Storage: localStorage, IndexedDB, Cache API, OPFS.
  • Network: Fetch, WebSockets, Server-Sent Events, WebRTC, WebTransport.
  • Hardware: WebGL, WebGPU, Web Audio, MediaDevices (camera/mic), Geolocation, WebUSB, WebHID, Web Bluetooth.
  • Workers: Web Workers, Service Workers (offline), Shared Workers.
  • Graphics: Canvas 2D, WebGL, WebGPU.
  • Identity & payments: WebAuthn (passkeys), Payment Request, Credential Management.
WebAssembly

A binary format that runs near-native speed in every modern browser. Lets C/C++/Rust/Go ship to the web — Figma's editor, Photoshop Web, Google Earth, ffmpeg.wasm. Not a JS replacement; pairs with JS via the WebAssembly JS API.

Browser Compatibility
  • Baseline (web.dev/baseline) — features supported across the latest two versions of all major browsers.
  • caniuse.com — the canonical "is this safe yet?" reference.
  • Browserslist — config used by Babel, autoprefixer, ESLint to know what to compile down to.
  • Safari often lags on new APIs by 6–18 months. Plan for it.
Security Model
  • Same-origin policy — scheme + host + port must match.
  • CORS — server opt-in for cross-origin requests.
  • CSP (Content Security Policy) — header that restricts what scripts/styles can load.
  • SameSite cookies — default Lax; mitigates CSRF.
  • HTTPS-only — required for service workers, most modern APIs, and just in general.
  • Subresource Integrity — hash third-party scripts so a CDN compromise can't inject code.
Picking

When Web Is and Isn't the Right Choice

Reach & SEO matter most

Web. Marketing sites, B2B SaaS, content, dashboards — almost always start here.

Need camera/sensors/background

Web has gotten 80% there (PWA), but native still wins for the last mile — barcode scanning, ARKit, persistent background work.

Want app-store presence

Either ship native or wrap a PWA in Capacitor / Tauri / TWA.

Heavy graphics / games

WebGPU + WebAssembly is now viable for many cases (Figma, Photoshop Web). For AAA games, still native.

Pitfalls

Common Anti-Patterns

  • Shipping a 3 MB JS bundle for a content site. Code-split, lazy-load, prefer SSR/SSG.
  • Layout shift from images without dimensions or late-loading fonts.
  • Blocking the main thread with sync work — use Web Workers for anything heavy.
  • Polyfilling for IE11 in 2026. Drop it; use Baseline.
  • Treating the web like an app — breaking back/forward, link sharing, scroll restoration.
  • Ignoring Safari until launch week.
Continue

Other Client Platforms

Mobile (Native)Mobile (Cross-platform)DesktopTV / Embedded / WearablesPWA ↑ Back to Client Side