Anteprima in tempo reale: come VULK renderizza la tua app live

Aggiornato il 18 luglio 2026 — riscritto attorno all'architettura attuale: microVM Firecracker, il servizio di build Flutter e i runtime PHP + Python andati live a luglio 2026.

Come renderizza VULK la tua app live?

La risposta completa: mentre l'IA trasmette i file generati, VULK li invia a un servizio di anteprima dedicato che esegue la tua app dentro una microVM Firecracker — una macchina virtuale reale e isolata con kernel, filesystem e rete propri, presa da un pool caldo così da collegarsi in pochi secondi. Dentro la microVM, un vero server di sviluppo Vite esegue la tua app React con hot module replacement; l'app in esecuzione viene proxata in un iframe nell'editor. Le app Flutter passano per una pipeline separata build-then-serve (flutter build web, ~20–60 secondi per build), e da luglio 2026 anche le app PHP e Python girano live nei propri runtime microVM.

Questa non è una simulazione né una sandbox del browser: è la tua applicazione reale in esecuzione su vera infrastruttura server, trasmessa al tuo schermo. Quella velocità è ciò che rende possibile il numero che definisce la piattaforma — il builder mediano passa dalla registrazione a un'app generata in esecuzione in 47 secondi (dati della piattaforma VULK, luglio 2026, N = 11.355 progetti).

Perché l'anteprima è il problema duro della generazione di app con IA?

Quando un generatore IA produce codice, devi vedere il risultato immediatamente. La maggior parte delle piattaforme prende una di due strade: uno screenshot statico, o compilare il codice nel browser con strumenti come WebContainers o Sandpack. Entrambe hanno limiti significativi.

Gli screenshot statici sono ovviamente insufficienti — non puoi interagirci, scorrere, cliccare pulsanti o testare la funzionalità. La compilazione nel browser è meglio ma introduce i propri problemi: grandi download della toolchain, supporto limitato delle API Node.js, nessuna esecuzione del backend, compilazioni a freddo lente, uso pesante di memoria e restrizioni della sandbox che rompono molti pacchetti npm.

VULK prende la terza strada: anteprima server-side su microVM isolate. Costa di più da operare — serve infrastruttura reale invece del browser dell'utente — ma è l'unico approccio in cui "l'anteprima funziona" significa in modo affidabile "l'app funziona".

Cosa succede tra la generazione e un'app visibile?

Passo 1: Generazione del codice. Il modello IA trasmette la sua risposta, producendo file avvolti in tag XML vulkAction. Quando ogni file è completo, VULK ne estrae percorso e contenuto.

Passo 2: Assegnazione della microVM. I file vanno al servizio di anteprima (webapp.vulk.dev), che collega il tuo progetto a una microVM Firecracker da un pool pre-avviato. Ogni microVM è una macchina virtuale genuina — isolamento a livello hardware, non un container condiviso — con un'immagine rootfs adatta alle esigenze del progetto (immagine web di base, immagine con capacità 3D o immagine completa con dipendenze pesanti preinstallate).

Passo 3: Dipendenze e avvio del server. Dentro la VM, le dipendenze si installano contro layer di node_modules pre-cachati — il passo più lento di un'anteprima a freddo, ridotto a secondi per gli stack comuni. Per i progetti React + Vite parte il server Vite; per gli altri stack, il runtime appropriato.

Passo 4: Rendering in iframe. L'applicazione in esecuzione viene proxata attraverso un URL unico e mostrata in un iframe nell'editor di VULK. Ottieni l'applicazione completa e funzionante — non un render parziale.

Passo 5: Hot reload sulle modifiche. Quando un prompt di follow-up modifica dei file, solo quelli cambiati vengono spinti nella VM. L'hot module replacement di Vite aggiorna l'iframe senza ricaricare tutto — vedi le modifiche in meno di un secondo, di solito senza perdere lo stato dei componenti.

Passo 6: Sospensione e ripresa. Le anteprime inattive vengono sospese per liberare risorse e riprese su richiesta — tornare a un progetto non significa ricostruirlo da zero.

Come si visualizza in anteprima ogni piattaforma, davvero?

Stack diversi passano per pipeline genuinamente diverse — ecco la mappa onesta per piattaforma:

Quelle ultime due righe contano. React Native bundlato da Metro non può girare in modo veritiero in un'anteprima web, e il codice Shopify ha bisogno del runtime admin e storefront di Shopify. Invece di fingere quei render, l'editor ti dice esattamente come eseguirli dove girano davvero. Un'anteprima di cui non ti puoi fidare è peggio di nessuna anteprima.

Perché il server-side batte la compilazione nel browser?

Il codice backend gira davvero. Le app full-stack generate da VULK includono vere API e accesso al database — e il 62% di tutte le app generate include uno schema SQL (dati della piattaforma VULK, luglio 2026). Le sandbox del browser non possono eseguire quel backend; lo simulano o lo saltano. Nell'anteprima di VULK testi l'intero flusso: registrazione, login, creazione dati, chiamate API.

Nessun limite di sandbox. Gli strumenti basati sul browser emulano Node.js dentro un Service Worker; alcuni pacchetti npm falliscono in silenzio, i moduli nativi non funzionano, l'accesso al filesystem è limitato. Una microVM è un vero ambiente Linux — nessuno di quei limiti esiste.

Coerente tra i dispositivi. La build gira sul server, quindi un Chromebook economico e un MacBook Pro ottengono identiche performance di anteprima — e i browser mobile, dove la compilazione in-browser va dal doloroso all'impossibile, funzionano bene.

Isolamento a livello hardware. Le microVM Firecracker isolano al livello di virtualizzazione — la stessa tecnologia di AWS Lambda. Il loop infinito di un utente non può toccare l'anteprima di un altro, e una VM crashata viene riciclata automaticamente.

Rendering fedele. L'iframe carica da un vero URL servito da un vero server — ciò che vedi in anteprima corrisponde a ciò che gli utenti vedono in produzione.

Cosa vedi durante la generazione?

VULK non ti fa aspettare la fine dell'intera generazione. L'anteprima si aggiorna progressivamente: appena esistono i file di base (index.html, main.tsx, package.json), il server parte; man mano che i file dei componenti arrivano, il file watcher scatena hot update. Vedi l'app costruirsi in tempo reale — prima il layout, poi i componenti, poi gli stili.

Questo rendering progressivo dà feedback precoce. Se l'IA va nella direzione sbagliata, lo vedi in pochi secondi e fermi la generazione invece di aspettare. E dopo la generazione, il render gate di VULK carica quella stessa anteprima in esecuzione in un'istanza Chromium reale e boccia le generazioni che renderizzano una pagina bianca o un error boundary — l'anteprima non è solo per i tuoi occhi, è parte della verifica.

Quali sono i limiti dell'anteprima?

Avvii a freddo. Le dipendenze non in cache possono richiedere 10–30 secondi di installazione alla prima generazione. Le esecuzioni successive nello stesso progetto riusano le cache e sono molto più veloci.

Flutter ha latenza di build. ~20–60 secondi per build (un vero flutter build web), e niente hot-reload tra le build — rendering fedele al costo della velocità di iterazione.

Nessun rendering mobile nativo. Flutter si visualizza come Flutter Web — funzionalmente fedele, visivamente vicino, ma il test finale su dispositivo appartiene a un dispositivo. React Native non ha ancora alcuna anteprima nell'editor.

Limiti di risorse. Ogni microVM ha tetti di CPU e memoria per una condivisione equa; carichi estremamente pesanti (grandi dataset, simulazioni complesse) possono raggiungerli.

Isolamento di rete. Gli ambienti di anteprima non possono chiamare servizi esterni arbitrari, per sicurezza. Le chiamate ad API di terze parti falliscono in anteprima e funzionano dopo il deploy.

Cosa succede tra anteprima e produzione?

L'anteprima non è una build separata della tua app — è lo stesso codice in esecuzione in un ambiente di sviluppo. Quando clicchi Deploy, VULK prende quello stesso codice, esegue una build di produzione (vite build) e consegna l'output a Cloudflare Pages in 10–30 secondi. Ciò che hai testato è ciò che i tuoi utenti ricevono, più minificazione, tree shaking e ottimizzazione degli asset.