FlowTrace - Visualizzare cosa accade dietro un clic | POLPROG Skip to content

FlowTrace

FlowTrace

FlowTrace - Visualizzare cosa accade dietro un clic

Visualizzazione didattica dell'intero flusso di richiesta e rendering web.

Applicazione web Online
13
Livelli dello stack visualizzati
4
Tipi di trigger
4
Modalità di interazione (pianificate)
0
Tracciamento / account

Informazioni

FlowTrace è un'applicazione web didattica sperimentale che visualizza cosa accade davvero dietro le azioni comuni dell'utente: un clic, una pressione di tasto, l'invio di un modulo, uno scorrimento. Traccia il percorso della richiesta e del rendering attraverso l'intero stack web - event loop del browser, DOM, runtime JavaScript, DNS, TLS, CDN, gateway, server, cache, coda, database, risposta e rendering - e trasforma ogni livello in qualcosa che uno sviluppatore o uno studente può vedere e percorrere passo passo.

Il progetto esplora diverse modalità interattive, tra cui una vista di sistema ad alto livello, un viaggio cinematografico lungo il percorso della richiesta, un flusso in prima persona attraverso lo stack e un costruttore di scenari per flussi personalizzati, insieme a un concept FlowTrace Lab per la sperimentazione pratica.

Funzionalità principali

01

Trigger di clic, pressione di tasto, invio e scorrimento

FlowTrace parte da un'azione concreta dell'utente e traccia cosa accade dopo, invece di spiegare lo stack web in astratto.

02

Traccia dell'intero stack - dal browser al rendering

Ogni visualizzazione percorre lo stesso percorso: event loop del browser, DOM, runtime JS, DNS, TLS, CDN, gateway, server, cache, coda, database, risposta e ritorno al rendering.

03

Simulazione 3D del flusso di sistema

Una scena 3D interattiva mostra le richieste muoversi attraverso lo stack in tempo reale, così l'ordine, il fan-out e i colli di bottiglia sono visibili a colpo d'occhio.

04

Più modalità di visualizzazione

Vista di sistema per il quadro generale, viaggio cinematografico per la riproduzione guidata, flusso in prima persona per la prospettiva dall'interno dello stack e un costruttore di scenari per flussi personalizzati.

05

FlowTrace Lab (sperimentale)

Un concept di sandbox esplorativa in cui i singoli livelli possono essere ispezionati, attivati/disattivati o fatti fallire, per vedere come reagisce il resto dello stack.

06

Costruito per imparare

Progettato per sviluppatori, studenti e bootcamp - l'obiettivo è l'intuizione di come viaggia davvero una richiesta reale, non una demo di marketing.

Privacy e sicurezza

I tuoi dati restano sul tuo dispositivo. Sempre.

Finalità didattica Funziona nel browser Nessun dato personale raccolto Roadmap onesta WCAG 2.1 AA