Web

Dashboard Angular

Deux vues du dashboard, comparées à la version React.

Terminé Sprint S32 · 8 points

En bref, sans jargon pour les non-informaticiensLire le résuméRefermer

Ce que c'est: Le même tableau de bord refait avec un autre outil, Angular, et la comparaison chiffrée des deux versions.
À quoi ça sert: Choisir un outil en connaissance de cause plutôt que par habitude.
Ce que ça montre: La capacité à passer d'un outil de création web à un autre et à comparer leurs forces, chiffres à l'appui.

Démo en ligne Code source

Comment les morceaux tiennent ensemble

API JSON (la même que le React) → Dashboard (Angular, signaux) : httpResource
Code partagé (api.ts, model.ts, i18n.ts) → Dashboard (Angular, signaux)
Dashboard (Angular, signaux) → Vues (routeur à fragment)
Tests (Jest, Cypress) → Dashboard (Angular, signaux) : vérifient
Dashboard React (projects/react) → Code partagé (api.ts, model.ts, i18n.ts)

React et Angular, mesurés côte à côte

Deux vues du dashboard React (Projets et Résultats), refaites en Angular sur la même API JSON statique. Les types, les calculs, les échelles des graphiques, les textes et les styles sont partagés : seul le framework change, et la comparaison porte sur lui.

Ouvrir le dashboard Angular Le dashboard React

Vue Projets du dashboard Angular en thème sombre : 21 projets terminés sur 23 et 211 points livrés sur 949, une barre d'avancement pistache, les menus État et Technologie, puis les cartes des projets avec leur état, leur sprint, leurs points et leurs technologies. — Vue Projets, thème sombre : les filtres sont des signaux, la liste un computed.

Vue Résultats du dashboard Angular en thème clair : barres horizontales vertes des temps de calcul de la courbure sur 3,2 millions de triangles, de 531 ms en C++ séquentiel à 85,5 ms en CUDA simple précision, puis le tableau des temps, accélérations et écarts. — Vue Résultats, thème clair : mêmes données, mêmes échelles que le dashboard React, rendues par des composants Angular.

Mesure	React	Angular
Version	React 19.3.0	Angular 22.2.1
Chargé à l'ouverture, compressé	79,7 ko	90,6 ko
Build de production (médiane de 3)	1,4 s	5,2 s
Lignes propres au framework (les deux vues et leur cadre)	499	546
Tests unitaires et d'intégration	40	11
Paquets npm installés, outillage compris	157	936

Mesuré par projects/angular/scripts/compare.mjs le 2026-10-07 sur Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz. Code partagé, compté à part : 582 lignes. Le chargement React couvre aussi la vue Sprints, sans la visionneuse 3D (chargée à la demande) ; ses tests couvrent ses quatre vues ; les paquets Angular comprennent Jest et Cypress. Les builds vérifient les types dans les deux cas.

Ce qui change vraiment

État : hooks (useState, useMemo) côté React ; signaux (signal, computed, linkedSignal) côté Angular, qui ne recalculent que ce qui dépend d'eux, sans zone.js.
Données : un hook maison charge l'API d'un bloc côté React ; un httpResource par fichier côté Angular, avec chargement, erreur et rechargement fournis.
Navigation : le fragment d'URL lu à la main côté React ; le routeur d'Angular, avec pages chargées à la demande et lien actif marqué tout seul.
Tests : Vitest et Testing Library côté React ; Jest, TestBed et le contrôleur HTTP de test d'Angular, plus Cypress de bout en bout. Un piège propre à Angular, un menu lié avant ses options, a été trouvé et fixé par un test.

Technologies

Angular
TypeScript
Jest
Cypress

Qui fait quoi

Angular: Deux vues du dashboard en composants autonomes à signaux, sans zone.js, avec httpResource et le routeur.
TypeScript: Les types, les calculs et les textes partagés avec le dashboard React.
Jest: Les tests unitaires, et d'intégration sur la vraie API du site.
Cypress: Les tests de bout en bout : langues, thèmes, accessibilité, 375 px de large.

Definition of Done

Code relu, diff par diff
Tests unitaires et d'intégration verts
CI verte sur Linux, Windows et macOS si compilé
README, REVIEW.md et DECISIONS.md à jour
Textes en français et en anglais
Démo déployée et testée sur mobile