Novidades no Chrome 66

Pete LePage

E tem muito mais!

Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 66.

Quer a lista completa de mudanças? Confira a lista de mudanças do repositório de origem do Chromium.

Modelo de objetos tipado do CSS

Se você já atualizou uma propriedade CSS usando JavaScript, usou o modelo de objeto CSS. Mas ele retorna tudo como uma string.

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

Para animar a propriedade opacity, preciso converter a string em um número, incrementar o valor e aplicar minhas mudanças. Não é exatamente 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 objetos tipado do CSS, os valores do CSS são expostos como objetos tipados do JavaScript, eliminando grande parte da manipulação de tipos e oferecendo uma maneira mais sensata de trabalhar com CSS.

Em vez de usar element.style, acesse os estilos pela propriedade .attributeStyleMap ou .styleMap. Elas retornam um objeto semelhante a 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 do CSS, os comparativos iniciais mostram uma melhoria de cerca de 30% nas operações por segundo, algo que é especialmente importante para animações JavaScript.

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

Ele também ajuda a eliminar bugs causados por esquecimento de converter o valor de uma string em um número e processa automaticamente o arredondamento e a fixação de valores. Além disso, há alguns métodos novos muito legais para lidar com conversões de unidades, aritmética e igualdade.

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

Eric tem um ótimo post com várias demonstrações e exemplos no explicador.

API Async Clipboard

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

A cópia e a colagem síncronas usando document.execCommand podem ser aceitáveis para pequenos trechos de texto, mas para qualquer outra coisa, há uma boa chance de que a natureza síncrona bloqueie a página, causando uma experiência ruim para o usuário. E o modelo de permissão entre navegadores é inconsistente.

A nova API Async Clipboard é uma substituição que funciona de forma 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.

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

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

Confira a postagem e as demonstrações de Jason no texto explicativo. Ele também tem exemplos que usam funções async.

Novo contexto do Canvas BitmapRenderer

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

Historicamente, isso significava criar uma tag image e renderizar o conteúdo dela no 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 simplificou a exibição de objetos ImageBitmap. Agora eles são renderizados de forma mais eficiente e com menos instabilidade, trabalhando de forma assíncrona e evitando a duplicação de memória.

Para usá-lo:

  1. Chame createImageBitmap e transmita um blob de imagem para criar a imagem.
  2. Acesse o contexto bitmaprenderer do 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 estão disponíveis. O PaintWorklet foi enviado 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 legada que era executada na linha de execução principal. Cada AudioWorklet é executado no próprio escopo global, reduzindo a latência e aumentando a estabilidade de transferência.

Há alguns exemplos interessantes de AudioWorklet no Google Chrome Labs.

E muito mais.

Estas são apenas algumas das mudanças no Chrome 66 para desenvolvedores. Há muitas outras.

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

Confira as Novidades do Chrome DevTools para saber o que mudou no Chrome DevTools no Chrome 66. Se você tiver interesse em apps da Web progressivos, confira a nova série de vídeos do PWA Roadshow. Depois, clique no botão Inscrever-se no nosso canal do YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 67 for lançado, vou estar aqui para contar as novidades do Chrome.