Contemporary Web Development (2020s)
Learning Objectives
- You know of some of the trends in web development from the 2020s.
- You understand the evolution of API design beyond REST with GraphQL.
- You are familiar with the emergence of edge computing and serverless architectures.
- You recognize the continued emphasis on performance optimization and developer experience.
As we’ve observed, web development has evolved significantly over the years. The 2020s has built directly on the previous decade, with component-driven development continuing as the dominant approach for building client-side functionality and RESTful APIs remaining widely used on the server side. However, this decade has brought renewed focus on performance, developer experience, and finding the right balance between interactivity and efficiency.
Developers increasingly question the JavaScript-heavy approaches of the previous decade, seeking ways to deliver rich experiences with less overhead. Meanwhile, tooling has improved, making it easier to build complex applications.
API Design Evolution: Beyond REST
GraphQL Comes of Age
While RESTful APIs are still prevalent, GraphQL has gained plenty of traction in the 2020s as an alternative to API design. GraphQL is a query language and runtime for APIs that allows clients to request the data they need.
This is unlike REST, where multiple endpoints might be required to gather related data.
For example, instead of making separate REST calls to fetch a user’s profile, their posts, and comments, a GraphQL query could retrieve all this data in one request:
{
user(id: "123") {
name
email
posts {
title
comments {
text
author
}
}
}
}Under the hood, the GraphQL server processes the query, resolves the requested fields, and returns a JSON response containing only the specified data. However, this approach also introduces challenges around caching, query optimization, and the potential for clients to construct expensive queries.
The Performance Revolution
Rethinking JavaScript Delivery
The 2020s has seen renewed focus on reducing the amount of JavaScript shipped to clients, driven by performance concerns and the recognition that excessive JavaScript is a primary bottleneck for web performance, particularly on mobile devices and in regions with slower internet connections.
This trend manifested in several ways. Frameworks like Qwik have advocated for “resumability” — the ability to continue application execution on the client without replaying all the application logic that is already executed on the server. This approach aims for zero JavaScript execution on initial load, with code loaded on-demand when users interact with specific features.
Similarly, Astro has popularized “islands architecture,” where most of the page is static HTML with small, isolated islands of interactivity. Only these interactive components ship JavaScript to the client, while the rest of the page remains static. This architectural pattern can significantly reduced bundle sizes while maintaining rich interactivity where needed.
WebAssembly and Language Diversity
WebAssembly (Wasm), standardized in 2017, has gained some popularity as a compilation target for bringing high-performance applications to the web. WebAssembly is a binary instruction format that runs in web browsers, allowing languages like C, C++, Rust, and Go to run in the browser alongside JavaScript.
This has opened new possibilities for web applications, particularly in areas requiring intensive computation such as video editing, gaming, scientific simulations, and image processing.
WebAssembly has also enabled code reuse across platforms — the same core logic could run in browsers, on servers, and in edge computing environments.
Standardized Performance Metrics
Performance measurement has become more standardized with Google’s introduction of Core Web Vitals in 2020. These metrics — Largest Contentful Paint (LCP), First Input Delay (FID, later replaced by Interaction to Next Paint or INP), and Cumulative Layout Shift (CLS) — provide quantifiable targets for web performance.
This standardization of performance metrics has pushed developers towards performance-conscious development practices. Frameworks have began optimizing for these metrics by default, and tools that help developers measure and improve their scores have emerged. The emphasis on measurable performance outcomes represented a shift from purely subjective user experience considerations to data-driven optimization.
As an example, Google’s developer tools in Chrome DevTools and Lighthouse include Core Web Vitals reporting, making it easier for developers to identify performance bottlenecks and track improvements over time.
Developer Experience and Tooling
Meta-Frameworks and Full-Stack Solutions
The complexity of configuring build tools, routing, data fetching, and deployment led to the rise of meta-frameworks — opinionated frameworks built on top of component libraries that provide comprehensive solutions for building modern web applications.
Next.js, built on React, evolved significantly in the 2020s, introducing features like incremental static regeneration, automatic image optimization, and React Server Components. SvelteKit, Remix, Nuxt 3, and Astro have also emerged as popular frameworks, each with different philosophies about rendering strategies, data loading, and developer experience.
These meta-frameworks have blurred the lines between frontend and backend development. They provide integrated solutions for server-side rendering, static site generation, API routes, and even database access, enabling developers to build full-stack applications within a single framework. This simplifies deployment and reduced the complexity of coordinating separate frontend and backend codebases.
Astro, in particular, has introduced flexibility by allowing developers to use components from multiple frameworks (React, Vue, Svelte) within the same project. This framework-agnostic approach acknowledged that different problems might be best solved with different tools, even within a single application.
Modern Build Tools
The 2020s has also brought a new generation of build tools focused on speed and developer experience. Vite (2020), created uses native ES modules in the browser during development and esbuild for production builds, significantly reducing build times compared to earlier tools like Webpack.
esbuild, written in Go has demonstrated how tools written in systems languages can outperform JavaScript-based equivalents.
Similarly, Parcel, Snowpack, and Turbopack focus on faster development cycles and zero-config experiences.
Styling and Design Evolution
CSS Advances
CSS continued evolving with features that addressed long-standing pain points. New CSS features like Container Queries help create modular components that could adapt to their container rather than the viewport, making responsive design more intuitive. Similarly, features like CSS Cascade Layers provide better control over style specificity and organization.
Styling Approaches
Utility-first CSS frameworks, particularly Tailwind CSS, have gained massive popularity by providing pre-defined utility classes rather than semantic component classes. This approach initially sparked debate, but found widespread adoption due to its consistency, reduced CSS bundle sizes (when properly configured), and rapid development speed.
Accessibility and Inclusive Design
Accessibility has also become increasingly prioritized in the 2020s, driven by legal requirements, ethical considerations, and growing awareness that accessible design benefits everyone. The Web Content Accessibility Guidelines (WCAG) 2.1 has become the baseline for accessible web development, with many regions adopting it as legal requirements.
Modern frameworks improved their accessibility defaults, and tools emerged to help developers identify and fix accessibility issues.
The focus has expanded beyond basic compliance to inclusive design — creating experiences that work well for users with diverse abilities, devices, connection speeds, and contexts. This included considerations around cognitive accessibility, motion sensitivity, and multi-modal interaction patterns.
Summary
In summary:
- RESTful APIs are still widely used, but GraphQL has gained traction as an alternative for more flexible data fetching.
- Significant efforts to reduce JavaScript delivery have emerged, with frameworks like Qwik and Astro leading the way.
- WebAssembly has enabled high-performance web applications and language diversity in the browser.
- Core Web Vitals standardized performance metrics, driving data-driven optimization efforts.
- Meta-frameworks like Next.js, SvelteKit, and Astro have simplified full-stack development.
- Modern build tools like Vite and esbuild have dramatically improved developer experience.
- CSS has evolved with features like Container Queries, and utility-first frameworks like Tailwind CSS have gained popularity.
- Accessibility and inclusive design have become central considerations in web development.