En el equipo de Chrome, nos preocupamos por la experiencia del usuario y un ecosistema web próspero. Queremos que los usuarios tengan la mejor experiencia posible en la Web, no solo con documentos estáticos, sino también cuando usen aplicaciones enriquecidas y altamente interactivas.
Las herramientas y los frameworks de código abierto desempeñan una función importante a la hora de permitir que los desarrolladores compilen apps modernas para la Web y, al mismo tiempo, admiten buenas experiencias para los desarrolladores. Estos frameworks y herramientas permiten a empresas de todos los tamaños y a las personas que compilan para la Web.
Creemos que los frameworks también pueden desempeñar un papel importante en la ayuda de los desarrolladores con aspectos de calidad clave, como el rendimiento, la accesibilidad, la seguridad y la preparación para dispositivos móviles. En lugar de pedir a todos los desarrolladores y propietarios de sitios que se conviertan en expertos en estas áreas y se mantengan al día con las prácticas recomendadas que cambian constantemente, el framework puede respaldarlas con soluciones integradas. Esto empodera a los desarrolladores y les permite enfocarse en compilar características del producto.
En pocas palabras, nuestra visión es que un alto estándar de calidad de UX se convierta en un efecto secundario de la compilación para la Web.
Aurora: Colaboración entre Chrome y los frameworks y las herramientas web de código abierto
Durante casi dos años, trabajamos con algunos de los frameworks más populares, como Next.js, Nuxt y Angular, para mejorar el rendimiento web. También financiamos herramientas y bibliotecas populares, como Vue, ESLint y webpack. Hoy, le damos un nombre a esta iniciativa: Aurora.
Una aurora es una pantalla de luz natural que brilla en el cielo. Como intentamos ayudar a que las experiencias del usuario creadas con frameworks brillen, pensamos que este nombre era una opción adecuada.
En los próximos meses, compartiremos más información sobre Aurora. Se trata de una colaboración entre un pequeño equipo de ingenieros de Chrome (con el nombre interno del SDK web) y los autores de frameworks. Nuestro objetivo es brindar la mejor experiencia del usuario posible para las apps de producción, sin importar el navegador en el que renderices.
¿Cuál es nuestra estrategia?
En Google, aprendimos mucho sobre el uso de frameworks y herramientas para compilar y mantener aplicaciones web a gran escala, como la Búsqueda de Google, Maps, la Búsqueda de imágenes, Google Fotos, etc. Descubrimos cómo los frameworks pueden cumplir una función fundamental en la calidad predecible de las apps, ya que proporcionan valores predeterminados y herramientas bien definidas.
Los frameworks tienen un punto de vista único para influir tanto en DX como en la UX, ya que abarcan todo el sistema: el cliente y el servidor, los entornos de desarrollo y producción y, además, integran herramientas como el compilador, el agrupador, Lint, etcétera.
Cuando las soluciones se integran en el framework, los equipos de desarrolladores pueden usarlas y enfocar su tiempo en lo que más importa para el producto, lo que ofrece excelentes funciones para los usuarios.
Mientras trabajamos para mejorar las herramientas que se encuentran en cada capa de la pila, los frameworks, como Next.js, Nuxt y la CLI de Angular, administran cada paso del ciclo de vida de una aplicación. Por esta razón, y el hecho de que la adopción de React es la mayor dentro del ecosistema del framework de la IU principal, la mayoría de nuestras optimizaciones comenzaron a probarse en Next.js antes de expandirse al resto del ecosistema.
Aurora apoya el éxito a gran escala, ya que lleva soluciones a la capa correcta de las pilas tecnológicas populares. Se cierra la brecha entre los navegadores y los frameworks, lo que permite que la alta calidad sea un efecto secundario de la compilación para la Web, a la vez que actúa como un ciclo de retroalimentación para mejorar la plataforma web.
¿Cuál es nuestro proceso de trabajo?
Nuestros principios sobre el modo en que Aurora conecta los navegadores con el ecosistema de desarrolladores son los siguientes: humildad, curiosidad, investigación científica y pragmatismo. Trabajamos con los autores del framework para mejorar las mejoras, colaboramos con la comunidad y tomamos las medidas necesarias antes de implementar cambios.
El siguiente es un resumen de los pasos que seguimos para cualquier función nueva en la que trabajemos:
- Identificar la dificultad de la experiencia del usuario en una pila popular, utilizando aplicaciones representativas.
- Crea prototipos de soluciones que aborden esto, con énfasis en “valores predeterminados sólidos”.
- Verifica la función con otra pila de framework para asegurarte de que se pueda adaptar.
- Para validar la función, experimenta en algunas apps de producción, por lo general, con pruebas de lab para verificar el rendimiento.
- Impulsa el diseño con el proceso de RFC y aborda los comentarios de la comunidad.
- Coloca la función en una pila popular, generalmente detrás de una bandera.
- Habilita la función en una app de producción representativa para evaluar la calidad y la integración del flujo de trabajo del desarrollador.
- Mide la mejora del rendimiento mediante el seguimiento de las métricas en las apps de producción representativa que adoptaron la función o se actualizaron.
- Habilita la función como la opción predeterminada en la pila para que se beneficien todos los usuarios que realizan la actualización.
- Una vez comprobada, trabaja con frameworks adicionales para conseguir la función.
- Identificar brechas en la plataforma web con un ciclo de retroalimentación.
- Avanza a los siguientes problemas.
Las herramientas y los complementos subyacentes (webpack, Babel, ESLint, TypeScript, etc.) se comparten en muchos frameworks. Esto ayuda a crear efectos dominó, incluso cuando se contribuye a una sola pila de framework.
Además, el Chrome Framework Fund admite herramientas y bibliotecas de código abierto con financiación. Si bien esperamos que haya suficiente superposición en las capas de problemas y soluciones con los esfuerzos anteriores para traducir a otros frameworks y herramientas, sabemos que podemos hacer más. Con ese fin, queremos hacer nuestro aporte para garantizar que las bibliotecas y los frameworks que ayudan a los desarrolladores a alcanzar el éxito puedan prosperar. Esa es una de las razones por las que seguiremos invirtiendo en el Chrome Framework Fund. Hasta la fecha, admitió trabajo con Webpack 5, Nuxt, rendimiento y mejoras de ESLint.
¿Qué ha permitido nuestro trabajo hasta el momento?
Nuestro trabajo se centró en las optimizaciones fundamentales para recursos como imágenes, JS, CSS y fuentes. Enviamos varias optimizaciones para mejorar los valores predeterminados de varios frameworks, incluidas las siguientes:
- Un componente de imagen en Next.js que encapsula las prácticas recomendadas para la carga de imágenes, seguida de una colaboración con Nuxt en el mismo El uso de este componente generó mejoras significativas en los tiempos de pintura y cambio de diseño (por ejemplo: un 57% de reducción en Largest Contentful Paint y un 100% de reducción en el Cambio de diseño acumulado en nextjs.org/give).
- Incorporación automática de declaraciones de fuentes web en CSS durante el tiempo de compilación Esta función llegó a Angular (Google Fonts) y Next.js (Google Fonts y Adobe Fonts), lo que generó mejoras notables en Largest Contentful Paint y First Contentful Paint (ejemplo).
- Incorporar CSS crítico con Critters en Angular y Next.js para reducir los tiempos de pintura Como resultado, se logró una mejora de entre 20 y 30 puntos en las puntuaciones de rendimiento de Lighthouse en una app típica de Angular a gran escala cuando se combinó con la función de incorporación de CSS de fuente.
- Compatibilidad con ESLint lista para usar en Next.js que incluye un complemento personalizado y una configuración que se puede compartir para facilitar la detección de problemas comunes específicos del framework durante la compilación, lo que brinda un rendimiento de carga más predecible.
- Se trata de una introducción a una recapacitación de rendimiento integrada en Crea una app de React y Next.js para permitir estadísticas más sencillas sobre el rendimiento de la página a través de las métricas web y otras métricas personalizadas.
- La fragmentación detallada se envió en Next.js y Gatsby, lo que produjo una reducción del 30 al 70% en los tamaños de paquetes y, al mismo tiempo, mejoró el rendimiento del almacenamiento en caché. Esta se convirtió en la opción predeterminada de Webpack 5.
- Un fragmento de polyfill independiente para navegadores más antiguos, en colaboración con el equipo de Next.js, para mejorar el tamaño del paquete en los navegadores modernos.
Cada una de estas funciones está automatizada para que se habilite de forma predeterminada o solo se necesita una simple habilitación. Esto es fundamental para garantizar que los desarrolladores puedan aprovechar sus beneficios con facilidad, sin agregar complejidad a su flujo de trabajo.
¿Qué tenemos planeado para 2021?
Durante el resto de este año, nos enfocaremos en ayudar a las pilas de framework a mejorar la experiencia del usuario y al rendimiento que tienen en métricas como las Métricas web esenciales. Este trabajo incluirá lo siguiente:
- Cumplimiento para la aplicación de las prácticas recomendadas Consulta la entrada de blog para obtener más información.
- Optimizar el rendimiento de la carga inicial mediante nuestras colaboraciones para optimizar las imágenes, las fuentes y los CSS críticos
- Para cargar secuencias de comandos de terceros (3P) con un impacto mínimo en el rendimiento, basándote en el trabajo en un componente Script y realizando una investigación profunda sobre cómo ordenar y secuenciar a los terceros.
- Rendimiento de JavaScript a gran escala (p. ej., compatibilidad con componentes del servidor de React en Next.js)
Nuestro equipo intentará publicar información más frecuente sobre las RFC y los documentos de diseño para estas ideas, a fin de que cualquier framework o desarrollador que quiera continuar pueda hacerlo.
Conclusión
El equipo de Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie y de la comunidad de Nextsource de Angular para mejorar la experiencia del usuario de forma predeterminada) Aumentaremos nuestra participación para abarcar más frameworks y herramientas con el tiempo. Mira este espacio para ver más entradas de blog, charlas y RFC de nuestro equipo durante el próximo año :)