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.
FlowTrace
Visualiseren wat er gebeurt achter een klik
Educatieve visualisatie van de volledige flow van webaanvraag en weergave.
Webapplicatie
Live
Officiële productpagina
Publisher:
POLPROG
Officiële productpagina
13
Gevisualiseerde stacklagen
4
Triggertypes
4
Interactiemodi (gepland)
0
Tracking / accounts
01 / FlowTrace
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.
02 / Belangrijkste functies
Belangrijkste functies
De belangrijkste mogelijkheden praktisch uitgelegd.
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.
03 / Download
Toegang tot het product
Een duidelijk pad van de officiële bron naar je eerste geslaagde workflow.
Kies het juiste platform
Gebruik een van de officiële links voor je apparaat of browser.
Installeer of open
Volg de instructies van de store of open de webapplicatie. Geen installatieprogramma's van derden.
Configureer en begin
Bekijk de opties, kies je voorkeuren en begin met de belangrijkste workflow.
Officiële toegangsopties
04 / Technologie
Technologie achter het product
Een transparant overzicht van de kerntechnologieën waarmee dit product wordt gebouwd en onderhouden.
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Docker
05 / Beveiliging
Privacy & beveiliging
Je gegevens blijven op je apparaat. Altijd.