Web

Angular dashboard

Two dashboard views, compared with the React version.

Done Sprint S32 · 8 points

In short, no jargon for non-developersRead the summaryClose

What it is: The same dashboard rebuilt with another tool, Angular, and the two versions compared with figures.
What it is for: To choose a tool knowingly rather than out of habit.
What it shows: Moving from one web tool to another and comparing their strengths, with figures to back it up.

Live demo Source code

How the pieces fit together

JSON API (the same as React's) → Dashboard (Angular, signals): httpResource
Shared code (api.ts, model.ts, i18n.ts) → Dashboard (Angular, signals)
Dashboard (Angular, signals) → Views (fragment router)
Tests (Jest, Cypress) → Dashboard (Angular, signals): check
React dashboard (projects/react) → Shared code (api.ts, model.ts, i18n.ts)

React and Angular, measured side by side

Two views of the React dashboard (Projects and Results), rebuilt in Angular on the same static JSON API. Types, computations, chart scales, texts and styles are shared: only the framework changes, and the comparison is about it.

Open the Angular dashboard The React dashboard

Projects view of the Angular dashboard in dark theme: 21 of 23 projects done and 211 of 949 points delivered, a pistachio progress bar, the Status and Technology menus, then the project cards with their status, sprint, points and technologies. — Projects view, dark theme: the filters are signals, the list a computed.

Results view of the Angular dashboard in light theme: green horizontal bars of the curvature computing times on 3.2 million triangles, from 531 ms in sequential C++ to 85.5 ms in single-precision CUDA, then the table of times, speed-ups and errors. — Results view, light theme: same data and scales as the React dashboard, rendered by Angular components.

Measure	React	Angular
Version	React 19.3.0	Angular 22.2.1
Loaded on opening, compressed	79.7 kB	90.6 kB
Production build (median of 3)	1.4 s	5.2 s
Lines of framework code (the two views and their frame)	499	546
Unit and integration tests	40	11
npm packages installed, tooling included	157	936

Measured by projects/angular/scripts/compare.mjs on 2026-10-07 on Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz. Shared code, counted apart: 582 lines. The React load also covers the Sprints view, without the 3D viewer (loaded on demand); its tests cover its four views; the Angular packages include Jest and Cypress. Both builds check types.

What really changes

State: hooks (useState, useMemo) in React; signals (signal, computed, linkedSignal) in Angular, which recompute only what depends on them, without zone.js.
Data: a home-made hook loads the API in one go in React; one httpResource per file in Angular, with loading, error and reload provided.
Navigation: the URL fragment read by hand in React; Angular's router, with pages loaded on demand and the active link marked by itself.
Tests: Vitest and Testing Library in React; Jest, TestBed and Angular's HTTP testing controller, plus Cypress end to end. A trap of Angular's own, a menu bound before its options, was found and pinned by a test.

Tech stack

Angular
TypeScript
Jest
Cypress

Who does what

Angular: Two dashboard views as standalone signal-based components, without zone.js, with httpResource and the router.
TypeScript: The types, computations and texts shared with the React dashboard.
Jest: Unit tests, and integration tests on the site's real API.
Cypress: End-to-end tests: languages, themes, accessibility, 375 px wide.

Definition of Done

Code reviewed, diff by diff
Unit and integration tests green
Green CI on Linux, Windows and macOS when compiled
README, REVIEW.md and DECISIONS.md up to date
Texts in French and English
Demo deployed and tested on mobile