Frontend
wpisy (44)
- Testowanie przez warstwy: od kodu do infrastruktury5/9
E2E tests i visual regression tests: pełna ścieżka użytkownika
E2E test przechodzi przez system tak, jak robi to użytkownik, a visual regression test pilnuje wyglądu. Są mocne, ale drogie, więc powinny chronić…
- seria · 9 części
Warstwy HTTP w przeglądarce: od fetch() do QUIC
Dwie linie z fetch() zakrywają kilka warstw: browser API, semantykę HTTP, wire protocol i transport. Seria rozdziela je tak, żeby Network panel dał się czytać.
- Frontend Rendering: od server-side pages do hybrydowego renderowania16/17
Server Components: nie cały kod UI musi trafić do browsera
Granica renderowania przestaje przebiegać przez stronę, a zaczyna przez graf modułów. Część komponentów nigdy nie ma implementacji po stronie klienta.
- Realtime w przeglądarce: od pollingu do WebTransport7/7
Polling, Streaming, SSE, WebSocket czy WebTransport?
Wybór wynika z modelu ruchu: świeżości danych, kierunku, częstotliwości, kolejności i niezawodności. Najprostszy poprawny mechanizm zwykle wygrywa.
- Realtime w przeglądarce: od pollingu do WebTransport6/7
WebTransport: streams i datagramy dla realtime nad HTTP/3
HTTP/3 i QUIC dają jednej sesji wiele niezależnych streamów oraz datagramy. Nie każde dane muszą dotrzeć niezawodnie i w kolejności.
- Frontend Rendering: od server-side pages do hybrydowego renderowania15/17
Resumability: zamiast hydratować, wznów wykonanie
Serwer zapisuje dość informacji, żeby klient nie musiał odtwarzać drzewa komponentów. Kod ładuje się dlatego, że wykonanie stało się potrzebne.
- Realtime w przeglądarce: od pollingu do WebTransport5/7
WebSockets: trwały kanał komunikacji w obu kierunkach
Po handshake nie ma już requestów i odpowiedzi, tylko frames. Trwałe połączenie jest stanem, który dotyka load balancera, deployu i fan-outu między instancjami.
- Testowanie przez warstwy: od kodu do infrastruktury2/9
Component tests i snapshot tests: mały fragment aplikacji
Component test sprawdza mały fragment aplikacji jako zachowanie, a snapshot test zapisuje jego output. Oba są blisko kodu, ale odpowiadają na inne pytania.
- Realtime w przeglądarce: od pollingu do WebTransport4/7
Server-Sent Events: protokół zdarzeń nad HTTP streamingiem
Standardowy format zdarzeń i reconnect nad strumieniem HTTP. Last-Event-ID daje wznowienie, ale trwałości eventów w systemie już nie załatwia.
- Realtime w przeglądarce: od pollingu do WebTransport3/7
HTTP Streaming: jedna odpowiedź, wiele fragmentów danych
Odpowiedź może powstawać w czasie. Chunk transportowy nie jest wiadomością, więc framing i backpressure stają się sprawą aplikacji.