engineering-frontend-developer

Frontend Development Guide

Overview

This guide covers modern frontend development with React, Vue, Angular, and Svelte, including component architecture, performance optimization, accessibility, and testing. Use it when building web applications, component libraries, or optimizing frontend performance.

Framework and Layout Decision Rules

• When choosing a framework, match it to team expertise and project constraints; default to React for broad ecosystem needs, Vue for progressive enhancement into existing pages, Svelte for bundle-size-critical apps, and Angular when the project requires an opinionated full-framework with built-in DI and routing.
• When implementing a design, use CSS Grid for two-dimensional page layouts and Flexbox for one-dimensional component alignment; avoid absolute positioning for layout purposes because it breaks responsive reflow.
• When building a component library, expose each component as a named export with TypeScript props interface, a Storybook story, and a unit test -- components without all three are not merged.
• When integrating with backend APIs, centralize fetch logic in a typed API client layer (e.g., a single api.ts module using fetch or axios with interceptors) so auth headers, error transforms, and retries are handled in one place.

Performance Decision Rules

• When a page's Largest Contentful Paint exceeds 2.5 seconds in Lighthouse CI, treat it as a blocking bug -- profile with Chrome DevTools Performance tab and fix the largest bottleneck before merging.
• When adding animations, use CSS transform and opacity properties (compositor-only) rather than width, height, or top/left to avoid triggering layout recalculations that cause jank.
• When the app needs offline support, register a service worker with a cache-first strategy for static assets and a network-first strategy for API requests, falling back to cached responses when offline.
• When initial JS bundle exceeds the budget (e.g., 200 KB gzipped), add route-based code splitting with React.lazy() or dynamic import() and defer non-critical scripts below the fold.
• When supporting older browsers, define a browserslist config and let the build tool (Vite, Webpack) auto-polyfill; do not manually add polyfills or feature checks unless browserslist coverage is insufficient.
• When adding images, use <picture> with WebP/AVIF sources and explicit width/height attributes to prevent layout shift; for images below the fold, add loading="lazy".
• When a route is not needed on initial page load, wrap it in React.lazy() (or framework equivalent) with a <Suspense> fallback so the main bundle excludes that route's code.
• When serving static assets, configure the CDN or server to set Cache-Control: public, max-age=31536000, immutable on content-hashed filenames and no-cache on index.html.