frontend-patterns/canon/Scales.md
tegwick 71a8c1424b Reconcile pattern metadata and prepare contrasting primary-source inputs
Assistant: codex
Assistant-Model: gpt-6-astra
Assistant-Session: 01a0cffe-206f-7323-89d3-b20ca4cf4bf9
2026-09-24 15:23:06 +02:00

93 lines
1.7 KiB
Markdown

# Scales
Patterns operate at different architectural scales.
## L0 — Experience / Product
Concerns the overall interactive system experienced by a user.
Examples:
- collaborative editor,
- transactional workflow,
- content publication,
- offline field application.
## L1 — Application Topology
Large-scale application organization.
Examples:
- independently deployable frontend,
- application shell,
- frontend/backend partitioning.
## L2 — Authority & Distribution
Placement and replication of authoritative state.
Examples:
- server authority,
- local authority,
- replicated authority.
## L3 — Navigation & Projection
Addressability, routing, rendering and delivery of perceivable state.
Examples:
- URL as state,
- server projection,
- client projection,
- streaming projection.
## L4 — Feature / Domain Boundaries
Functional decomposition.
Examples:
- vertical feature slice,
- bounded frontend feature,
- backend for frontend.
## L5 — Components
Reusable interaction and presentation structures.
Examples:
- presentation model,
- compound component,
- controlled component.
## L6 — Interaction & State
Fine-grained interaction behavior.
Examples:
- local interaction state,
- optimistic overlay,
- pending state.
## L7 — Elements / Implementation
Low-level implementation structures.
Examples:
- lazy boundary,
- error boundary,
- focus restoration.
## Rule
Patterns from different scales may relate strongly, but should not be treated as equivalent alternatives merely because they are all called "frontend patterns".
Serialize applicability as `scales: [L3, L6]`, including each relevant level
explicitly. Catalog labels such as cross-scale remain discovery notes until resolved.