Future Radar: Frontend Platform
How to use this radar
This radar is a decision aid, not a hype list. Treat each topic as a candidate architecture capability. Adopt only when the user outcome, maturity, team skill, and operational model justify the added surface area.
Local-first applications
| Lens | Guidance |
|---|---|
| What it is | Applications that keep useful state local, sync later, and preserve work through network loss. |
| Why architects should care | Mobile, field, collaboration, and productivity workflows increasingly punish server-only assumptions. |
| Maturity level | Adopt selectively. Mature enough for focused product surfaces, still hard for conflict-heavy domains. |
| Adoption signal | Users work across poor networks, need fast repeat interactions, or lose high-value work during outages. |
| Risks | Conflict resolution, data privacy, sync observability, storage quotas, and stale decisions. |
| When to use | Drafts, inspections, notes, carts, field workflows, and read-mostly cached workspaces. |
| When to avoid | Highly regulated transactions where stale local authority would create harm. |
| What to learn now | Offline queues, conflict policy, background sync limits, browser storage tradeoffs, and degraded UX. |
| Connected chapters | Part II mobile networking, Part III offline consistency, Part VIII resilience. |
WebAssembly
| Lens | Guidance |
|---|---|
| What it is | A portable binary execution target for CPU-heavy code in the browser and edge runtimes. |
| Why architects should care | It can move expensive workloads such as parsing, codecs, simulations, or legacy libraries closer to the user. |
| Maturity level | Mature for focused workloads; not a default replacement for application JavaScript. |
| Adoption signal | A measured CPU bottleneck exists and there is a stable library or language reason to use WASM. |
| Risks | Bundle size, debugging complexity, initialization cost, memory pressure, and accessibility irrelevance if used for UI. |
| When to use | Heavy computation, media processing, document processing, or reused native libraries. |
| When to avoid | Ordinary UI state, form logic, or performance problems caused by poor rendering boundaries. |
| What to learn now | WASM loading, streaming compilation, worker isolation, memory transfer, and fallbacks. |
| Connected chapters | Part II runtime, Part VI performance, Part V scale. |
WebGPU
| Lens | Guidance |
|---|---|
| What it is | A browser API for modern GPU compute and rendering. |
| Why architects should care | It enables advanced visualization, simulation, graphics, and client-side compute experiences. |
| Maturity level | Emerging-to-adopt selectively. Browser support and device capability must be verified. |
| Adoption signal | Product needs complex visualization or compute that Canvas/SVG/WebGL cannot handle well. |
| Risks | Device compatibility, battery, memory, security model, fallback rendering, and engineering specialization. |
| When to use | Data visualization, creative tools, 3D, simulation, ML-adjacent browser compute. |
| When to avoid | Standard dashboards, simple charts, decorative effects, or unmeasured performance hopes. |
| What to learn now | Capability detection, progressive enhancement, worker coordination, and fallback paths. |
| Connected chapters | Part 0 advanced platform, Part II runtime, Part VI performance. |
View Transitions API
| Lens | Guidance |
|---|---|
| What it is | A browser mechanism for animated transitions between views and DOM states. |
| Why architects should care | It can improve perceived continuity without turning route changes into bespoke animation systems. |
| Maturity level | Adopt progressively. Use feature detection and avoid making comprehension depend on animation. |
| Adoption signal | Navigation discontinuity harms task orientation and the app already has stable route boundaries. |
| Risks | Motion sensitivity, layout instability, over-animation, browser support gaps. |
| When to use | Route transitions, detail-to-list continuity, media galleries, focused workflow transitions. |
| When to avoid | Dense operational tools where animation slows repeated work or hides state changes. |
| What to learn now | Progressive enhancement, reduced motion handling, route integration, and visual stability. |
| Connected chapters | Part 0 forms/interactions, Part VII design systems, Part VIII accessibility. |
Source lens
- MDN WebGPU API
- MDN View Transition API
- Local-first and offline architecture chapters in this guide