O Chrome está colaborando com frameworks de código aberto para melhorar a Web
O Chrome é um colaborador ativo do ecossistema de frameworks da Web, e nossa palestra no Chrome Dev Summit 2019 abordou o que fizemos no ano passado.
Leia a seguir um resumo estendido da palestra com mais detalhes e recursos.
Como podemos melhorar a Web?
O objetivo de todos na equipe do Chrome é melhorar a Web. Trabalhamos para aprimorar as APIs do navegador e o V8, o mecanismo principal de JavaScript e WebAssembly que alimenta o Chrome, para que os desenvolvedores tenham recursos que os ajudem a criar ótimas páginas da Web. Também tentamos melhorar os sites que já estão em produção hoje, contribuindo para ferramentas de código aberto de várias maneiras.
A maioria dos desenvolvedores da Web confia em ferramentas de código aberto sempre que possível e prefere não criar uma infraestrutura totalmente personalizada. Os frameworks JavaScript do lado do cliente e as bibliotecas de interface do usuário representam uma parte crescente do uso de código aberto. Os dados sobre os três frameworks e bibliotecas do lado do cliente mais populares, React, Angular, e Vue, mostram que:
- 72% dos participantes da primeira pesquisa anual de desenvolvedores e designers da Web do MDN usam pelo menos um desses frameworks e bibliotecas.
- Mais de 320.000 sites nos 5 milhões de URLs principais analisados pelo HTTP Archive usam pelo menos um desses frameworks e bibliotecas.
- Quando agrupados por tempo gasto, 30 dos 100 URLs principais usam pelo menos um desses frameworks e bibliotecas. (A pesquisa foi feita com dados internos.)
Isso significa que melhores ferramentas de código aberto podem resultar diretamente em uma Web melhor e, por isso, os engenheiros do Chrome começaram a trabalhar diretamente com autores externos de frameworks e bibliotecas.
Contribuições para frameworks da Web
Os frameworks usados com frequência para criar e estruturar páginas da Web se enquadram em duas categorias:
- Frameworks de interface (ou bibliotecas), como Preact, React ou Vue, que fornecem controle sobre a camada de visualização de um aplicativo (por exemplo, usando um modelo de componente).
- Frameworks da Web, como Next.js, Nuxt.js e Gatsby, que fornecem um sistema completo com recursos integrados, como a renderização do lado do servidor. Esses frameworks geralmente aproveitam um framework ou biblioteca de interface para a camada de visualização.
Os desenvolvedores podem optar por não usar frameworks, mas, ao juntar uma biblioteca de camadas de visualização, um roteador, um sistema de estilo, um renderizador de servidor e assim por diante, eles geralmente acabam criando o próprio tipo de framework. Embora sejam opinativos, os frameworks da Web cuidam de muitas dessas preocupações por padrão.
O restante desta postagem destaca muitas melhorias que foram lançadas recentemente em diferentes frameworks e ferramentas, incluindo contribuições da equipe do Chrome.
Angular
A equipe do Angular lançou várias melhorias na versão 8 do framework:
- Carregamento diferencial por padrão para minimizar polyfills desnecessários para navegadores mais recentes.
- Suporte à sintaxe de importação dinâmica padrão para rotas de carregamento lento.
- Suporte a Web Workers para executar operações em uma linha de execução em segundo plano separada da linha de execução principal.
- O Ivy, o novo mecanismo de renderização do Angular que oferece melhor desempenho de recompilação e uma redução nos tamanhos dos pacotes, está disponível no modo de visualização para projetos atuais.
Saiba mais sobre essas melhorias na página "Versão 8 do Angular" e a equipe do Chrome espera trabalhar em colaboração com eles no próximo ano, à medida que mais recursos forem lançados.
Next.js
Next.js é um framework da Web que usa o React como uma camada de visualização. Além de um modelo de componente de interface que muitos desenvolvedores esperam de um framework do lado do cliente, o Next.js oferece vários recursos padrão integrados:
- Roteamento com divisão de código padrão
- Compilação e agrupamento (usando Babel e webpack)
- Renderização do lado do servidor
- Mecanismos para buscar dados por página
- Estilização encapsulada (com styled-jsx)
O Next.js é otimizado para reduzir os tamanhos dos pacotes, e a equipe do Chrome ajudou a identificar áreas em que poderíamos ajudar a melhorar ainda mais a performance. Saiba mais sobre cada um deles acessando as solicitações de comentários (RFCs, na sigla em inglês) e as solicitações de envio (PRs, na sigla em inglês):
- Uma estratégia de divisão de webpack aprimorada que emite pacotes mais granulares, reduzindo a quantidade de código duplicado buscado por várias rotas (RFC, PR).
- Carregamento diferencial com o padrão de módulo/sem módulo que pode reduzir a quantidade total de JavaScript em apps Next.js em até 20% sem alterações de código (RFC, PR).
- Melhoria no rastreamento de métricas de performance que utiliza a API User Timing (PR).
Também estamos explorando outros recursos para melhorar a experiência do usuário e do desenvolvedor ao usar o Next.js, como:
- Ativar o modo simultâneo para desbloquear a hidratação progressiva ou parcial de componentes.
- Um sistema de conformidade baseado em webpack que analisa todos os arquivos de origem e os recursos gerados para mostrar erros e avisos melhores (RFC).
Nuxt.js
Nuxt.js é um framework da Web que combina o Vue.js com diferentes bibliotecas para fornecer uma configuração opinativa. Semelhante ao Next.js, ele inclui muitos recursos prontos para uso:
- Roteamento com divisão de código padrão
- Compilação e agrupamento (usando Babel e webpack)
- Renderização do lado do servidor
- Busca assíncrona de dados para cada página
- Repositório de dados padrão (Vuex)
Além de trabalhar diretamente na melhoria da performance de diferentes ferramentas, expandimos o fundo de frameworks para oferecer suporte financeiro a mais frameworks e bibliotecas de código aberto. Com nosso suporte recente ao Nuxt.js, alguns recursos serão lançados em breve, incluindo renderização do servidor e otimizações de imagem mais inteligentes.
Babel
Também fizemos progressos na melhoria da performance de uma ferramenta subjacente importante em quase todos os frameworks mencionados: o Babel.
O Babel compila códigos que contêm uma sintaxe mais recente em códigos que diferentes navegadores podem entender.
Tornou-se comum usar @babel/preset-env para segmentar
navegadores modernos em que diferentes destinos de navegador podem ser especificados para fornecer polyfilling
suficiente para todos os ambientes escolhidos. Uma maneira de especificar os destinos é usar <script
type="module"> para segmentar todos os navegadores que oferecem suporte a módulos ES.
Para otimizar esse caso, lançamos uma nova predefinição:
@babel/preset-modules. Em vez de converter a sintaxe moderna em sintaxe mais antiga para evitar bugs do navegador, preset-modules corrige cada bug específico transformando-o na sintaxe moderna não corrompida mais próxima possível. Isso resulta em um código moderno que pode ser entregue quase sem modificações à maioria dos navegadores.
Os desenvolvedores que já usam preset-env também se beneficiarão dessas otimizações sem precisar fazer nada, já que elas também serão incorporadas ao preset-env em breve.
A seguir
Trabalhar em colaboração com frameworks e bibliotecas de código aberto para oferecer melhores experiências ajuda a equipe do Chrome a perceber o que é fundamentalmente importante para usuários e desenvolvedores.
Se você trabalha em um framework da Web, biblioteca de interface ou qualquer forma de ferramenta da Web (agrupador, compilador, linter), inscreva-se no fundo de frameworks!