Novedades de Chrome 63

Pete LePage

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 según las condiciones del entorno 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 tiempo de ejecución. Se puede usar para cargar de forma diferida una secuencia de comandos solo cuando es 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 accede a tu página por primera vez, puedes tomar los recursos que necesitas para acceder. Tu carga inicial es pequeña y muy rápida. Luego, una vez que el usuario acceda, carga el resto y listo.

Iteradores y generadores asíncronos

Escribir código que realice algún tipo de iteración con funciones async puede ser un poco complicado. De hecho, es la parte central de mi pregunta favorita de programación para entrevistas.

Ahora, con las funciones de generador asíncrono y el protocolo de iteración asíncrona, el consumo o la implementación de fuentes de datos de transmisión se optimizan, 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 durante el desplazamiento

El desplazamiento es una de las formas más fundamentales de interactuar con una página, pero algunos patrones pueden ser difíciles de abordar. Por ejemplo, la función deslizar para actualizar de los navegadores, en la que se desliza el dedo hacia abajo en la parte superior de la página, realiza 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 el dedo hacia abajo. En lugar de volver a cargar toda la página, simplemente agrega los tweets nuevos a la vista actual.

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

Puedes utilizarla para lo siguiente:

Lo mejor 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 me frustro la cantidad de sitios que piden permiso cuando se carga la página, sin ningún contexto, y no estoy sola.

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

En Chrome 59, comenzamos a abordar este problema bloqueando temporalmente un permiso si el usuario rechazaba la solicitud tres veces. Ahora, en la versión m63, Chrome para Android mostrará diálogos modales de solicitudes de permisos.

Recuerda que esto no solo se aplica a las notificaciones push, sino a todas las solicitudes de permisos. Si solicitas permiso en el momento adecuado y en contexto, descubrimos que los usuarios tienen dos veces y media más probabilidades de otorgar el permiso.

Y mucho más.

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

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

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

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