Chrome colabora con frameworks de código abierto para lograr una mejor Web
Chrome es un colaborador activo del ecosistema de frameworks web, y nuestra charla en Chrome Dev Summit 2019 abarca en qué trabajamos el año pasado.
Sigue leyendo para obtener un resumen ampliado de la charla con detalles y recursos adicionales.
¿Cómo mejoramos 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, de modo que los desarrolladores cuenten con funciones que los 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 maneras.
La mayoría de los desarrolladores web dependen de herramientas de código abierto siempre que sea posible y prefieren no crear una infraestructura completamente personalizada. Los frameworks de JavaScript del cliente y las bibliotecas de IU constituyen una parte cada vez mayor del uso de código abierto. Los datos de los tres frameworks y bibliotecas del cliente más populares, React, Angular, y Vue, muestran lo siguiente:
- El 72% de los participantes en la Primera Encuesta Anual para Desarrolladores y Diseñadores Web de MDN usa al menos uno de estos frameworks y bibliotecas.
- Más de 320,000 sitios en las 5 millones de URLs principales analizadas por HTTP Archive usan al menos uno de estos frameworks y bibliotecas.
- Cuando se agrupan por tiempo invertido, 30 de las 100 URLs principales usan al menos uno de estos frameworks y bibliotecas. (La investigación se realizó con datos internos).
Esto significa que las mejores herramientas de código abierto pueden generar directamente una mejor Web y, por eso, los ingenieros de Chrome comenzaron a trabajar directamente con autores externos de frameworks y bibliotecas.
Contribuciones a frameworks web
Los frameworks que se usan de uso frecuente para compilar y estructurar páginas web se dividen en dos categorías:
- Frameworks de IU (o bibliotecas), como Preact, React o Vue, que proporcionan control sobre la capa de vista de una aplicación (a través de un modelo de componentes, por ejemplo)
- Frameworks web, como Next.js, Nuxt.js y Gatsby, que proporcionan un sistema de extremo a extremo con funciones integradas y con opiniones, como el procesamiento del servidor. Por lo general, estos frameworks aprovechan un framework o una biblioteca de IU para la capa de vista.
Los desarrolladores pueden optar por no usar frameworks, pero, al unir una biblioteca de capas de vista, un enrutador, un sistema de diseño, un renderizador de servidor, etcétera, suelen terminar creando su propio tipo de framework. Aunque tienen opiniones, los frameworks web se encargan de muchas de estas inquietudes de forma predeterminada.
En el resto de esta publicación, se destacan muchas mejoras que se incorporaron recientemente en diferentes frameworks y herramientas, incluidas las contribuciones del equipo de Chrome.
Angular
El equipo de Angular lanzó varias mejoras en la versión 8 del framework:
- Carga diferencial de forma predeterminada para minimizar los polyfills innecesarios para navegadores más nuevos
- Compatibilidad con la sintaxis de importación dinámica estándar para rutas de carga diferida
- Compatibilidad con Web Worker para ejecutar operaciones en un subproceso en segundo plano independiente del subproceso principal
- Ivy, el nuevo motor de renderización de Angular que proporciona un mejor rendimiento de recompilación y una reducción en los tamaños de los paquetes, está disponible en modo de vista previa para proyectos existentes.
Puedes obtener más información sobre estas mejoras en "Versión 8 de Angular" y el equipo de Chrome espera trabajar en estrecha colaboración con ellos 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 empaquetado (con Babel y webpack)
- Procesamiento del servidor
- Mecanismos para recuperar datos a nivel de la página
- Diseño encapsulado (con styled-jsx)
Next.js se optimiza para reducir los tamaños de los paquetes, y el equipo de Chrome ayudó a identificar áreas en las que podríamos ayudar a mejorar aún más el rendimiento. Para obtener más información sobre cada uno de ellos, consulta sus solicitudes de comentarios (RFCs) y solicitudes de extracción (PRs):
- 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/nomódulo que puede reducir la cantidad total de JavaScript en las apps de Next.js hasta en un 20% sin cambios de código (RFC, PR).
- Seguimiento mejorado de las métricas de rendimiento que utiliza la API de User Timing (PR).
También estamos explorando otras funciones para mejorar la experiencia del usuario y del desarrollador con Next.js, como las siguientes:
- Habilitar 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 fuente y los recursos 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 con opiniones. Al igual que Next.js, incluye muchas funciones listas para usar:
- Enrutamiento con división de código predeterminada
- Compilación y empaquetado (con Babel y webpack)
- Procesamiento del servidor
- Recuperación de datos asíncrona para cada página
- Almacén de datos predeterminado (Vuex)
Además de trabajar directamente para mejorar el rendimiento de diferentes herramientas, ampliamos el fondo del framework para brindar asistencia monetaria a más frameworks y bibliotecas de código abierto. Con nuestra reciente compatibilidad con Nuxt.js, se espera que algunas funciones se incorporen en el futuro cercano, incluidas las optimizaciones de imágenes y la renderización del servidor más inteligente.
Babel
También avanzamos en la mejora del rendimiento de una importante herramienta subyacente en casi todos los frameworks mencionados: Babel.
Babel compila código que contiene una sintaxis más reciente en código que pueden comprender diferentes navegadores.
Se volvió común usar @babel/preset-env para segmentar
navegadores modernos en los que se pueden especificar diferentes objetivos de navegador para proporcionar suficientes polyfills
necesarios para todos los entornos elegidos. Una forma de especificar los objetivos es usar <script
type="module"> para segmentar todos los navegadores que admiten módulos de ES.
Para optimizar este caso, lanzamos un nuevo parámetro predeterminado:
@babel/preset-modules. En lugar de convertir la sintaxis moderna a una más antigua para evitar errores del navegador, preset-modules corrige cada error específico transformando a la sintaxis moderna no interrumpida más cercana posible. Esto da como resultado 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 hacer nada, ya que pronto se incorporarán a preset-env.
Próximos pasos
Trabajar en estrecha colaboración con frameworks y bibliotecas de código abierto para brindar mejores experiencias ayuda al equipo de Chrome a comprender lo que es fundamentalmente importante para los usuarios y los desarrolladores.
Si trabajas en un framework web, una biblioteca de IU o cualquier forma de herramienta web (empaquetador, compilador, linter), postúlate para el fondo del framework.