Главная › Frontend

Frontend

Frontend на React и TypeScript: this и event loop, события DOM, рендер и анимации, компоненты и состояние, загрузка данных, формы, роутинг, сборка и качество.

Why it matters for UCP. Frontend is the second specialization of the product engineer: for one person to get a product all the way to the user, they also need the part the user sees. The stack is React + TypeScript. Backend patterns (UseCase, aggregates, CQRS) don't stretch onto it — frontend has concerns of its own.

The section is split into 20 articles. You can read them in order (platform → foundation → data and state → navigation and view → quality) or pick topics as needed.

JavaScript and the browser

  1. this: the call context — the four rules, arrow functions, losing this in callbacks.
  2. The event loop: how it works and where it bites — macro- and microtasks, execution order, long tasks.
  3. DOM events — bubbling and capturing, delegation, passive listeners.
  4. The critical rendering path — from HTML bytes to pixels: what blocks and what's expensive.
  5. Error handling in JS and the browser — try/catch, unhandledrejection, global handlers, monitoring.
  6. Animations: CSS and optimizations — transform/opacity, will-change, 60fps.
  7. Frontend bundling — Vite and webpack, code splitting, tree shaking.

Foundation

  1. Project structure and the component model — layout, the component as a unit, typing.
  2. Components: structure and composition — boundaries, composition, props vs state.
  3. TypeScript in React — typing props, generics, discriminated unions, events and refs.
  4. Hooks: custom hooks and useEffect traps — extracting logic, the rules of hooks, when useEffect isn't needed.
  5. Architecture boundaries — the import rule enforced by the linter, the public entry point of a slice, dead code.

Data and state

  1. State: local and server — useState/useReducer/context, when you need a store.
  2. Data fetching: TanStack Query — cache, invalidation, mutations.
  3. A client from OpenAPI — types, hooks, and mocks out of the API description.
  4. Error handling and Suspense — error boundaries, error states, graceful degradation.
  5. Forms: react-hook-form and zod — validation, consistency with the backend contract.
  6. State in the address bar — filters and pages in the URL, what goes to the store and what stays in the address.
  1. Routing: React Router — routes, nesting, protected routes.
  2. Styling and design tokens — the approaches and their cost, tokens.
  3. Next.js: server rendering — SSR, server components, Server Actions.
  4. Static sites and MDX — building ahead of time, content in files, checks at build time.

Quality and performance

  1. Accessibility (a11y) — semantics, keyboard, ARIA.
  2. Rendering performance — memoization where it counts, code-splitting, bundle size.
  3. Testing: Vitest and Testing Library — behavior, not implementation.
  4. Environment and secrets — why there are no secrets in the browser, and how to validate settings with a schema.

Next: mobile development for the product engineer — the /mobile/ section: the same React + TypeScript packaged into native shells (web-first).