Spouštěče: kliknutí, stisk klávesy, odeslání, posunutí
FlowTrace vychází z konkrétní akce uživatele a sleduje, co se děje dál, místo aby vysvětloval webový stack abstraktně.
FlowTrace
Vizualizace toho, co se děje za kliknutím
Vzdělávací vizualizace celého toku webového požadavku a vykreslení.
Webová aplikace
Online
Oficiální stránka produktu
Vydavatel:
POLPROG
Oficiální stránka produktu
13
Vizualizované vrstvy stacku
4
Typy spouštěčů
4
Interaktivní režimy (plánováno)
0
Sledování / účty
01 / FlowTrace
O aplikaci
FlowTrace je experimentální vzdělávací webová aplikace, která vizualizuje, co se skutečně děje za běžnými akcemi uživatele: kliknutí, stisk klávesy, odeslání formuláře, posunutí. Sleduje cestu požadavku a vykreslení napříč celým webovým stackem - smyčka událostí prohlížeče, DOM, běhové prostředí JavaScriptu, DNS, TLS, CDN, brána, server, cache, fronta, databáze, odpověď a vykreslení - a každou vrstvu promění v něco, co vývojář nebo student může vidět a projít krok za krokem.
Projekt zkoumá několik interaktivních režimů, včetně systémového pohledu z výšky, filmové cesty po dráze požadavku, toku z pohledu první osoby skrz stack a tvůrce scénářů pro vlastní toky, vedle konceptu FlowTrace Lab pro praktické experimentování.
02 / Klíčové funkce
Klíčové funkce
Nejdůležitější možnosti vysvětlené prakticky.
Trasování celého stacku - od prohlížeče po vykreslení
Každá vizualizace prochází stejnou cestu: smyčka událostí prohlížeče, DOM, běhové prostředí JS, DNS, TLS, CDN, brána, server, cache, fronta, databáze, odpověď a zpět k vykreslení.
Simulace systémového toku ve 3D
Interaktivní 3D scéna zobrazuje požadavky procházející stackem v reálném čase, takže pořadí, rozvětvení a úzká hrdla jsou viditelná na první pohled.
Více režimů zobrazení
Systémový pohled pro celkový obraz, filmová cesta pro řízené přehrávání, tok z pohledu první osoby pro pohled na stack zevnitř a tvůrce scénářů pro vlastní toky.
FlowTrace Lab (experimentální)
Koncept průzkumného pískoviště, kde lze jednotlivé vrstvy prozkoumat, přepnout nebo nechat selhat, aby bylo vidět, jak zareaguje zbytek stacku.
Vytvořeno pro učení
Navrženo pro vývojáře, studenty a bootcampy - cílem je intuice o tom, jak skutečný požadavek putuje, nikoli marketingové demo.
03 / Stáhnout
Přístup k produktu
Jasná cesta od oficiálního zdroje k prvnímu úspěšnému použití.
Vyberte správnou platformu
Použijte jeden z oficiálních odkazů pro své zařízení nebo prohlížeč.
Nainstalujte nebo otevřete
Postupujte podle pokynů obchodu nebo otevřete webovou aplikaci. Bez instalátorů třetích stran.
Nastavte a začněte
Projděte možnosti, zvolte předvolby a začněte hlavním pracovním postupem.
Oficiální možnosti přístupu
04 / Technologie
Technologie produktu
Transparentní přehled hlavních technologií použitých k vývoji a údržbě produktu.
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Docker
05 / Zabezpečení
Soukromí a bezpečnost
Vaše data zůstávají ve vašem zařízení. Vždy.