Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Frameworks e Librerie

Per la realizzazione del progetto sono stati utilizzate diversi Frameworks e Librerie a supporto del processo di sviluppo.

React

React è una libreria JavaScript per la creazione di interfacce utente. È progettata per sviluppare applicazioni web interattive, consentendo agli sviluppatori di costruire componenti riutilizzabili che si aggiornano in modo efficiente in base ai cambiamenti dei dati. React utilizza un approccio basato su componenti e un modello di programmazione dichiarativo, semplificando lo sviluppo e la gestione dello stato dell’applicazione. Grazie al suo approccio al virtual DOM, React ottimizza le prestazioni dell’applicazione, consentendo una user experience fluida e reattiva. È ampiamente utilizzato e supportato da una vasta comunità di sviluppatori.

icona react

Vite

Il framework Vite si basa su diversi principi fondamentali per garantire prestazioni elevate e un’esperienza di sviluppo fluida. In particolare, utilizza i moduli ES nativi e le moderne API del browser per compilare il codice “on the fly” e garantire tempi di build rapidi e aggiornamenti istantanei nel browser. Inoltre, il server di sviluppo integrato in Vite è ottimizzato per il reloading rapido e la sostituzione dei moduli senza fermare l’esecuzione, consentendo agli sviluppatori di vedere in tempo reale le modifiche apportate al codice senza dover aggiornare l’intera pagina.

Vite implementa anche il caricamento “lazy” dei moduli, consentendo di migliorare le prestazioni dell’applicazione, soprattutto per quelle di grandi dimensioni, e di garantire un caricamento iniziale più rapido per gli utenti. Inoltre, utilizza tecniche come il “tree-shaking” e il “code splitting” per rimuovere il codice inutilizzato dall’applicazione e dividere il codice in sezioni più piccole, migliorando ulteriormente le prestazioni.

icona vite

Vitest

Per il progetto si è deciso di utilizzare il framework Vitest per la realizzazione di test automatizzati sul codice che ha permesso di implementare tutti i vari test necessari per garantire la qualità del codice e analizzare la coverage del progetto, con la possibilità di eseguire i test su browser tramite un’interfaccia grafica.

icona vitest

Ant Design

Ant Design è una libreria di componenti UI (User Interface) reattivi e moderni per lo sviluppo di applicazioni web. Offre un’ampia gamma di componenti predefiniti, che vanno dai componenti di base come pulsanti, campi di input e tabelle, a componenti più complessi come menu, modali, grafici e molto altro. Questi componenti sono progettati con una forte attenzione all’usabilità, all’accessibilità e alla coerenza visiva, fornendo una solida base per la creazione di interfacce utente attraenti e funzionali.

icona Ant Design

styled-components

styled-components è una libreria JavaScript per lo styling dei componenti React. Si tratta di una delle librerie più popolari per l’implementazione dello stile nel mondo di React e offre un approccio basato su CSS-in-JS (CSS in JavaScript) per la creazione di componenti stilizzati.

A differenza dei metodi tradizionali di styling in cui i CSS vengono definiti in file separati e collegati ai componenti, styled-components permette di definire i CSS direttamente all’interno dei componenti stessi, utilizzando una sintassi simile al CSS. Questo approccio offre una maggiore modularità e facilità di manutenzione, in quanto lo stile è fortemente accoppiato al componente corrispondente.

icona styled-components

ApexCharts

ApexCharts è una libreria JavaScript open source per la visualizzazione dei dati attraverso la creazione di grafici interattivi. È basata sulla libreria di visualizzazione dei dati Chart.js e offre funzionalità avanzate, personalizzazioni flessibili e una vasta gamma di tipi di grafici.

icona ApexCharts

Mapbox

Mapbox è una libreria JavaScript open source per la creazione di mappe interattive e personalizzate nel browser. Renderizza mappe vettoriali direttamente nel browser, offrendo prestazioni fluide e la possibilità di creare esperienze di mappatura ricche di funzionalità. Supporta una vasta gamma di funzionalità, come il controllo della telecamera, l’aggiunta di marker, la visualizzazione di dati geografici personalizzati e l’implementazione di interazioni utente avanzate.

icona Mapbox