Olá, Web Developers!
Veremos algumas novidades do Chrome 63, última versão do navegador a ser lançada em 2017.
Importação de módulos JavaScript dinâmicamente
Já faz um tempo que o JavaScript possui um modo nativo de importação de módulos, mas não faz tanto tempo que os navegadores começaram a dar suporte a essa funcionalidade.
O problema é que até pouco tempo, essa habilidade era estática.
Agora, com as mudanças no Chrome 63, podemos importar módulos em tempo de execução baseados em condições. Isso significa que, caso o usuário não precise do módulo, podemos evitar o seu carregamento.
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
});
});
No exemplo acima, o módulo só será carregado caso o usuário clique em um botão. Isso facilita aplicar a estratégia de Lazy Loading, melhorando a performance do carregamento da sua aplicação. Apenas o necessário será carregado no início e o resto será chamado apenas se for preciso.
Curso Google Chrome Developer Tools
Conhecer o cursoSobrescrita do comportamento do overflow scroll com CSS
Em dispositivos móveis podemos usar o scroll para recarregar a página, como mostrado na imagem abaixo:
Mas esta funcionalidade faz a página inteira ser recarregada, o que muitas vezes não é necessário. Agora é possível sobreescrever esse comportamento para criar uma funcionalidade igual a de certos aplicativos, onde fazemos o scroll apenas para carregar mais conteúdo (ou atualizar apenas uma parte da página). É o que a PWA (Progressive Web App) do Twitter está fazendo atualmente. Ao invés de recarregar a página, ele adiciona novos tweets à página.
Para isso nós usamos a propriedade CSS overscroll-behavior.
Na imagem abaixo, evitamos o recarrgamento total da página para implementar nosso próprio reload. Neste exemplo, ao invés de recarregar toda a página, apenas atualizaríamos a lista de emails.
Mudança na interface de permissões
Mais de 90% de todas as requisições de permissões são ignoradas ou temporariamente bloqueadas.
É muito ruim para a experiência do usuário quando um site já pede permissões de notificação assim que você entra, sem contexto nenhum. Para diminuir isso, o Chrome 59 começou a bloquear temporariamente uma permissão caso o usuário a negasse três vezes.
Agora o Chrome 63 para Android fará requisições em modais. Isso chamará mais a atenção do usuário, mas eles já aconselham para que os desenvolvedores exibam as requisições apenas em momentos que fazem sentido. Acredita-se que assim os usuários estarão 2,5x mais dispostos a aceitar uma permissão.
Device Memory API
A nova API JavaScript Device Memory nos ajuda a entender melhor o que está limitando a performance da sua página dando dicas sobre o total de memória RAM disponível no dispositivo do usuário.
Com isso, podemos adaptar algumas funcionalidades em tempo de execução para melhorar a experiência do usuário, assim como o YouTube altera a qualidade dos vídeos dependendo da velocidade da sua conexão.
Intl.PluralRules API
Essa API nos permite criar aplicações que entendem como aplicar regras de plural das palavras em diversas línguas dependendo do número aplicado. Essa API também pode ajudar com números ordinais.
