ADR-005: Frontend Framework

Field

Value

Status

Accepted

Date

2026-05-19

Deciders

Frontend Team

Supersedes

–

Superseded by

–

Context

In order to start developing the frontend, the team needs to decide which of the various existing frameworks to use. Given the impact on architecture, workflow, and other fundamental aspects, this should be considered an important decision. Due to the team’s experience being mostly limited to JavaScript, we decided to consider only JavaScript frameworks as viable options.

Decision Drivers

  • Support for component-based architecture

  • Support for complex, interactive states

  • Extensive ecosystem / library support

  • Builds on team’s previous experience / available tutorials to get started quickly

Considered Options

  • Option A – Vue.js

  • Option B – React

  • Option C – Angular

Decision

Chosen option: React (+ TypeScript)

Rationale

React provides an extensive support for reusable components, animations, and third-party-libraries, enabling fast and efficient implementation of interactive user interfaces. The same applies to the support for state management and component-based architectures. Furthermore, experience with React already exists within the team. Since React is commonly used with TypeScript, we decided to use it as our script language instead of JavaScript.

Pros and Cons of the Options

Option A – Vue.js

  • ✅ Clear separation of logic, template, and styling

  • ✅ Existing team experience

  • ❌ Smaller ecosystem (compared to React)

  • ❌ Fewer integrations and third-party libraries

Option B – React

  • ✅ Suited for highly interactive and dynamic user interfaces

  • ✅ Extensive library support and ecosystem

  • ❌ Logic and template in one component

  • ❌ Dependent on external libraries for common tasks

Option C - Angular

  • ✅ Excellent TypeScript integration

  • ✅ Strong architectural conventions and structure

  • ❌ Less flexibility due to strong framework conventions

  • ❌ High complexity and learning curve

Consequences

Positive:

  • Faster implementation of tasks of interactive components and animations

  • Easier integration of modern web- and AI-based technologies

  • Reduced amount of runtime errors due to type safety via TypeScript

Negative / Trade-offs:

  • Some team members will have to catch up on missing knowledge

Follow-up actions:

  • [ ] Update ADR status from Proposed to Accepted