Skip to content
Sunny Calculator Add-On

ADR-008 - Technologies (Frontend)

Statusaccepted
Date2025-04-11
Decision MakersDardan Bujupaj (AX), Martin Klapper (AX), Sandro Wyss (AX)
Referenced ByADR-015 - Frontend-Backend Communication

Context

The main responsibilities of the front-end application (non-exhaustive) are the following:

  • Fetching and displaying data from the backend services.
  • Displaying data in tables and diagrams
  • Enabling user interaction with data, mostly in table views
  • Calculating dependant values based on user changes
  • Writing changes made by user back to backend services via API

The application’s should be responsive, lightweight and fast in development and production environments. It will be used internally, hence we don’t have need to strong SEO.

The choices made must:

Given this context, we must decide on a combination of:

  • a programming language
  • a front-end build tool (/bundler)
  • a UI library or framework
  • a routing-library / solution
  • UI libraries for building interfaces
  • a testing framework / library for unit testing
  • client-side state (+ form-) management solution

Decision

We have decided to use the following stack for the front-end:

TypeScript

We choose TypeScript as the programming language for the front-end application due to its powerful static design-type typing and tooling support, which enables us to build maintainable and scalable code. The AX Solutions team has experience in developing with TypeScript. Additionally, TypeScript is useful in a collaborative environmnent with potentially changing developers and different teams, such as here. Using TypeScript, the code will easy to read and maintain for new developers.

Vite

We choose Vite because:

  • it provides a fast development experience with module hot-reloading
  • easily integrates with other parts of the stack, e.g. typescript, react, vitest

React

We choose React as a base ui library because:

  • the component model will enable us to build re-usable ui components
  • we can provide the needed interactivity with react hooks and apis
  • it has a large ecosystem and is actively maintained
  • it provides great DX with built-in performance and debugging capabilities
  • AX as well as Griesser developers have experience with using react

Tanstack Router

Tanstack Router is a modern routing framework for usage with react. We choose Tanstack Router for our application because it:

  • provides powerful routing capabilities, such as file-based route-generation, path- and search-parameters
  • has built-in lightweight caching
  • integrates well with other Tanstack libraries, such as Tanstack Query and Tanstack Table
  • works well on top of Vite
  • works well with TypeScript

shadcn & TailwindCSS

shadcn gives us well-designed, accessible, headless UI components that we can customize easily using TailwindCSS. This makes it easy to adapt components to the application’s custom design without the overhead of maintaining a custom css structure.

Tanstack Query

For client-side data fetching we choose Tanstack Query (formerly react query) This is because it lets us:

  • Query data declaratively
  • Cache query results easily and thereby take over state management in the application
  • ‘react’ to updates when query data changes in the background

Consequences

  • Developers must use and be proficient with react and typescript development
  • Coupling of UI components with shadcn
  • Quick iterations due to component-structure and a fast front-end development flow with Vite
  • Compartmentalize, decoupled code that is easy to unit test

Alternatives

TypeScript

  • Considered JavaScript, but TypeScript improves maintainability and developer experience, despite minor build overhead.

Vite

  • Evaluated Next.js and Webpack.
    • Next.js is full-stack, which we don’t need for a frontend-backend split; also, Vercel products reduce modularity.
    • Webpack is mature but slower for development; Vite offers faster builds, better DX, and integrates well with Vitest and SSR.

React

  • Considered Angular, but React offers more flexibility and a larger, active ecosystem. The team also has more React experience.

Tanstack Router

  • Looked at React-Router, which is more mature, but chose Tanstack Router for type safety, better DX, and compatibility with other Tanstack libraries.

shadcn & TailwindCSS

  • Considered Headless UI, but chose shadcn for fast setup, active maintenance, and production-ready components, while meeting requirements for extensibility, customizability, and accessibility.

Tanstack Query

We considered using fully-fledged state management solutions (e.g. mobx) or light-weight query libraries (e.g. SWR), but decided against it as the source of truth of the data lies with the backend.