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.
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
Oficiálna stránka produktu
Vydavateľ:
POLPROG
Oficiálna stránka produktu
13
Vizualizovaných vrstiev stacku
4
Typov spúšťačov
4
Interaktívnych režimov (plánované)
0
Sledovanie / účty
01 / FlowTrace
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.
02 / Kľúčové funkcie
Kľúčové funkcie
Najdôležitejšie možnosti vysvetlené prakticky.
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.
03 / Stiahnuť
Prístup k produktu
Jasná cesta od oficiálneho zdroja k prvému úspešnému použitiu.
Vyberte správnu platformu
Použite jeden z oficiálnych odkazov pre svoje zariadenie alebo prehliadač.
Nainštalujte alebo otvorte
Postupujte podľa pokynov obchodu alebo otvorte webovú aplikáciu. Bez inštalátorov tretích strán.
Nastavte a začnite
Prejdite možnosti, vyberte predvoľby a začnite hlavným pracovným postupom.
Oficiálne možnosti prístupu
04 / Technológia
Technológia produktu
Transparentný prehľad hlavných technológií použitých na vývoj a údržbu produktu.
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Docker
05 / Bezpečnosť
Súkromie a bezpečnosť
Vaše údaje zostávajú vo vašom zariadení. Vždy.