FlowTrace
FlowTrace - Visualiser ce qui se passe derrière un clic
Visualisation éducative du flux complet d'une requête et d'un rendu web.
Application web En ligne
À propos
FlowTrace est une application web éducative expérimentale qui visualise ce qui se passe réellement derrière des actions utilisateur courantes : un clic, une frappe, l'envoi d'un formulaire, un défilement. Elle trace le chemin de la requête et du rendu à travers toute la pile web - boucle d'événements du navigateur, DOM, runtime JavaScript, DNS, TLS, CDN, passerelle, serveur, cache, file d'attente, base de données, réponse et rendu - et transforme chaque couche en quelque chose qu'un développeur ou un étudiant peut voir et parcourir pas à pas.
Le projet explore plusieurs modes interactifs, dont une vue système de haut niveau, un voyage cinématographique le long du chemin de la requête, un flux à la première personne à travers la pile et un constructeur de scénarios pour des flux personnalisés, ainsi qu'un concept de FlowTrace Lab pour l'expérimentation pratique.
Fonctionnalités clés
Déclencheurs : clic, frappe, envoi, défilement
FlowTrace part d'une action utilisateur concrète et trace ce qui se passe ensuite, au lieu d'expliquer la pile web de façon abstraite.
Trace complète de la pile - du navigateur au rendu
Chaque visualisation parcourt le même chemin : boucle d'événements du navigateur, DOM, runtime JS, DNS, TLS, CDN, passerelle, serveur, cache, file d'attente, base de données, réponse et retour au rendu.
Simulation 3D du flux système
Une scène 3D interactive montre les requêtes traversant la pile en temps réel afin que l'ordre, la diffusion et les goulots d'étranglement soient visibles d'un coup d'œil.
Plusieurs modes de visualisation
Vue système pour la vue d'ensemble, voyage cinématographique pour une lecture guidée, flux à la première personne pour la perspective de l'intérieur de la pile, et un constructeur de scénarios pour des flux personnalisés.
FlowTrace Lab (expérimental)
Un concept de bac à sable exploratoire où chaque couche peut être inspectée, activée ou mise en échec, pour voir comment le reste de la pile réagit.
Conçu pour l'apprentissage
Conçu pour les développeurs, les étudiants et les bootcamps - l'objectif est l'intuition sur la façon dont une vraie requête voyage, pas une démo marketing.
Déclencheurs : clic, frappe, envoi, défilement
FlowTrace part d'une action utilisateur concrète et trace ce qui se passe ensuite, au lieu d'expliquer la pile web de façon abstraite.
Trace complète de la pile - du navigateur au rendu
Chaque visualisation parcourt le même chemin : boucle d'événements du navigateur, DOM, runtime JS, DNS, TLS, CDN, passerelle, serveur, cache, file d'attente, base de données, réponse et retour au rendu.
Simulation 3D du flux système
Une scène 3D interactive montre les requêtes traversant la pile en temps réel afin que l'ordre, la diffusion et les goulots d'étranglement soient visibles d'un coup d'œil.
Plusieurs modes de visualisation
Vue système pour la vue d'ensemble, voyage cinématographique pour une lecture guidée, flux à la première personne pour la perspective de l'intérieur de la pile, et un constructeur de scénarios pour des flux personnalisés.
FlowTrace Lab (expérimental)
Un concept de bac à sable exploratoire où chaque couche peut être inspectée, activée ou mise en échec, pour voir comment le reste de la pile réagit.
Conçu pour l'apprentissage
Conçu pour les développeurs, les étudiants et les bootcamps - l'objectif est l'intuition sur la façon dont une vraie requête voyage, pas une démo marketing.
Confidentialité et sécurité
Vos données restent sur votre appareil. Toujours.
