FlowTrace
FlowTrace - Visualiseren wat er gebeurt achter een klik
Educatieve visualisatie van de volledige flow van webaanvraag en weergave.
Webapplicatie Live
Over
FlowTrace is een experimentele educatieve webapplicatie die visualiseert wat er werkelijk gebeurt achter veelvoorkomende gebruikersacties: een klik, een toetsaanslag, het verzenden van een formulier, een scroll. Het volgt het pad van aanvraag en weergave over de volledige webstack - browser event loop, DOM, JavaScript-runtime, DNS, TLS, CDN, gateway, server, cache, queue, database, response en render - en maakt van elke laag iets dat een ontwikkelaar of student kan zien en stap voor stap kan doorlopen.
Het project verkent verschillende interactieve modi, waaronder een high-level systeemweergave, een cinematische reis langs het aanvraagpad, een first-person flow door de stack en een scenariobouwer voor aangepaste flows, naast een concept FlowTrace Lab voor praktisch experimenteren.
Belangrijkste functies
Triggers voor klik, toetsaanslag, verzenden en scroll
FlowTrace begint bij een concrete gebruikersactie en volgt wat er daarna gebeurt, in plaats van de webstack abstract uit te leggen.
Volledige stacktrace - browser tot weergave
Elke visualisatie loopt hetzelfde pad: browser event loop, DOM, JS-runtime, DNS, TLS, CDN, gateway, server, cache, queue, database, response en terug naar de weergave.
3D-simulatie van systeemflow
Een interactieve 3D-scène toont aanvragen die in realtime door de stack bewegen, zodat de volgorde, fan-out en bottlenecks in één oogopslag zichtbaar zijn.
Meerdere weergavemodi
Systeemweergave voor het grote geheel, cinematische reis voor begeleide weergave, first-person flow voor het perspectief vanuit de stack, en een scenariobouwer voor aangepaste flows.
FlowTrace Lab (experimenteel)
Een verkennend concept van een sandbox waarin afzonderlijke lagen kunnen worden geïnspecteerd, in- of uitgeschakeld of laten falen, om te zien hoe de rest van de stack reageert.
Gebouwd om te leren
Ontworpen voor ontwikkelaars, studenten en bootcamps - het doel is intuïtie over hoe een echte aanvraag reist, niet een marketingdemo.
Triggers voor klik, toetsaanslag, verzenden en scroll
FlowTrace begint bij een concrete gebruikersactie en volgt wat er daarna gebeurt, in plaats van de webstack abstract uit te leggen.
Volledige stacktrace - browser tot weergave
Elke visualisatie loopt hetzelfde pad: browser event loop, DOM, JS-runtime, DNS, TLS, CDN, gateway, server, cache, queue, database, response en terug naar de weergave.
3D-simulatie van systeemflow
Een interactieve 3D-scène toont aanvragen die in realtime door de stack bewegen, zodat de volgorde, fan-out en bottlenecks in één oogopslag zichtbaar zijn.
Meerdere weergavemodi
Systeemweergave voor het grote geheel, cinematische reis voor begeleide weergave, first-person flow voor het perspectief vanuit de stack, en een scenariobouwer voor aangepaste flows.
FlowTrace Lab (experimenteel)
Een verkennend concept van een sandbox waarin afzonderlijke lagen kunnen worden geïnspecteerd, in- of uitgeschakeld of laten falen, om te zien hoe de rest van de stack reageert.
Gebouwd om te leren
Ontworpen voor ontwikkelaars, studenten en bootcamps - het doel is intuïtie over hoe een echte aanvraag reist, niet een marketingdemo.
Privacy & beveiliging
Je gegevens blijven op je apparaat. Altijd.
