Assistant: codex Assistant-Model: gpt-6-astra Assistant-Session: 01a0cffe-206f-7323-89d3-b20ca4cf4bf9
85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
# frontend-patterns
|
|
|
|
A coherent, generative pattern language for frontend architecture and design.
|
|
|
|
The project treats frontend architecture not as a choice among frameworks or named styles, but as the progressive resolution of recurring forces concerning:
|
|
|
|
- authority,
|
|
- addressability,
|
|
- projection,
|
|
- interaction,
|
|
- mutation,
|
|
- synchronization and reconciliation,
|
|
- composition,
|
|
- execution and delivery,
|
|
- quality boundaries.
|
|
|
|
The repository is intended as an **infospace for both human and agentic reference**.
|
|
|
|
Its goal is to make frontend architecture:
|
|
|
|
1. understandable as a set of recurring design problems,
|
|
2. navigable as a connected language of patterns,
|
|
3. generative rather than merely taxonomic,
|
|
4. explicit about trade-offs and failure modes,
|
|
5. independent of framework fashion,
|
|
6. grounded in known implementations and sources,
|
|
7. machine-readable enough for agents to reason over.
|
|
|
|
## Core proposition
|
|
|
|
> Frontend architecture is the progressive resolution of forces concerning
|
|
> authority, addressability, projection, interaction, synchronization,
|
|
> composition, and execution. A frontend pattern language captures recurring
|
|
> resolutions of those forces and the contexts they create for subsequent
|
|
> design decisions.
|
|
|
|
## Repository map
|
|
|
|
- `canon/` — normative vocabulary and structure of the language.
|
|
- `patterns/` — individual frontend architecture and design patterns.
|
|
- `sequences/` — generative sequences for common frontend situations.
|
|
- `architectures/` — named architectural configurations expressed through patterns.
|
|
- `technologies/` — mappings from technologies/frameworks to the patterns they implement.
|
|
- `research/` — research material, source reconciliation, concepts, catalogues, and cases.
|
|
- `templates/` — authoring templates for new patterns and mappings.
|
|
|
|
## Design principles
|
|
|
|
### Patterns before products
|
|
|
|
React, Solid, HTMX, Astro, LiveView, Vue, Svelte and similar technologies are treated as implementations and examples, not as the ontology.
|
|
|
|
### Forces before preferences
|
|
|
|
A pattern should be selected because of the forces present in a context, not because a framework community considers it idiomatic.
|
|
|
|
### Relations before lists
|
|
|
|
Patterns form a graph. Important relations include:
|
|
|
|
- requires
|
|
- enables
|
|
- refines
|
|
- generalizes
|
|
- complements
|
|
- alternative-to
|
|
- conflicts-with
|
|
- commonly-combined-with
|
|
- creates-context-for
|
|
- implemented-by
|
|
- observed-in
|
|
|
|
### Sequences before checklists
|
|
|
|
A pattern language should help generate architecture through an ordered sequence of decisions.
|
|
|
|
### Failure modes are part of the pattern
|
|
|
|
Software patterns must describe when they become harmful, misleading, expensive or fragile.
|
|
|
|
## Status
|
|
|
|
This repository begins as a research-backed v0.1 scaffold. The first research case is Ryan Carniato's
|
|
"The Grand Unifying Architecture of Frontend", used as a starting point for decomposing modern frontend
|
|
architectures into deeper responsibilities and forces.
|