English

Українська

English

Українська

Appearance

#006 — React ViewTransition + PWA in the Web ​

Stream #006

Date: June 19, 2026 | 19:00 London / 21:00 Kyiv
Format: Two talks · ~60 min
Guest: Oleksandr Blazheiko
YouTube: https://youtube.com/live/RJ9xqAfUl6M

Participants ​

Oleh Levchenko — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community

Oleksandr Blazheiko — Software Development Engineer · Fullstack, 7+ years of experience
Ukraine
LinkedIn · itvibe.party

Building itvibe.party — a platform combining chat, a real-time AI translator, and a personal AI teacher. Third stream in a row — this time exploring what PWA can do in the modern web.

Key Takeaways ​

Talk 1 — React ViewTransition · Oleh Levchenko ​

  • Browser document.startViewTransition() has existed since 2022 (Chrome 111) — React <ViewTransition> handles all the complexity: sets view-transition-name automatically, calls the API, batches multiple parallel setState calls into one animation
  • Pitfall #1 — tree order: <ViewTransition> must be the outermost element; wrapping it in a <div> disables Enter/Exit animation — React sees the div appearing, not the ViewTransition
  • Shared Element: same name in two different places of the tree → React recognises "the same" element and animates the "flight" between positions; name uniqueness is required — dev mode warns on collision
  • List Reorder: use key, not name — name is for shared elements between different trees; key is for elements moving within the same list
  • useEffect fires only after the animation completes — guarantees no side effects during the transition
  • CSS: enter="slide-in" → ::view-transition-new(.slide-in) — full animation control; JS: onEnter callback via Web Animations API with mandatory cleanup (return () => anim.cancel())
  • Suspense + ViewTransition: fallback → content transition gets cross-fade automatically with no extra code
  • React Router: viewTransition prop on <Link> — page transition animations with no extra code
  • Canary only (react@canary), DOM only; prefers-reduced-motion — not an option, it's hygiene

Talk 2 — PWA in the Web · Oleksandr Blazheiko ​

  • PWA = HTML/CSS/JS that behaves like a native app: installable on device, works offline, receives push notifications — no app store required
  • Three mandatory pillars: Service Worker (intercepts network requests, caches, offline), Web App Manifest (JSON metadata for installation), HTTPS (without it SW and most APIs are disabled)
  • Service Worker lifecycle: install (pre-cache resources) → activate (clean stale caches) → fetch (cache-first strategy: serve from cache, fall back to network)
  • manifest.json: display: standalone removes the address bar; start_url defines the entry point; icons with purpose: "any maskable" for adaptive icons across all platforms
  • Business benefits: one codebase instead of iOS + Android + Web; ~70% fewer bounces due to fast startup; updates without app store review
  • PWA vs Native: installation and offline are there, hardware access is partial — but development cost and update time are incomparably lower
  • whatpwacando.today — interactive showcase, itself a PWA; shows live which APIs your browser supports: camera, geolocation, Bluetooth, NFC, contacts, WebAuthn, push
  • Project Fugu — Google/Microsoft/Intel initiative to close the gap between web and native: File System Access, Web Bluetooth, WebUSB, Web Serial, Web HID, Web NFC, Badging API and dozens more
  • itvibe.party — Oleksandr's own project with PWA capabilities: chat + real-time AI translator + personal AI teacher

Timecodes ​

To be added after the stream.

Resources ​

IT Friday · @zloyleva