Como desenvolver o ecossistema de framework da Web

O Chrome está colaborando com frameworks de código aberto para melhorar a Web

Houssein Djirdeh

O Chrome é um colaborador ativo para o ecossistema de framework da Web, e nossa palestra na Conferência de Desenvolvedores do Chrome 2019 abrange nosso trabalho ao longo do último ano.

Continue lendo para uma recapitulação estendida da palestra, com detalhes e recursos adicionais.

Como podemos melhorar a Web?

O objetivo de todos na equipe do Chrome é tornar a Web melhor. Trabalhamos para melhorar as APIs de navegador e a V8 (o principal mecanismo JavaScript e WebAssembly do Chrome) para que os desenvolvedores sejam equipados com recursos que os ajudem a criar ótimas páginas da Web. Também tentamos melhorar sites que já estão em produção, contribuindo com ferramentas de código aberto de várias maneiras.

A maioria dos desenvolvedores da Web depende de ferramentas de código aberto sempre que possível e prefere não criar uma infraestrutura totalmente personalizada. Frameworks de JavaScript do lado do cliente e bibliotecas de interface representam uma parte cada vez maior do uso de código aberto. Os dados dos três frameworks e bibliotecas mais conhecidos do lado do cliente, React, Angular e Vue, mostram que:

• 72% dos participantes da primeira pesquisa anual para designers e desenvolvedores da Web da MDN usam pelo menos um desses frameworks e bibliotecas.
• Mais de 320.000 sites nos cinco principais milhões de URLs analisados pelo HTTP Archive usam pelo menos um desses frameworks e bibliotecas.
• Quando agrupados por tempo gasto, 30 dos 100 principais URLs usam pelo menos um desses frameworks e bibliotecas. (A pesquisa foi feita em dados internos.)

Isso significa que ferramentas de código aberto melhores podem resultar diretamente em uma Web melhor e é por isso que os engenheiros do Chrome começaram a trabalhar diretamente com autores de bibliotecas e frameworks externos.

Contribuições para frameworks da Web

Frameworks comumente usados para construir e estruturar páginas da web se enquadram em duas categorias:

• Frameworks de interface (ou bibliotecas), como Preact, React ou Vue, que oferecem controle sobre a camada de visualização de um aplicativo (por meio de um modelo de componente, por exemplo).
• Frameworks da Web, como Next.js, Nuxt.js e Gatsby, que oferecem um sistema completo com recursos específicos integrados, como a renderização do lado do servidor. Esses frameworks geralmente usam um framework ou uma biblioteca de interface para a camada de visualização.

Os desenvolvedores podem optar por não usar frameworks, mas ao juntar uma biblioteca de camada 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 opinativas, as estruturas da Web cuidam de muitas dessas preocupações por padrão.

No restante desta postagem, destacamos muitas melhorias que surgiram recentemente em diferentes estruturas e ferramentas, incluindo contribuições da equipe do Chrome.

Angular

A equipe do Angular lançou várias melhorias para a 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 para o worker da Web para executar operações em uma linha de execução em segundo plano separada da linha de execução principal
• A Ivy, o novo mecanismo de renderização do Angular que oferece um melhor desempenho de recompilação e uma redução nos tamanhos dos pacotes, está disponível no modo de visualização para projetos já existentes.

Saiba mais sobre essas melhorias na "Versão 8 do Angular". A equipe do Chrome vai trabalhar com elas no próximo ano, à medida que mais recursos forem lançados.

Next.js

O Next.js é um framework da Web que usa o React como uma camada de visualização. Além de um modelo de componente de IU que muitos desenvolvedores esperam de um framework do lado do cliente, o Next.js fornece 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
• Estilo encapsulado (com styled-jsx)

O Next.js otimiza para tamanhos de pacote reduzidos, e a equipe do Chrome ajudou a identificar áreas em que poderíamos melhorar ainda mais o desempenho. Saiba mais sobre cada um deles visualizando as solicitações de comentários (RFCs) e de envio (PRs, na sigla em inglês):

1. Uma estratégia aprimorada de agrupamento de webpacks que emite pacotes mais granulares, reduzindo a quantidade de código duplicado buscado em várias rotas (RFC, PR).
2. Carregamento diferencial com o padrão de módulo/nomodule (link em inglês), que pode reduzir a quantidade total de JavaScript nos apps Next.js em até 20% sem mudanças no código (RFC, PR).
3. Melhoria no acompanhamento das métricas de desempenho que utiliza a API User Timing (PR, na sigla em inglês).

Também estamos explorando outros recursos para melhorar a experiência do usuário e do desenvolvedor no uso do Next.js, como:

• Ativa 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

O 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 para melhorar o desempenho de diferentes ferramentas, expandimos o fundo de framework para oferecer apoio monetário a mais frameworks e bibliotecas de código aberto. Com nosso recente suporte à Nuxt.js, alguns recursos serão lançados em breve, incluindo a renderização de servidor mais inteligente e as otimizações de imagem.

Babel

Também progredimos na melhoria do desempenho de uma ferramenta subjacente importante em quase todos os frameworks mencionados, o Babel.

O Babel compila códigos com sintaxes mais recentes que podem ser entendidos por diferentes navegadores. É comum usar @babel/preset-env para navegadores modernos, em que diferentes destinos 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 uma sintaxe moderna em uma mais antiga para evitar bugs do navegador, o preset-modules corrige cada bug específico transformando-o na sintaxe moderna mais próxima possível e não corrompida. Isso resulta em um código moderno que pode ser enviado quase sem modificações para a maioria dos navegadores.

Os desenvolvedores que já usam o preset-env também vão se beneficiar dessas otimizações sem precisar fazer nada, já que elas também serão incorporadas ao preset-env em breve.

A seguir

Trabalhar em estreita colaboração com frameworks e bibliotecas de código aberto para fornecer experiências melhores ajuda a equipe do Chrome a perceber o que é fundamentalmente importante para usuários e desenvolvedores.

Se você trabalha em um framework da Web, uma biblioteca de interface ou qualquer forma de ferramentas da Web (bundler, compilador, linter), inscreva-se para o fundo de framework.