Chrome está colaborando con marcos de código abierto para trabajar hacia una web mejor
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.
Siga leyendo para obtener un resumen extendido 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 API del navegador 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.
La mayoría de los desarrolladores web
confían en herramientas de código abierto siempre que sea posible y prefieren no construir una infraestructura completamente personalizada. Los frameworks de JavaScript del lado del cliente 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,
Reaccionar, Angulary Vue, muestra que:
- 72% de los participantes en el
Primera encuesta anual para desarrolladores y diseñadores web de MDN
utilice al menos uno de estos marcos y bibliotecas. - Encima
320.000 sitios en los 5 millones de URL principales analizados por HTTP Archive utilizan al menos uno de estos marcos y bibliotecas. - Cuando se agrupan por tiempo empleado, 30 de las 100 principales URL utilizan al menos uno de estos marcos y bibliotecas. (La investigación se realizó con datos internos).
Esto significa que mejores herramientas de código abierto pueden resultar directamente en una mejor web y es por eso que los ingenieros de Chrome han comenzado a trabajar directamente con autores externos de marcos y bibliotecas.
Contribuciones a los marcos web
Los marcos que se utilizan comúnmente para construir y estructurar páginas web se dividen en dos categorías:
- Marcos de interfaz de usuario (o bibliotecas), como Preact, React o Vue, que proporcionan control sobre la capa de visualización de una aplicación (a través de un modelo de componente, por ejemplo).
- Frameworks web, 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 servidor. Estos marcos suelen aprovechar un marco de interfaz de usuario o una biblioteca para la capa de vista.
Los desarrolladores pueden optar por no usar marcos, pero al juntar una biblioteca de capas de vista, enrutador, sistema de estilo, renderizador de servidor, etc., a menudo terminan creando su propio tipo de marco. Aunque obstinados, los marcos web se encargan de muchas de estas preocupaciones de forma predeterminada.
El resto de esta publicación destaca muchas mejoras que han aterrizado recientemente en diferentes marcos y herramientas, incluidas las contribuciones del equipo de Chrome.
Angular
El equipo de Angular ha enviado una serie de mejoras a la versión 8 del marco:
Reducción del tamaño del paquete para angular.io con compilaciones diferenciales (desde Versión 8 de Angular)
- Soporte para sintaxis de importación dinámica estándar para rutas de carga diferida.
- Soporte para trabajadores web para ejecutar operaciones en un hilo de fondo separado del hilo principal.
- Hiedra, El nuevo motor de renderizado de Angular que proporciona un mejor rendimiento de recompilación y una reducción en el tamaño de los paquetes, está disponible en modo de vista previa para proyectos existentes.
Puede obtener más información sobre estas mejoras en
«Versión 8 de Angular»
y el equipo de Chrome espera trabajar de cerca con ellos el próximo año a medida que aparezcan más funciones.
Next.js
Next.js es un framework web que usa React como capa de vista. Además de un modelo de componente de interfaz de usuario que muchos desarrolladores esperan de un marco del lado del cliente, Next.js proporciona una serie de funciones predeterminadas integradas:
- Enrutamiento con división de código predeterminada
- Compilación y agrupación (usando Babel y
paquete web) - Representación del lado del servidor
- Mecanismos para obtener datos a nivel de página
- Estilo encapsulado (con styled-jsx)
Next.js se optimiza para tamaños de paquete reducidos y el equipo de Chrome ayudó a identificar áreas en las que podríamos ayudar a mejorar aún más el rendimiento. Puede obtener más información sobre cada uno de ellos al ver sus solicitudes de comentarios (RFC) y solicitudes de extracción (PR):
- Una estrategia 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). - Carga diferencial con el patrón módulo / nomodule que puede reducir la cantidad total de JavaScript en las aplicaciones Next.js hasta en un 20% sin cambios de código (RFC,
PR). - Seguimiento de métricas de rendimiento mejorado que utiliza la API de sincronización del usuario (PR).
También estamos explorando otras características para mejorar la experiencia del usuario y del desarrollador al usar Next.js, como:
- Habilitación del modo concurrente para desbloquear la hidratación progresiva o parcial de los componentes.
- Un sistema de conformidad basado en paquetes web que analiza todos los archivos de origen y activos generados para mostrar mejores errores y advertencias (RFC).
Un ejemplo de un error de compilación de conformidad en Next.js (prototipo)
Nuxt.js
Nuxt.js es un framework que combina Vue.js con diferentes bibliotecas para proporcionar una configuración obstinada. Al igual que Next.js, incluye muchas funciones listas para usar:
- Enrutamiento con división de código predeterminada
- Compilación y agrupación (usando Babel y
paquete web) - Representación del lado del servidor
- Obtención de datos asincrónicos para cada página
- Almacén de datos predeterminado (Vuex)
Además de trabajar directamente para mejorar el rendimiento de diferentes herramientas, hemos ampliado la
fondo marco para proporcionar apoyo monetario a más bibliotecas y marcos de código abierto. Con nuestro apoyo reciente para Nuxt.js, algunas características están programadas para aterrizar en un futuro cercano, incluida una representación de servidor más inteligente y optimizaciones de imágenes.
El fondo marco acelera los esfuerzos de diferentes marcos y bibliotecas con el objetivo de mejorar su desempeño. Si está trabajando en una herramienta de código abierto y necesita asistencia, por favor aplica!
Babel
También hemos avanzado en la mejora del rendimiento de una importante herramienta subyacente en casi todos los marcos mencionados:Babel.
Babel compila código que contiene una sintaxis más nueva en un código que los diferentes navegadores pueden entender. Se ha vuelto común de usar @ babel / preset-env para apuntar a navegadores modernos donde se pueden especificar diferentes objetivos de navegador para proporcionar suficiente polyfilling requerido para todos los entornos elegidos. Una forma de especificar los objetivos es utilizar <script type="module"> para apuntar a todos los navegadores que Soporta módulos ES.
Para optimizar para este caso, lanzamos un nuevo ajuste preestablecido;
@ babel / módulos-preestablecidos. En lugar de convertir la sintaxis moderna a una sintaxis anterior para evitar errores del navegador, preset-modules corrige cada error específico transformándolo a la sintaxis moderna no rota más cercana posible. Esto da como resultado un código moderno que se puede entregar casi sin modificar para la mayoría de los navegadores.
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 preset-env también.
¿Que sigue?
Trabajar en estrecha colaboración con bibliotecas y marcos 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 desarrolladores por igual.
Si trabaja en un framework, biblioteca de interfaz de usuario o cualquier forma de herramientas web (agrupador, compilador, linter),
solicitar el fondo marco!
