FlowTrace
FlowTrace - vizualizácia toho, čo sa deje za kliknutím
Vzdelávacia vizualizácia celého toku webovej požiadavky a vykreslenia.
Webová aplikácia Online
O projekte
FlowTrace je experimentálna vzdelávacia webová aplikácia, ktorá vizualizuje, čo sa naozaj deje za bežnými akciami používateľa: kliknutie, stlačenie klávesu, odoslanie formulára, posúvanie. Sleduje cestu požiadavky a vykreslenia naprieč celým webovým stackom - slučka udalostí prehliadača, DOM, runtime JavaScriptu, DNS, TLS, CDN, brána, server, vyrovnávacia pamäť, fronta, databáza, odpoveď a vykreslenie - a premieňa každú vrstvu na niečo, čo vývojár alebo študent môže vidieť a prejsť krok za krokom.
Projekt skúma niekoľko interaktívnych režimov vrátane súhrnného systémového pohľadu, filmovej cesty po ceste požiadavky, prietoku stackom z pohľadu prvej osoby a tvorcu scenárov pre vlastné prietoky, popri koncepte FlowTrace Lab pre praktické experimentovanie.
Kľúčové funkcie
Spúšťače kliknutie, klávesa, odoslanie, posúvanie
FlowTrace začína konkrétnou akciou používateľa a sleduje, čo sa deje ďalej, namiesto abstraktného vysvetľovania webového stacku.
Sledovanie celého stacku - od prehliadača po vykreslenie
Každá vizualizácia prechádza rovnakú cestu: slučka udalostí prehliadača, DOM, runtime JS, DNS, TLS, CDN, brána, server, vyrovnávacia pamäť, fronta, databáza, odpoveď a späť k vykresleniu.
Simulácia systémového prietoku v 3D
Interaktívna 3D scéna ukazuje požiadavky pohybujúce sa stackom v reálnom čase, takže poradie, rozvetvenie a úzke miesta sú viditeľné na prvý pohľad.
Viaceré režimy zobrazenia
Systémový pohľad pre celkový obraz, filmová cesta pre vedené prehrávanie, prietok z pohľadu prvej osoby pre pohľad na stack zvnútra a tvorca scenárov pre vlastné prietoky.
FlowTrace Lab (experimentálne)
Prieskumný koncept pieskoviska, kde sa jednotlivé vrstvy dajú preskúmať, prepnúť alebo nechať zlyhať, aby ste videli, ako zareaguje zvyšok stacku.
Vytvorené pre učenie
Navrhnuté pre vývojárov, študentov a bootcampy - cieľom je intuícia o tom, ako sa skutočná požiadavka pohybuje, nie marketingové demo.
Spúšťače kliknutie, klávesa, odoslanie, posúvanie
FlowTrace začína konkrétnou akciou používateľa a sleduje, čo sa deje ďalej, namiesto abstraktného vysvetľovania webového stacku.
Sledovanie celého stacku - od prehliadača po vykreslenie
Každá vizualizácia prechádza rovnakú cestu: slučka udalostí prehliadača, DOM, runtime JS, DNS, TLS, CDN, brána, server, vyrovnávacia pamäť, fronta, databáza, odpoveď a späť k vykresleniu.
Simulácia systémového prietoku v 3D
Interaktívna 3D scéna ukazuje požiadavky pohybujúce sa stackom v reálnom čase, takže poradie, rozvetvenie a úzke miesta sú viditeľné na prvý pohľad.
Viaceré režimy zobrazenia
Systémový pohľad pre celkový obraz, filmová cesta pre vedené prehrávanie, prietok z pohľadu prvej osoby pre pohľad na stack zvnútra a tvorca scenárov pre vlastné prietoky.
FlowTrace Lab (experimentálne)
Prieskumný koncept pieskoviska, kde sa jednotlivé vrstvy dajú preskúmať, prepnúť alebo nechať zlyhať, aby ste videli, ako zareaguje zvyšok stacku.
Vytvorené pre učenie
Navrhnuté pre vývojárov, študentov a bootcampy - cieľom je intuícia o tom, ako sa skutočná požiadavka pohybuje, nie marketingové demo.
Súkromie a bezpečnosť
Vaše údaje zostávajú vo vašom zariadení. Vždy.
