Prefab funziona senza conoscere JavaScript?

Sì, Prefab è pensato per sviluppatori Python. Scrivi la logica e l'interfaccia in Python, e Prefab genera automaticamente il codice React necessario. L'esportazione HTML statica non richiede server né competenze frontend.

Posso usare Prefab per progetti reali di produzione?

Prefab è un framework emergente, adatto per dashboard interni, prototipi e analisi ad hoc. Per applicazioni in produzione con utenti multipli e requisiti di scalabilità, valuta alternative consolidate come Dash di Plotly o Streamlit.

Il dashboard esportato in HTML supporta interattività reale?

Sì, l'HTML statico mantiene la reattività dei componenti (filtri, slider, tabelle ordinabili) grazie a JavaScript integrato. L'unica limitazione è l'assenza di backend live: i dati sono fissi al momento dell'esportazione.

Schermata di un dashboard interattivo costruito con Prefab in Python, con grafici e tabelle

Tecnologia

Come progettare dashboard interattivi in Python con Prefab: componenti reattivi e HTML statico

DiFabrizio Martini 22/06/2026

Prefab è un framework che permette di costruire interfacce utente moderne senza scrivere una riga di JavaScript. In questo tutorial costruiamo un dashboard operativo completo: dati sintetici di pipeline, grafici, tabelle filtrabili, metriche in tempo reale e componenti UI reattivi — tutto in Python.

L’intero progetto si può eseguire in Google Colab e l’output finale è un file HTML statico da condividere o embeddare. Il codice è disponibile passo passo.

Cosa serve per iniziare

Installi prefab-ui versione 0.20.2 in Colab, imposti i path per app e output HTML, e importi i moduli Python necessari. Poi definisci una stringa APP_CODE dove costruisci la logica dell’applicazione.

Generazione dei dati di esempio

Creiamo un dataset sintetico che simula il monitoraggio di pipeline ETL: 30 giorni di attività per 4 regioni (APAC, EMEA, NA, LATAM), con metriche come stato esecuzione, latenza, costo e ricavo. Ogni pipeline ha priorità (P0–P3) e proprietari (Data Platform, AI Apps, ecc.).

I dati vengono aggregati per regione e per giorno, con funzioni che calcolano tasso di successo, costo medio, ROI e trend nei 14 giorni precedenti. Il campione finale contiene 80 run ordinate per priorità e stato.

Componenti dell’interfaccia

Ecco la struttura del dashboard:

Selettore regione con Slider e Switch per attivare filtri
Metriche in cima: run totali, tasso di successo, latenza media, costi, ricavi, ROI, issue aperti, P0/P1, tasso di fallimento
Sparkline a 14 giorni per il success rate
LineChart dell’andamento giornaliero
PieChart dello stato delle run (Completed, Late, Failed)
BarChart per pipeline più eseguite
RadarChart di confronto regionale
ScatterChart costo vs durata
DataTable filtrabile per ogni colonna
Card con dettagli su ogni run selezionata
Alert per notifiche (es. P0 fallito)
Tabs per separare viste (Overview, Detailed, Region Compare)
Badge colorati per priorità

Ogni componente reagisce allo stato dell’applicazione: il selettore regione aggiorna automaticamente tutte le metriche, i grafici e la tabella.

Esportazione in HTML statico

Una volta completata la logica e l’interfaccia, chiami app.export_html(APP_PATH) per generare un file HTML che contiene tutto: dati, componenti reattivi e styling. Puoi visualizzarlo in Colab con HTML(filename=HTML_PATH).

Nessun server, nessun deploy — condividi il file HTML come faresti con un PDF.