Wyzwalacze: klik, klawisz, submit, scroll
FlowTrace startuje od konkretnej akcji użytkownika i pokazuje, co dzieje się dalej, zamiast tłumaczyć stos w oderwaniu od kodu.
FlowTrace
Co Naprawdę Dzieje Się Za Kliknięciem
Edukacyjna wizualizacja pełnego przepływu żądania i renderu w sieci.
Aplikacja webowa
Online
Oficjalna strona produktu
Wydawca:
POLPROG
Oficjalna strona produktu
13
Wizualizowanych warstw stosu
4
Typów akcji
4
Trybów interakcji (planowane)
0
Trackingu / kont
01 / FlowTrace
O produkcie
FlowTrace to eksperymentalna, edukacyjna aplikacja webowa, która pokazuje, co naprawdę dzieje się za codziennymi akcjami użytkownika: kliknięciem, naciśnięciem klawisza, wysłaniem formularza, scrollowaniem. Trasuje ścieżkę żądania i renderowania przez cały stos webowy - pętlę zdarzeń przeglądarki, DOM, środowisko JavaScript, DNS, TLS, CDN, bramę, serwer, cache, kolejkę, bazę danych, odpowiedź i render - i zamienia każdą warstwę w coś, co programista lub student może zobaczyć i prześledzić krok po kroku.
Projekt eksperymentuje z kilkoma trybami interaktywnymi: widokiem systemowym wysokiego poziomu, kinową podróżą po ścieżce żądania, perspektywą pierwszej osoby przez stos oraz kreatorem scenariuszy dla własnych przepływów, obok koncepcji FlowTrace Lab do nauki przez praktykę.
02 / Kluczowe funkcje
Kluczowe funkcje
Najważniejsze możliwości opisane w praktyczny sposób.
Pełny ślad - od przeglądarki do renderu
Każda wizualizacja idzie tą samą drogą: event loop, DOM, silnik JS, DNS, TLS, CDN, brama, serwer, cache, kolejka, baza, odpowiedź i render.
Symulacja przepływu 3D
Interaktywna scena 3D pokazuje żądania przechodzące przez stos w czasie rzeczywistym - widać kolejność, rozgałęzienia i wąskie gardła.
Wiele trybów oglądania
Widok systemu pokazuje całość, tryb kinowy prowadzi krok po kroku, tryb first-person pokazuje stos od środka, a kreator scenariuszy pozwala zbudować własny przebieg.
FlowTrace Lab (eksperymentalne)
Eksploracyjna piaskownica, w której można podejrzeć, wyłączyć lub zepsuć pojedynczą warstwę i zobaczyć, jak reaguje reszta stosu.
Stworzone do nauki
Zaprojektowane dla programistów, studentów i bootcampów - chodzi o intuicję, jak naprawdę porusza się żądanie, a nie o efektowną demonstrację.
03 / Pobierz
Dostęp do produktu
Prosta droga od oficjalnego źródła do pierwszego udanego użycia.
Wybierz właściwą platformę
Skorzystaj z jednego z oficjalnych odnośników dostępnych dla Twojego urządzenia lub przeglądarki.
Zainstaluj lub otwórz
Postępuj zgodnie z instrukcjami sklepu lub otwórz aplikację internetową. Bez zewnętrznych instalatorów.
Skonfiguruj i zacznij
Sprawdź dostępne opcje, wybierz preferencje i rozpocznij od podstawowego zastosowania.
Oficjalne opcje dostępu
04 / Technologia
Technologia produktu
Przejrzysty opis głównych technologii użytych do budowy i utrzymania produktu.
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Docker
05 / Bezpieczeństwo
Prywatność i bezpieczeństwo
Twoje dane pozostają na Twoim urządzeniu. Zawsze.