Why Chrome is investing in open-source frameworks

Most production websites today are built with open-source tooling rather than fully custom infrastructure, and client-side JavaScript frameworks and UI libraries account for a growing share of that usage. Data on the three most popular options—React, Angular, and Vue—makes the trend clear: 72% of respondents in MDN's web developer survey use at least one of them, and more than 320,000 sites in the top 5 million URLs analyzed by HTTP Archive do as well.

That concentration means improvements to open-source tooling can have an outsized impact on the web as a whole. Chrome engineers have therefore started working directly with framework and library authors, contributing code and funding to projects that fall into two broad categories:

  • UI frameworks (or libraries) like Preact, React, and Vue, which manage an application's view layer through a component model.
  • Web frameworks like Next.js, Nuxt.js, and Gatsby, which provide an end-to-end system with opinionated built-in features such as server-side rendering. These typically use a UI framework for the view layer.

Developers can assemble their own stack from a view layer library, router, styling system, and server renderer, but doing so often amounts to building a framework of their own. Web frameworks handle those concerns by default, which is one reason they've become so popular.

Angular 8: differential loading and a new rendering engine

The Angular team shipped several notable improvements in version 8:

  • Differential loading by default, which minimizes unneeded polyfills for newer browsers.
  • Support for standard dynamic import() syntax for lazy-loading routes.
  • Web worker support for running operations on background threads.
  • Ivy, the new rendering engine, in preview mode for existing projects. Ivy offers better re-compilation performance and smaller bundle sizes.

Next.js: granular chunks and modern code delivery

Next.js is a React-based web framework that ships with routing and code-splitting, compilation via Babel and webpack, server-side rendering, per-page data fetching, and encapsulated styling with styled-jsx. The Chrome team helped identify several areas for performance improvement, which landed as RFCs and pull requests:

  1. A revised webpack chunking strategy that emits more granular bundles, reducing duplicate code fetched across multiple routes.
  2. Differential loading using the module/nomodule pattern, which can cut total JavaScript in Next.js apps by up to 20% with no code changes.
  3. Better performance metric tracking via the User Timing API.

Further features under exploration include concurrent mode to enable progressive or partial component hydration, and a webpack-based conformance system that analyzes source files and generated assets to surface improved errors and warnings.

Nuxt.js and the framework fund

Nuxt.js combines Vue.js with supporting libraries into an opinionated setup that includes routing with code-splitting, Babel and webpack compilation, server-side rendering, async data fetching per page, and a default Vuex data store. Alongside direct engineering contributions, Chrome expanded its framework fund to provide monetary support to more projects; a recent contribution to Nuxt.js is expected to fund features such as smarter server-side rendering and image optimizations.

Babel: a new preset for modern browsers

Babel is a foundational tool for nearly all of these frameworks, compiling newer syntax to code that target browsers can run. A common setup uses @babel/preset-env with targets specified either by browser list or by <script type="module"> to reach browsers that support ES Modules.

To optimize for that case, Chrome helped launch a new preset: @babel/preset-modules. Instead of downgrading modern syntax broadly to avoid browser bugs, it transforms only the specific patterns affected by each bug, producing output that stays nearly unmodified while still working in target browsers. Developers using preset-env will eventually inherit these optimizations automatically, as they will be folded into that preset.

The long-term goal is simple: by working hand-in-hand with framework and tooling authors, the Chrome team aims to make improvements that benefit users and developers at the ecosystem level. Teams working on web frameworks, UI libraries, or any other form of web tooling can apply for support through the framework fund.