
EMS
Gestione Aziendale Integrata
Panoramica
Il Problema
Un'azienda cliente con un gestionale B2B in React aveva un problema serio: il sistema funzionava, ma ogni pagina faceva 50+ chiamate API separate. Aprire la lista ordini richiedeva 30 secondi. Aggiungere una nuova sezione significava copiare e incollare centinaia di righe di codice già esistenti. Il backend non aveva validazione degli input e le rotte non erano ottimizzate.
Il codice era cresciuto senza una struttura: ogni sviluppatore aveva aggiunto componenti separati per fare le stesse cose, ogni pagina gestiva lo stato in modo diverso, e non esisteva un sistema di caching. Il risultato era un'applicazione lenta, difficile da mantenere e impossibile da estendere senza rompere qualcosa.
La Soluzione
Ho iniziato dall'analisi del codice per mappare ogni duplicazione. Il pattern era chiaro: DataTable e FormBuilder venivano riscritti da zero in ogni pagina. Ho creato due componenti universali configurabili che coprono il 90% dei casi d'uso della piattaforma: passare un array di colonne e una sorgente dati è sufficiente per generare una tabella completa con paginazione, ordinamento e filtri.
Per le chiamate API ho introdotto un layer di caching con React Query: ogni dato viene richiesto una volta e tenuto in cache per la durata della sessione. Da 50+ richieste per pagina a meno di 5. Il bundle iniziale era enorme perché tutto veniva caricato subito — ho separato ogni sezione in chunk lazy-loaded e aggiunto code splitting per le librerie pesanti.
Sul backend ho ricostruito le rotte con validazione Zod su ogni input e autenticazione JWT con refresh automatico. Ho aggiunto un sistema di generazione documenti PDF per preventivi e fatture, e integrato un lettore barcode per i movimenti di magazzino con alert automatici quando lo stock scende sotto soglia.
Il Risultato
Il caricamento delle pagine è passato da 30 secondi a meno di 3. Il bundle iniziale si è ridotto dell'80%. La codebase è scesa del 60% in linea di codice grazie all'eliminazione delle duplicazioni. Il team ora aggiunge nuove sezioni in ore invece che in giorni, riutilizzando i componenti universali invece di riscriverli.
Funzionalità Chiave
- Componenti React riutilizzabili: DataTable e FormBuilder universali eliminano 60% codice duplicato
- Caching intelligente: da 50+ chiamate API per pagina a meno di 5, caricamento >10x più veloce
- Performance: bundle iniziale -80% (lazy loading + code splitting), da 30s a <3s
- Scansione barcode: movimenti magazzino veloci, alert stock minimo, inventario real-time