Novedades de Chrome 63

Además, hay mucho más.

Soy Pete LePage. Comencemos y veamos las novedades para desarrolladores en Chrome 63.

¿Quieres ver la lista completa de cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.

Importaciones de módulos dinámicos

Importar módulos de JavaScript es muy útil, pero es estático: no puedes importar módulos basados en condiciones del tiempo de ejecución.

Afortunadamente, eso cambia en Chrome 63 con la nueva sintaxis de importación dinámica. Te permite cargar código de forma dinámica en módulos y secuencias de comandos durante el entorno de ejecución. Se puede usar para cargar de forma diferida una secuencia de comandos solo cuando sea necesario, lo que mejora el rendimiento de la aplicación.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

En lugar de cargar toda la aplicación cuando el usuario ingresa por primera vez a tu página, puedes usar los recursos que necesitas para acceder. Tu carga inicial es pequeña y crece muy rápido. Una vez que el usuario acceda, carga el resto y listo.

Iteradores y generadores asíncronos

Escribir código que realice cualquier tipo de iteración con las funciones async puede ser feo. De hecho, es la parte central de mi pregunta favorita sobre programación para entrevistas.

Ahora, con las async generator functions y el protocolo de iteración asíncrona, se simplifica el consumo o la implementación de fuentes de datos de transmisión, y mi pregunta de programación se vuelve mucho más fácil.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Los iteradores asíncronos se pueden usar en bucles for-of y también para crear tus propios iteradores asíncronos personalizados a través de fábricas de iteradores asíncronos.

Comportamiento de sobredesplazamiento

El desplazamiento es una de las formas más fundamentales de interactuar con una página, pero ciertos patrones pueden ser difíciles de manejar. Por ejemplo, los navegadores extraen para actualizar, en el que el deslizamiento hacia abajo en la parte superior de la página hace una recarga forzada.

Antes, con la actualización de la página completa.

Luego, actualiza solo el contenido.

En algunos casos, es posible que desees anular ese comportamiento y proporcionar tu propia experiencia. Eso es lo que hace la app web progresiva de Twitter: cuando deslizas hacia abajo, en lugar de volver a cargar toda la página, solo se agregan los tuits nuevos a la vista actual.

Chrome 63 ahora admite la propiedad overscroll-behavior de CSS, lo que facilita la anulación del comportamiento de desplazamiento de desbordamiento predeterminado del navegador.

Puedes utilizarla para lo siguiente:

La mejor parte es que overscroll-behavior no tiene un efecto negativo en el rendimiento de tu página.

Cambios en la IU de permisos

Me encantan las notificaciones push web, pero realmente me frustran la cantidad de sitios que solicitan permiso para cargar la página, sin ningún contexto. Y no estoy sola.

El 90% de todas las solicitudes de permisos se ignoran o se bloquean de forma temporal.

En Chrome 59, comenzamos a solucionar este problema bloqueando temporalmente un permiso si el usuario descartaba la solicitud tres veces. Ahora, en m63, Chrome para Android creará diálogos modales de solicitudes de permisos.

Recuerda que esto no solo se aplica a las notificaciones push, sino que se aplica a todas las solicitudes de permisos. Descubrimos que si solicitas permiso en el momento adecuado y en el contexto, es dos veces más probable que los usuarios lo otorguen.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 63 para desarrolladores; por supuesto, hay mucho más.

  • finally ahora está disponible en instancias de Promise y se invoca después de que se entrega o se rechaza una Promise.
  • La nueva API de JavaScript de memoria del dispositivo te ayuda a comprender las restricciones de rendimiento, ya que brinda sugerencias sobre la cantidad total de RAM en el dispositivo del usuario. Puedes personalizar tu experiencia en el tiempo de ejecución para reducir la complejidad en los dispositivos de gama baja y ofrecer a los usuarios una mejor experiencia con menos frustraciones.
  • La API de Intl.PluralRules te permite compilar aplicaciones que comprenden la pluralización de un idioma determinado, ya que indica qué forma plural se aplica a un número y idioma determinados. Y puede ayudar con los números ordinales.

Asegúrate de suscribirte a nuestro canal de YouTube; recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 64, estaré aquí para contarte las novedades de Chrome.