Novidades no Chrome 66

Pete LePage

E tem muitos outros!

Meu nome é Pete LePage. Vamos em frente e ver as novidades para os desenvolvedores no Chrome 66!

Quer a lista completa de alterações? Confira a lista de alterações do repositório de origem do Chromium.

Modelo de objeto tipado do CSS

Se você já atualizou uma propriedade CSS por meio de JavaScript, então usou o modelo de objeto CSS. Mas tudo retorna como uma string.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Para animar a propriedade opacity, eu teria que converter a string para um número e, em seguida, incrementar o valor e aplicar minhas mudanças. Não é exatamente o ideal.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Com o novo modelo de objeto tipado do CSS, os valores CSS são expostos como objetos JavaScript tipados, eliminando a manipulação grande de tipo e proporcionando uma maneira mais sensata de trabalhar com CSS.

Em vez de usar element.style, é possível acessar os estilos usando a propriedade .attributeStyleMap ou .styleMap. Eles retornam um objeto parecido com um mapa que facilita a leitura ou atualização.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Em comparação com o antigo modelo de objetos CSS, os primeiros comparativos de mercado mostram uma melhoria de 30% nas operações por segundo, algo que é especialmente importante para animações em JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Isso também ajuda a eliminar bugs causados ao esquecer de converter o valor de uma string para um número, além de processar automaticamente o arredondamento e a restrição de valores. Além disso, há alguns métodos novos e bem legais para lidar com conversões de unidade, aritmética e igualdade.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Érico tem uma ótima postagem com várias demonstrações e exemplos na explicação (link em inglês).

API Async Clipboard

const successful = document.execCommand('copy');

A função de copiar e colar síncrona usando document.execCommand pode ser adequada para pequenas partes de texto. No entanto, para qualquer outra coisa, é provável que a natureza síncrona bloqueie a página, causando uma experiência ruim para o usuário. E o modelo de permissões entre navegadores é inconsistente.

A nova API Async Clipboard é uma substituição que funciona de maneira assíncrona e se integra à API de permissão para oferecer uma experiência melhor aos usuários.

O texto pode ser copiado para a área de transferência chamando writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Como essa API é assíncrona, a função writeText() retorna uma promessa que será resolvida ou rejeitada dependendo se o texto transmitido foi copiado com êxito.

Da mesma forma, o texto pode ser lido da área de transferência chamando getText() e aguardando a promessa retornada ser resolvida com o texto.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Confira a postagem e as demonstrações de Jason na explicação. Ele também tem exemplos que usam funções async.

Novo contexto de tela BitmapRenderer

O elemento canvas permite manipular gráficos no nível do pixel, desenhar gráficos, manipular fotos ou até mesmo fazer processamento de vídeo em tempo real. No entanto, a menos que você esteja começando com um canvas em branco, precisará de uma maneira de renderizar uma imagem na canvas.

Historicamente, isso significava criar uma tag image e renderizar o conteúdo dela para o canvas. Infelizmente, isso significa que o navegador precisa armazenar várias cópias da imagem na memória.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

A partir do Chrome 66, há um novo contexto de renderização assíncrona que simplifica a exibição de objetos ImageBitmap. Agora, elas são renderizadas de modo mais eficiente e com menos instabilidade, trabalhando de forma assíncrona e evitando a duplicação de memória.

Para usá-lo, faça o seguinte:

  1. Chame createImageBitmap e entregue a ele um blob de imagem para criar a imagem.
  2. Extraia o contexto bitmaprenderer da canvas.
  3. Em seguida, transfira a imagem.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Pronto, renderizei a imagem!

AudioWorklet

Os Worklets entraram. O PaintWorklet é fornecido no Chrome 65 e agora estamos ativando o AudioWorklet por padrão no Chrome 66. Esse novo tipo de Worklet pode ser usado para processar áudio na linha de execução de áudio dedicada, substituindo o ScriptProcessorNode legado que era executado na linha de execução principal. Cada AudioWorklet é executado no próprio escopo global, reduzindo a latência e aumentando a estabilidade da capacidade.

Há alguns exemplos interessantes do AudioWorklet nos Labs do Google Chrome.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 66 para desenvolvedores. É claro, há muito mais.

  • TextArea e Select agora oferecem suporte ao atributo autocomplete.
  • A definição de autocapitalize em um elemento form será aplicada a todos os campos de formulário filhos, melhorando a compatibilidade com a implementação de autocapitalize do Safari.
  • trimStart() e trimEnd() agora estão disponíveis como a maneira baseada em padrões de cortar espaços em branco das strings.

Confira a seção Novidades do Chrome DevTools para conhecer as novidades do DevTools no Chrome 66. Se você tiver interesse nos Progressive Web Apps, confira a nova série de vídeos PWA Roadshow. Em seguida, clique no botão Inscrever-se em nosso canal do YouTube para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Sou Pete LePage e, assim que o Chrome 67 for lançado, estarei aqui para informar as novidades do Chrome.