Lukas
5f0ab40816
- Extract ADR documents for architectural decisions (SQLite, FastAPI, React, APScheduler, Scheduler) - Refactor setup.py: improve code structure and readability - Add IP validation utilities with test coverage - Update frontend components (BanTable, HistoryPage) - Add pre-commit hooks and CONTRIBUTING.md - Add .editorconfig for consistent coding standards
37 lines
1.4 KiB
Markdown
37 lines
1.4 KiB
Markdown
# ADR-003: React over Vue
|
|
|
|
## Status
|
|
Accepted
|
|
|
|
## Context
|
|
The frontend requires a component-based SPA framework with strong typing, a
|
|
battle-tested component library, and broad ecosystem support.
|
|
|
|
## Decision
|
|
Use **React 18+ with TypeScript** as the frontend framework.
|
|
|
|
## Rationale
|
|
|
|
### Why React over Vue?
|
|
- **Ecosystem maturity:** React has the largest frontend ecosystem. Libraries
|
|
(date pickers, data grids, rich text editors) assume React availability first.
|
|
- **Fluent UI v9:** Microsoft's official React component library is built for React.
|
|
The Vue-compatible version (Fluent UI Vue) lags significantly in features and
|
|
maintenance.
|
|
- **Hiring and onboarding:** React is more widely known. New contributors are
|
|
more likely to arrive with React experience than Vue experience.
|
|
- **Concurrent features:** React 18's concurrent rendering (`useTransition`,
|
|
`useDeferredValue`) provides a foundation for performance improvements in
|
|
data-heavy views like the ban table.
|
|
|
|
### Why not Vue?
|
|
- Fluent UI v9 does not provide first-class Vue support.
|
|
- Vue's composition API is well-designed, but does not outweigh the Fluent UI
|
|
constraint.
|
|
- Ecosystem and hiring advantages strongly favor React for enterprise-adjacent
|
|
projects.
|
|
|
|
## Consequences
|
|
- Frontend is a React SPA in `frontend/src/`.
|
|
- All components are functional components using hooks.
|
|
- Global state via React context (`frontend/src/providers/`). |