Novidades do Chrome 63

Pete LePage

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades do Chrome 63 para os desenvolvedores!

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

Importações de módulos dinâmicos

A importação de módulos JavaScript é muito útil. Como ela é estática, não é possível importar módulos com base nas condições de execução.

Felizmente, isso muda no Chrome 63 com a nova sintaxe de importação dinâmica. Ela permite carregar código dinamicamente em módulos e scripts durante a execução. Ela só pode ser usada para o carregamento lento de um script quando necessário, melhorando o desempenho do aplicativo.

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

Em vez de carregar todo o aplicativo quando o usuário acessa sua página pela primeira vez, use os recursos necessários para fazer login. Sua carga inicial é pequena e muito rápida. Em seguida, quando o usuário fizer login, carregue o restante e pronto.

Geradores e iteradores assíncronos

Escrever códigos que fazem qualquer tipo de iteração com funções async pode ser ruim. Na verdade, é a parte central da minha pergunta favorita de programação.

Agora, com as async generator functions e o protocolo de iteração assíncrona, o consumo ou a implementação de fontes de dados de streaming fica mais simples, e minha pergunta sobre codificação fica muito mais 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;
  }
}

Os iteradores assíncronos podem ser usados em repetições for-of e também para criar seus próprios iteradores assíncronos personalizados por meio de fábricas de iteradores assíncronos.

Comportamento de rolagem

A rolagem é uma das maneiras mais fundamentais de interagir com uma página, mas alguns padrões podem ser difíceis de lidar. Por exemplo, no recurso arrastar para atualizar dos navegadores, deslizar para baixo na parte superior da página realiza uma atualização forçada.

Antes, com atualização completa da página.

Depois, atualize apenas o conteúdo.

Em alguns casos, convém substituir esse comportamento e fornecer sua própria experiência. É isso que o Progressive Web App do Twitter faz. Quando você arrasta a página para baixo, em vez de atualizar toda a página, ele simplesmente adiciona novos tweets à visualização atual.

O Chrome 63 agora oferece suporte à propriedade overscroll-behavior do CSS, facilitando a substituição do comportamento padrão de rolagem flutuante do navegador.

Use-o para:

A melhor parte é que overscroll-behavior não tem um efeito negativo no desempenho da sua página.

Mudanças na interface de permissão

Adoro notificações push da Web, mas estou muito frustrado com o número de sites que pedem permissão no carregamento de página, sem qualquer contexto. E não estou só.

90% de todas as solicitações de permissão são ignoradas ou bloqueadas temporariamente.

No Chrome 59, começamos a resolver esse problema bloqueando temporariamente uma permissão se o usuário dispensava a solicitação três vezes. Na versão m63, o Chrome para Android vai criar caixas de diálogo modais de solicitações de permissão.

Não se esqueça de que não se aplica apenas a notificações push, isso se aplica a todas as solicitações de permissão. Descobrimos que, se você pedir permissão no momento adequado e no contexto, a probabilidade de os usuários concederem permissão é duas vezes e meia.

E muito mais.

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

  • finally agora está disponível em instâncias Promise e é invocado depois que um Promise é atendido ou rejeitado.
  • A nova API Device Memory JavaScript ajuda a entender as restrições de desempenho com dicas sobre a quantidade total de RAM no dispositivo do usuário. Você pode personalizar sua experiência durante a execução, reduzindo a complexidade em dispositivos mais simples e oferecendo aos usuários uma experiência melhor com menos frustrações.
  • A API Intl.PluralRules permite criar aplicativos que entendem a pluralização de um determinado idioma, indicando qual forma plural se aplica a um determinado número e idioma. E pode ajudar com números ordinais.

Inscreva-se no nosso canal do YouTube para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage e, assim que o Chrome 64 for lançado, terei aqui as novidades do Chrome!