Chrome colabora con frameworks de código abierto para trabajar en pos de una mejor Web
Chrome contribuye activamente al ecosistema del marco de trabajo web, y nuestra charla en la Chrome Dev Summit 2019 aborda los aspectos en los que trabajamos durante el año pasado.
Continúa leyendo para ver un resumen más extenso de la charla con detalles y recursos adicionales.
¿Cómo podemos mejorar la Web?
El objetivo de todos los miembros del equipo de Chrome es mejorar la Web. Trabajamos para mejorar las APIs del navegador y V8 (el motor principal de JavaScript y WebAssembly que impulsa Chrome) para que los desarrolladores cuenten con funciones que los ayuden a crear excelentes páginas web. También tratamos de mejorar los sitios web que ya están en producción en la actualidad contribuyendo de muchas maneras a las herramientas de código abierto.
La mayoría de los desarrolladores web confían en las herramientas de código abierto siempre que sea posible y prefieren no compilar una infraestructura completamente personalizada. Los frameworks de JavaScript del cliente y las bibliotecas de la IU conforman una parte creciente del uso de código abierto. Los datos sobre los tres frameworks y bibliotecas del cliente más populares, React, Angular y Vue, muestran lo siguiente:
- El 72% de los participantes de la primera encuesta anual para desarrolladores y diseñadores web de MDN usan al menos uno de estos frameworks y bibliotecas.
- Más de 320,000 sitios en los 5 millones de URL principales que analiza HTTP Archive usan al menos uno de estos frameworks y bibliotecas.
- Cuando se agrupan por el tiempo de uso, 30 de las 100 URLs principales usan al menos uno de estos frameworks y bibliotecas. (La investigación se realizó sobre los datos internos).
Esto significa que mejores herramientas de código abierto pueden dar como resultado directamente una mejor Web y es por eso que los ingenieros de Chrome comenzaron a trabajar directamente con autores de frameworks y bibliotecas externos.
Contribuciones a los frameworks web
Los frameworks comúnmente utilizados para crear y estructurar páginas web se dividen en dos categorías:
- Los frameworks de la IU (o las bibliotecas), como Preact, React o Vue, que proporcionan control sobre la capa de vista de una aplicación (por ejemplo, mediante un modelo de componentes)
- Frameworks web, como Next.js, Nuxt.js y Gatsby, que proporcionan un sistema de extremo a extremo con funciones bien definidas integradas, como la renderización del servidor. Estos frameworks suelen aprovechar un framework o una biblioteca de IU para la capa de vista.
Los desarrolladores pueden optar por no usar frameworks, pero, cuando combinan una biblioteca de capas de vista, un router, un sistema de diseño, un procesador de servidores, etc., suelen terminar creando su propio tipo de framework. Aunque están bien definidos, los frameworks web se encargan de muchas de estas cuestiones de forma predeterminada.
En el resto de esta publicación, se destacan muchas mejoras que se implementaron recientemente en diferentes frameworks y herramientas, incluidas las contribuciones del equipo de Chrome.
Angular
El equipo de Angular envió varias mejoras a la versión 8 del framework:
- Carga diferencial de forma predeterminada para minimizar polyfills innecesarios en los navegadores más nuevos.
- Compatibilidad con la sintaxis de importación dinámica estándar para rutas de carga diferida.
- Compatibilidad con trabajadores web para ejecutar operaciones en un subproceso en segundo plano independiente del subproceso principal
- Ivy, el nuevo motor de renderización de Angular que mejora el rendimiento de la recompilación y reduce el tamaño de los paquetes, está disponible en el modo de vista previa para los proyectos existentes.
Puedes obtener más información sobre estas mejoras en la "versión 8 de Angular". El equipo de Chrome espera trabajar con ellas de cerca el próximo año a medida que se incorporen más funciones.
Next.js
Next.js es un framework web que usa React como capa de vista. Además de un modelo de componentes de IU que muchos desarrolladores esperan de un framework del cliente, Next.js proporciona varias funciones predeterminadas integradas:
- Enrutamiento con división de código predeterminada
- Compilación y empaquetamiento (con Babel y webpack)
- Renderización del servidor
- Mecanismos para recuperar datos a nivel por página
- Diseño encapsulado (con styled-jsx)
Next.js realiza optimizaciones para reducir los tamaños de paquetes, y el equipo de Chrome ayudó a identificar áreas en las que podríamos mejorar aún más el rendimiento. Puedes obtener más información sobre cada uno de ellos consultando sus solicitudes de comentarios (RFC) y solicitudes de extracción (PR):
- Una estrategia mejorada de fragmentación de webpack que emite paquetes más detallados, lo que reduce la cantidad de código duplicado recuperado a través de varias rutas (RFC, PR).
- Carga diferencial con el patrón de módulo/no módulo, que puede reducir la cantidad total de JavaScript en las apps de Next.js hasta un 20% sin cambios en el código (RFC, PR)
- Se mejoró el seguimiento de métricas de rendimiento que usa la API de User Timing (PR).
También estamos explorando otras funciones para mejorar la experiencia del usuario y del desarrollador cuando usan Next.js, como las siguientes:
- Habilita el modo simultáneo para desbloquear la hidratación progresiva o parcial de los componentes.
- Un sistema de conformidad basado en webpack que analiza todos los archivos de origen y los elementos generados para mostrar mejores errores y advertencias (RFC).
Nuxt.js
Nuxt.js es un framework web que combina Vue.js con diferentes bibliotecas para proporcionar una configuración bien definida. De manera similar a Next.js, incluye muchas funciones listas para usar:
- Enrutamiento con división de código predeterminada
- Compilación y empaquetamiento (con Babel y webpack)
- Renderización del servidor
- Recuperación de datos asíncrona para cada página
- Almacén de datos predeterminado (Vuex)
Además de trabajar directamente en mejorar el rendimiento de las diferentes herramientas, expandimos los fondos del framework para ofrecer apoyo monetario a más bibliotecas y frameworks de código abierto. Gracias a nuestra reciente compatibilidad con Nuxt.js, se lanzarán algunas funciones en un futuro cercano, como un procesamiento del servidor más inteligente y optimizaciones de imágenes.
Babel
También avanzamos en la mejora del rendimiento de una importante herramienta subyacente en casi todos los frameworks mencionados: Babel.
Babel compila en código que incluye una sintaxis más reciente que los distintos navegadores pueden comprender.
Es común usar @babel/preset-env para orientar a navegadores modernos en los que se pueden especificar diferentes objetivos de navegador a fin de proporcionar suficiente polyfilling necesario para todos los entornos elegidos. Una forma de especificar los objetivos es usar <script
type="module"> para segmentar a todos los navegadores que admitan módulos de ES.
Para optimizar este caso, lanzamos un ajuste predeterminado nuevo: @babel/preset-modules. En lugar de convertir la sintaxis moderna en una antigua para evitar errores del navegador, preset-modules corrige cada error específico mediante la transformación a la sintaxis moderna no rota más cercana posible. Esto genera un código moderno que se puede entregar casi sin modificar a la mayoría de los navegadores.
Los desarrolladores que ya usan preset-env también se beneficiarán de estas optimizaciones sin tener que realizar ninguna acción, ya que pronto se incorporarán a preset-env.
¿Qué sigue?
Trabajar en estrecha colaboración con bibliotecas y frameworks de código abierto para proporcionar mejores experiencias ayuda al equipo de Chrome a darse cuenta de lo que es fundamentalmente importante para los usuarios y los desarrolladores.
Si trabajas en un framework web, una biblioteca de IU o cualquier tipo de herramienta web (agrupador, compilador, linter), envía una solicitud al fondo para el framework.