Stack & Principes (Front)

1. Stack technique

Besoin	Choix	Raison
Framework	Angular 20	Standalone components, DI moderne, Signals et Signal Forms
Langage	TypeScript strict	Contrats explicites et refactoring sûr
Détection de changements	100 % zoneless avec provideZonelessChangeDetection()	Pas de zone.js, mises à jour pilotées par les notifications Angular et les Signals
Réactivité locale	Angular Signals (signal, computed, effect)	État lisible dans les templates sans store artificiel
API asynchrone	RxJS 7 + HttpClient	HTTP, retry, annulation et interopérabilité avec le temps réel
Interopérabilité	toSignal() / toObservable()	Pont explicite entre flux RxJS et état Signals
Temps réel	WebSocket encapsulé dans RealtimeService	Reconnexion et typage à un seul endroit
Formulaires	Signal Forms Angular 20 (API expérimentale)	form(), Field, signals et validation déclarative
Routage	Angular Router, routes standalone et lazy loading	Chargement à la demande par feature
UI	Composants standalone + design system partagé	Cohérence visuelle et accessibilité
Tests unitaires / intégration	Vitest	Rapide, adapté aux services, composants et logique
Tests E2E	Playwright	Réservé aux pages routées et parcours navigateur
Build	Angular CLI / esbuild	Bundle optimisé pour un serveur statique

Zoneless : règle non négociable

Le bootstrap utilise explicitement provideZonelessChangeDetection() :

src/app/app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
};

WARNING

En mode zoneless, une mutation muette comme items.push(value) ne suffit pas. Il faut produire une nouvelle valeur avec items.update(list => [...list, value]).

2. Principes d’architecture

2.1 Standalone et frontières explicites

Tous les composants, directives et pipes sont standalone. Une feature expose une route et un barrel (index.ts) mais ne dépend pas d’une autre feature.

2.2 HTTP direct, état local par défaut

Un *.service.ts représente l’accès HTTP. Une page appelle directement son service API, puis conserve son état de présentation dans des Signals locaux. Un store n’est introduit que pour un état partagé transverse (ex: AuthService).

2.3 Pas de dépendance Docker dans le front

Le front connaît des ressources métier (Application, Agent), pas le socket Docker. La résilience réseau est centralisée dans core.

3. Arborescence du projet

berth-front/
├── src/
│   ├── main.ts
│   └── app/
│       ├── core/           # Auth, HTTP, Realtime, Layout, Config
│       ├── shared/         # UI, Pipes, Directives, Utils, Models
│       └── features/       # Applications, Containers, Dashboard