Skip to main content

⚙️ Tecniche di sviluppo frontend

Questo documento raccoglie le principali convenzioni e pratiche adottate nello sviluppo del frontend del progetto, così da garantire uniformità e manutenibilità del codice.

🏗️ Gestione dello stato​

  • NgRx (Redux-like)
    La gestione dello stato globale è implementata tramite NgRx Store, che fornisce:

    • Store centralizzato con slice per authentication, userAccess, dashboard, ecc.
    • Actions → descrivono le intenzioni (es. USER_ACCESS_PAGE_ACTIONS.changeSelectedUserAccess).
    • Reducers → mutano lo stato in maniera immutabile.
    • Selectors → estraggono proiezioni dello stato (AUTHENTICATION_SELECTORS.selectLoggedUser).

  • Signals (Angular 16+)
    Nei nuovi componenti si è iniziato ad adottare i Signals di Angular per variabili locali o stato UI.
    Usati tipicamente per:

    • visibilità di pannelli o menu,
    • flag responsive (es. isSideMenuVisible = signal<boolean>(true)).

🔄 Osservabili​

  • Tutte le variabili che terminano con $ sono Observable (RxJS).
    • Convenzione chiara: user$, companyAccesses$, canChangeCompany$.
    • Usati in combinazione con:
      • async pipe nei template (user$ | async),
      • combineLatest, map, filter, tap per orchestrare flussi.

✍️ Convenzioni di naming​

  • variabili e funzioni → camelCase
    Esempio: isMobileView, changeSelectedCompany()
  • classi, componenti e servizi → PascalCase
    Esempio: DashboardComponent, AuthService, CompanyGuard
  • costanti globali → SCREAMING_SNAKE_CASE
    Esempio: MOBILE_WIDTH, COMPANY_FEATURE

🧩 Componenti Angular​

  • Ogni feature ha un proprio Module (lazy-loaded).

  • Struttura tipica:

    • feature.component.ts → logica e stato UI
    • feature.component.html → template
    • feature.module.ts → modulo e routing

  • Componenti cross-feature importati da SharedModule.

🔐 Guards​

  • AuthGuard → verifica autenticazione utente, reindirizza a login se non autenticato.
  • CompanyGuard → verifica che l’utente abbia selezionato una company prima di accedere alla dashboard.

🌍 Traduzioni​

  • Implementate con ngx-translate.
  • Dizionari organizzati per sezione (shared.dictionary.ts, components.dictionary.ts).
  • Uso tipico nei template: 
    {{ sharedDictionary.dashboardTabs.home | translate }}