Advancing the framework ecosystem

Chrome está colaborando con marcos de Open Source para trabajar hacia una Web best

January 8, 2020

Chrome es un colaborador activo del ecosistema de framework web y nuestra charla en Chrome Dev Summit 2019 cubre lo que hemos trabajado durante el año pasado.

Read on for an extended summary of the talk with additional details and resources.

How do we improve the web?

The target de todos los miembros del equipo de Chrome es mejorar la Web. Trabajamos para mejorar las API of browser y V8, el motor principal de JavaScript y WebAssembly que impulsa a Chrome, para que los desarrolladores estén equipados con funciones que les ayuden a crear excelentes páginas web. También intentamos mejorar los sitios web que ya están en producción hoy en día contribuyendo a las herramientas de código abierto de muchas formas.

Most web developers
confían en herramientas de código abierto siempre que be posible y prefieren no construir una infraestructura completamente personalizada. Los frameworks de JavaScript del lado del client y las bibliotecas de UI constituyen una porción creciente del uso de código abierto. Datos sobre los tres marcos y bibliotecas del lado del cliente más populares,
React, Angularand Vue, shows that:

• 72% of the participants in the
  MDN's First Annual Survey for Web Developers and Designers
  use at least one of these frameworks and libraries.
• Above
  320,000 sites en los 5 millones de Url principales analizados por HTTP Archive utilizan al menos uno de estos marcos y bibliotecas.
• When grouped by time spent, 30 of the top 100 URLs use at least one of these frameworks and libraries. (The research was conducted with internal data).

This means that better open source tools can lead directly to a better web And that's why Chrome engineers have started working directly with external frame and library authors.

Contributions to web frameworks

The frameworks that are commonly used to build and structure web pages fall into two categories:

• Marcos de user interface (or libraries), such as Preact, React, or Vue, that provide control over an application's display layer (through a component model, for example).
• Web Frameworks, como Next.js, Nuxt.js y Gatsby, que proporcionan un sistema de un extremo a otro con características de opinión integradas, como la representación del lado del server. Estos marcos suelen aprovechar un marco de interfaz de Username o una biblioteca para la capa de vista.

Developers can choose not to use frames, but by putting together a library of view layers, router, style system, server renderer, etc., they often end up creating their own kind of frame. Although stubborn, web frameworks take care of many of these concerns by default.

The rest of this post highlights many improvements that have recently landed on different frameworks and tools, including contributions from the Chrome team.

Angular

The Angular team has shipped a number of improvements to version 8 of the framework:

• Support for standard dynamic import syntax for lazy loading paths.
• Web worker support to execute operations on a background thread separate from the main thread.
• Ivy, Angular's new rendering engine that provides better recompilation performance and reduced packet size, is available at preview mode for existing projects.

You can learn more about these enhancements at
"Version 8 of Angular"
and the Chrome team looks forward to working closely with them next year as more features become available.

Next.js

Next.js is a web framework that uses React as a view layer. In addition to a UI component model that many developers have come to expect from a client-side framework, Next.js provides a number of built-in default functions:

• Routing with default code split
• Compilation and grouping (using Babel and
  web package)
• Server-side rendering
• Mechanisms for obtaining page-level data
• Encapsulated style (with styled-jsx)

Next.js is optimized for small packet sizes, and the Chrome team helped identify areas where we could help improve performance even further. You can learn more about each of them by viewing their Request for Comments (RFCs) and Pull Requests (PR):

1. A strategy mejorada de fragmentación de paquetes web que emite paquetes más granulares, lo que reduce la cantidad de código duplicado obtenido a través de múltiples rutas (RFC,
   PR).
2. Differential loading with the module / nomodule pattern which can reduce the total amount of JavaScript in Next.js applications by up to 20% without code changes (RFC,
   PR).
3. Improved performance metric tracking using the User Synchronization API (PR).

We are also exploring other features to improve the user and developer experience when using Next.js, such as:

• Enabling concurrent mode to unlock progressive or partial hydration of the components.
• A web packet based compliance system that scans all generated asset and source files to show better errors and warnings (RFC).

Nuxt.js

Nuxt.js is a framework that combines Vue.js with different libraries to provide a stubborn configuration. Like Next.js, it includes many out-of-the-box functions:

• Routing with default code split
• Compilation and grouping (using Babel and
  web package)
• Server-side rendering
• Obtaining asynchronous data for each page
• Default datastore (Vuex)

In addition to working directly to improve the performance of different tools, we have expanded the
frame background to provide monetary support for more open source libraries and frameworks. With our recent support For Nuxt.js, some features are scheduled to land in the near future, including smarter server rendering and image optimizations.

Babel

We have also made progress in improving the performance of a major underlying tool in almost all of the frameworks mentioned:Babel.

Babel compila código que contiene una sintaxis más nueva en un código que los diferentes browsers pueden entender. Se ha vuelto común de usar @ babel / preset-env to target modern browsers where different browser targets can be specified to provide enough required polyfilling for all chosen environments. One way to specify objectives is to use to target all browsers that Supports ES modules.

For optimize para este caso, lanzamos un nuevo ajuste preestablecido;
@ babel / modules-presets. Instead of converting modern syntax to older syntax to avoid browser errors, preset-modules fixes each specific bug by transforming it to the closest modern unbroken syntax possible. This results in modern code that can be delivered almost unmodified for most browsers.

Developers already using preset-env they will also benefit from these optimizations without having to do anything, as they will soon be incorporated preset-env as well.

Whats Next?

Working closely with open source frameworks and libraries to provide better experiences helps the Chrome team realize what is fundamentally important to users and developers alike.

Si trabaja en un framework, biblioteca de interfaz de usuario o cualquier forma de herramientas web (agrupador, compiler, linter),
request frame background!