Architecture Front

Berth Front — Architecture technique

SPA Angular 20 standalone, strictement zoneless, servie comme un ensemble d’assets immuables par static-web-server.

Sommaire détaillé

L’architecture du front-end est découpée en plusieurs sections :

1. Stack & Principes : Angular 20, Zoneless, Signals et arborescence du projet.
2. Features & Couches : Organisation par modules métier, responsabilités des couches Core et Shared.
3. Gestion d’état & Temps réel : Utilisation des Signals locaux, interopérabilité RxJS et WebSocket.
4. Formulaires, Tests & Déploiement : Signal Forms, stratégie de tests (Vitest/Playwright) et runtime Docker.

Schéma récapitulatif

flowchart TB
    Browser[Navigateur]
    SWS[static-web-server:2.44-alpine\nassets + SPA fallback]
    Proxy[Traefik / Caddy\nTLS + routage]
    API[Berth API\n/api + /ws]
    Agent[Berth Agent]
    Docker[Docker Engine]

    Browser -->|HTML JS CSS| Proxy
    Proxy -->|fichiers statiques| SWS
    Browser -->|HTTP /api| Proxy
    Browser -->|WebSocket /ws| Proxy
    Proxy --> API
    API --> Agent
    Agent --> Docker

    subgraph Angular[Berth Front Angular 20 zoneless]
      Pages[Pages lazy *.page.ts\nSignals locaux]
      Services[Services HTTP par feature]
      Core[Core\nAuthService / realtime / http / layout]
      Shared[Shared UI / pipes / utils]
      Pages --> Services
      Pages --> Core
      Pages --> Shared
      Services --> Core
    end
    Browser -. héberge .-> Angular

La cohérence recherchée est volontairement simple : une page possède son état, un service possède son transport, core possède l’infrastructure partagée, shared possède les briques génériques, et le reverse proxy possède le routage réseau.