40 lines
1.7 KiB
Markdown
40 lines
1.7 KiB
Markdown
# ADR-0002 — Frontend framework: Svelte + TypeScript
|
|
|
|
- **Status:** Accepted
|
|
- **Date:** 2026-06-30
|
|
- **Context source:** Design doc §"UX and Performance Principles", NFR-RES-1
|
|
|
|
## Context
|
|
|
|
Tauri (ADR-0001) renders a web frontend. We need light/dark theming, a three-pane layout
|
|
(meetings list · transcript/notes · summary/participants), live-updating transcript and
|
|
waveform, and a Markdown editor — all while keeping per-view memory and render cost low.
|
|
|
|
## Options considered
|
|
|
|
- **React** — largest ecosystem and component availability, but ships a runtime + virtual DOM;
|
|
heavier than necessary for our footprint goals.
|
|
- **Vue** — middle ground; runtime overhead between React and Svelte.
|
|
- **Svelte** — compiles components to small imperative JS with no shipped framework runtime;
|
|
smallest bundles and lowest memory; fine-grained reactivity ideal for high-frequency
|
|
transcript/waveform updates.
|
|
- **SolidJS** — comparably lean, but smaller ecosystem/talent pool than Svelte.
|
|
|
|
## Decision
|
|
|
|
**Use Svelte with TypeScript, bundled by Vite.** Best memory/performance profile and a good fit
|
|
for streaming UI updates, with enough ecosystem maturity for an OSS project.
|
|
|
|
## Consequences
|
|
|
|
- **Positive:** smallest footprint; simple, fast reactive updates for live transcript; first-class
|
|
Vite integration with Tauri.
|
|
- **Negative:** smaller component ecosystem than React (mitigated: WA's UI is bespoke); team must
|
|
know Svelte 5 reactivity model.
|
|
- Theming via CSS custom properties + `prefers-color-scheme`, with a user override stored in
|
|
settings (FR-UX-2).
|
|
|
|
## Revisit if
|
|
We need a large third-party component (e.g. complex data grid) only available for React/Vue, or
|
|
hiring constraints favor React.
|