Skip to main content

The Frontend Landscape: Everything a Developer Should Have on Their Radar

· 8 min read
Pere Pages
Pere Pages
Software Engineer
A map of the modern frontend ecosystem

A field guide to the modern frontend ecosystem — the frameworks, tools, standards, and patterns worth knowing about, so you can tell the durable signal from the passing noise.

The frontend field has a habit of expanding faster than any one person can keep up with. You don't need to master all of it — but knowing that a topic exists, and roughly what problem it solves, is what lets you reach for the right thing when you need it. This is a map, not a manual: a brief tour of the areas worth being aware of, without diving into any of them.

The web platform itself​

  • Semantic HTML — Using the right element for the job. It's the foundation of accessibility, search-engine optimization (SEO), and resilient markup, and it's still routinely underused.
  • Modern JavaScript — ES modules, async/await, optional chaining, and the newer additions to the language. Knowing what the platform gives you natively before reaching for a library.
  • TypeScript — Static typing on top of JS. Now the default expectation for serious projects, less a "should I?" and more a "how well am I using it?".
  • The DOM and browser rendering — How the browser parses, styles, lays out, and paints the Document Object Model (DOM). Understanding it demystifies most performance and layout problems.

Modern CSS​

  • Layout systems — Flexbox and Grid are table stakes; subgrid is the newer piece that finally solves nested alignment.
  • Container queries — Styling based on a component's own size rather than the viewport. A genuine shift in how reusable components are built.
  • :has(), nesting, and cascade layers — The parent selector, native nesting, and @layer for controlling specificity give CSS real structural power without preprocessors.
  • Custom properties (CSS variables) — The backbone of theming, design tokens, and runtime-dynamic styling.
  • Fluid and responsive techniques — clamp(), fluid typography, logical properties, and mobile-first thinking.

Frameworks and meta-frameworks​

  • Component frameworks — React, Vue, Svelte, Angular, Solid, Qwik. Different trade-offs around reactivity, bundle size, and mental model.
  • Meta-frameworks — Next.js, Nuxt, SvelteKit, Astro, Remix/React Router. They wrap a component framework with routing, data loading, and rendering strategy.
  • React Server Components — The line between server and client is blurring; understanding what runs where is increasingly central.
  • Islands architecture — Shipping interactivity only where needed (Astro's model), keeping most of the page as static HTML.

Rendering strategies​

  • CSR / SSR / SSG / ISR — Client-side, server-side, static generation, and incremental regeneration. Each is a different answer to when and where does HTML get produced.
  • Streaming and partial hydration — Sending HTML progressively and hydrating only interactive parts, rather than blocking on the whole page.
  • Resumability — Qwik's approach of skipping hydration entirely by serializing app state. Worth knowing as a contrasting philosophy.

Build tools and developer experience (DX)​

  • Vite — The current default dev server and bundler for most new projects, built on esbuild and Rollup.
  • The bundler landscape — esbuild, Rollup, Turbopack, swc, and legacy webpack. You rarely configure these by hand anymore, but knowing what they do helps when things break.
  • Linting and formatting — ESLint and Prettier, plus newer all-in-one tooling like Biome that folds both into a single fast binary.
  • Package managers — npm, pnpm, yarn, and bun, differing mainly in speed and disk efficiency. pnpm's content-addressable store is a common pick.
  • Monorepos — Turborepo, Nx, and workspace features for managing multiple packages with shared tooling and caching.

Styling approaches​

  • CSS Modules and Sass — Scoped styles and preprocessor conveniences; still a solid, framework-agnostic baseline.
  • Utility-first CSS — Tailwind and its ecosystem. Divisive, dominant, and worth understanding even if you don't adopt it.
  • CSS-in-JS and zero-runtime alternatives — Styled-components-style libraries versus build-time approaches like vanilla-extract that avoid runtime cost.
  • Design tokens — Naming and centralizing design decisions so they flow from design tools into code.

State and data​

  • Client state — Local state, context, and dedicated libraries like Zustand, Jotai, and Redux. Knowing when you actually need a store.
  • Server state — TanStack Query and similar tools that treat remote data as a cache to sync, not state to own. A distinction that clears up a lot of confusion.
  • URL as state — Search params and routing as a legitimate, shareable place to keep UI state.
  • API styles — REST, GraphQL, tRPC, plus server-sent events (SSE) and WebSockets for real-time. Each shapes how the frontend fetches and types its data.
  • Forms and validation — Form libraries (React Hook Form, TanStack Form) and schema validation (Zod) for typed, resilient input handling.

Testing​

  • Unit and component testing — Vitest and Jest for logic; Testing Library for behavior-focused component tests.
  • End-to-end testing — Playwright and Cypress driving a real browser through real user flows.
  • Visual regression and accessibility testing — Catching unintended UI changes and automating accessibility (a11y) checks in continuous integration (CI).
  • Testing philosophy — Integration-leaning tests, avoiding over-mocking, and testing behavior rather than implementation.

Performance​

  • Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) as the industry's shared performance vocabulary, and what Google measures.
  • Bundle discipline — Code splitting, lazy loading, tree shaking, and just being aware of what you ship.
  • Asset optimization — Modern image formats, responsive images, font loading strategies, and caching.
  • Runtime performance — Avoiding unnecessary re-renders, virtualizing long lists, and offloading work to Web Workers.

Accessibility​

  • WCAG and ARIA — The Web Content Accessibility Guidelines (WCAG) standards and the Accessible Rich Internet Applications (ARIA) attributes. Knowing that ARIA is a last resort after semantic HTML, not a first reach.
  • Keyboard and screen-reader support — Focus management, tab order, and testing with the tools real users use.
  • Inclusive design — Color contrast, reduced-motion preferences, and not assuming one mode of interaction.

Security​

  • Common vulnerabilities — Cross-site scripting (XSS), cross-site request forgery (CSRF), clickjacking, and open redirects, and the frontend's role in preventing them.
  • CSP, CORS, and headers — Content Security Policy (CSP) and cross-origin resource sharing (CORS) rules that shape what your app is allowed to do.
  • Authentication patterns — Sessions, JSON Web Tokens (JWTs), OAuth/OpenID Connect (OIDC), and where tokens should and shouldn't live.
  • Supply-chain awareness — Dependencies are attack surface; lockfiles, audits, and minimizing what you pull in matter.

Platform capabilities​

  • Web APIs worth knowing — Fetch, IndexedDB, Web Workers, WebSockets, WebRTC, and the Web Components standard.
  • View Transitions API — Native animated transitions between states and pages, replacing a lot of custom animation code.
  • Progressive Web Apps — Service workers, offline support, and installability for app-like web experiences.
  • WebAssembly — Running near-native code in the browser; relevant for compute-heavy features and cross-language reuse.

Discoverability and reach​

  • SEO fundamentals — Meta tags, structured data, sitemaps, and why rendering strategy affects crawlability.
  • Internationalization (i18n) — Translations, locale-aware formatting, pluralization, and right-to-left (RTL) layouts.
  • Progressive enhancement and compatibility — The Baseline initiative and tools like caniuse for knowing what's safe to use.

Design and collaboration​

  • Design systems — Shared component libraries, tokens, and documentation that keep teams consistent at scale.
  • Storybook and component workshops — Developing and documenting components in isolation.
  • Working with design tools — Figma handoff, design tokens as the bridge, and closing the gap between design and code.

Workflow and delivery​

  • Git and branching strategies — Beyond basics: trunk-based development, promotion patterns, hotfix flows, and clean history.
  • Code review culture — Pull/merge requests, conventional commits, and practices like pair or mob review.
  • CI/CD — Continuous integration and continuous delivery: GitHub Actions and GitLab CI for automating tests, builds, and checks on every change.
  • Containers and deployment — Docker for reproducible environments, and platforms like Vercel, Netlify, and Cloudflare with preview deployments per branch.
  • Edge and serverless — Running code closer to users via edge functions and serverless platforms.

Observability​

  • Error tracking and monitoring — Sentry and similar tools for catching what breaks in production.
  • Real user monitoring and analytics — Understanding actual performance and behavior in the field, not just in your lab.
  • The observability mindset — Instrumenting to answer questions you haven't thought to ask yet, rather than just watching known metrics.

AI-assisted development​

  • AI coding tools — Copilot, Claude Code, Cursor, and agentic workflows are now a standard part of the toolchain. Knowing how to use them well — and where to distrust them — is its own skill.
  • Building with AI — Integrating large language models (LLMs) into products, and the UX patterns (streaming, tool use, guardrails) that come with it.

Architecture and principles​

  • Component and project structure — Feature-based organization, separation of concerns, and keeping code modular and maintainable.
  • Engineering principles — SOLID, DRY, and knowing when a pattern helps versus when it's overkill.
  • Micro-frontends and module federation — Splitting large apps across teams; powerful, but with real coordination costs.

Staying sane​

Perhaps the most important meta-skill: you cannot learn all of this, and you don't have to. The field rewards understanding the why behind tools over memorizing the tools themselves — because the tools rotate, but the underlying problems (performance, accessibility, state, maintainability) are remarkably stable. Pick depth where your work demands it, keep a shallow awareness of the rest, and revisit the map when the ground shifts.