Na equipe do Chrome, nós nos preocupamos com a experiência do usuário e com um ecossistema da Web próspero. Queremos que os usuários tenham a melhor experiência possível na Web, não apenas com documentos estáticos, mas também quando usam aplicativos avançados e altamente interativos.
Ferramentas e frameworks de código aberto desempenham um papel importante ao permitir que os desenvolvedores criem apps modernos para a Web, além de oferecer suporte a boas experiências para o desenvolvedor. Essas estruturas e ferramentas capacitam empresas de todos os tamanhos, bem como pessoas que criam para a Web.
Acreditamos que os frameworks também podem desempenhar um grande papel em ajudar os desenvolvedores com aspectos importantes de qualidade, como desempenho, acessibilidade, segurança e prontidão para dispositivos móveis. Em vez de pedir que todos os desenvolvedores e proprietários de sites se tornem especialistas nessas áreas e acompanhem as práticas recomendadas em constante mudança, o framework pode oferecer suporte a elas com soluções integradas. Isso capacita os desenvolvedores e permite que eles se concentrem na criação de recursos do produto.
Em poucas palavras, nossa visão é que um alto padrão de qualidade de UX se torne um efeito colateral do desenvolvimento para a Web.
Aurora: uma colaboração entre o Chrome e ferramentas e frameworks da Web de código aberto
Por quase dois anos, trabalhamos com alguns dos frameworks mais conhecidos, como Next.js, Nuxt e Angular, para melhorar o desempenho na Web. Também financiamos ferramentas e bibliotecas conhecidas, como Vue, ESLint e webpack. Hoje, estamos nomeando essa iniciativa: Aurora.
Uma aurora é uma luz natural que brilha no céu. Enquanto tentamos ajudar as experiências do usuário criadas com frameworks a brilhar e brilhar, pensamos que esse nome era uma escolha adequada.
Nos próximos meses, compartilharemos muito mais detalhes sobre o Aurora. Essa é uma colaboração entre uma pequena equipe de engenheiros do Chrome (com o codinome interno WebSDK) e autores de frameworks. Nosso objetivo é proporcionar a melhor experiência do usuário possível para apps de produção, independentemente do navegador em que você esteja renderizando.
Qual é nossa estratégia?
No Google, aprendemos muito ao usar frameworks e ferramentas para criar e manter aplicativos da Web em grande escala, como a Pesquisa Google, o Maps, a Pesquisa por imagens, o Google Fotos etc. Descobrimos como as estruturas podem desempenhar um papel crucial na qualidade previsível do app, fornecendo padrões fortes e ferramentas opinativas.
Os frameworks têm uma vantagem única para influenciar o DX e a UX, já que abrangem todo o sistema: o cliente e o servidor, os ambientes de desenvolvimento e produção, além de integrarem ferramentas como compilador, bundler, linter etc.
Quando as soluções são incorporadas à estrutura, as equipes de desenvolvedores podem usá-las e concentrar seu tempo no que mais importa para o produto: entregar ótimos recursos para os usuários.
Enquanto trabalhamos para melhorar as ferramentas que residem em cada camada da pilha, frameworks como Next.js, Nuxt e Angular CLI gerenciam todas as etapas do ciclo de vida de um aplicativo. Por esse motivo, e como a adoção do React é a maior dentro do ecossistema principal do framework de interface, a maioria das nossas otimizações começou com a comprovação no Next.js antes de expandir para o restante do ecossistema.
O Aurora promove o sucesso em escala trazendo soluções para a camada certa de conjuntos de tecnologias conhecidos. Ao preencher a lacuna entre navegadores e frameworks, possibilita que a alta qualidade seja um efeito colateral do desenvolvimento para a Web e, ao mesmo tempo, atua como um ciclo de feedback para melhorar a plataforma da Web.
Qual é nosso processo de trabalho?
Nossos princípios sobre como o Aurora une navegadores e o ecossistema de desenvolvedores são: humildade, curiosidade, investigação científica e pragmatismo. Trabalhamos com autores de estruturas em melhorias, colaboramos com a comunidade e fazemos a devida diligência antes de encerrar qualquer alteração.
Para resumir as etapas que seguimos para qualquer novo recurso em que trabalhamos:
- Identifique dificuldades na experiência do usuário em uma pilha conhecida usando apps representativos.
- Crie protótipos de soluções que resolvam esse problema, com ênfase em "padrões fortes".
- Verifique o recurso com outra pilha de framework para garantir que ele seja adaptável.
- Valide o recurso fazendo testes com alguns apps de produção, geralmente com testes de laboratório para o desempenho.
- Impulsione o design usando o processo RFC, abordando o feedback da comunidade.
- Coloque o elemento em uma pilha popular, geralmente atrás de uma bandeira.
- Ative o recurso em um app de produção representativo para avaliar a qualidade e a integração do fluxo de trabalho do desenvolvedor.
- Meça a melhoria do desempenho rastreando as métricas em apps de produção representativos que adotaram o recurso ou fizeram upgrade.
- Ative o recurso como o padrão na pilha para que todos os usuários que fizerem upgrade se beneficiem.
- Depois de comprovar isso, trabalhe com outras estruturas para lançar o recurso.
- Identifique lacunas na plataforma da Web com um ciclo de feedback.
- Passe para os próximos problemas.
As ferramentas e plug-ins subjacentes (webpack, Babel, ESLint, TypeScript etc.) são compartilhados em muitos frameworks. Isso ajuda a criar efeitos de ondulação, mesmo ao contribuir para uma única pilha de framework.
Além disso, o Chrome Framework Fund é compatível com ferramentas e bibliotecas de código aberto com financiamento. Esperamos que haja sobreposição suficiente nos problemas e nas camadas de solução dos nossos esforços acima para converter para outros frameworks e ferramentas, mas sabemos que podemos fazer mais. Por isso, queremos fazer nossa parte para garantir que as bibliotecas e os frameworks ajudem os desenvolvedores a ter sucesso. Esse é um motivo pelo qual continuaremos a investir no Chrome Framework Fund. Até o momento, ela oferecia suporte ao Webpack 5, Nuxt e performance e melhorias ao ESLint.
O que nosso trabalho desbloqueou até agora?
Nosso trabalho tem como foco otimizações básicas para recursos como imagens, JS, CSS e fontes. Enviamos diversas otimizações para melhorar os padrões de vários frameworks, incluindo:
- Um componente de imagem no Next.js que encapsula as práticas recomendadas para o carregamento de imagens, seguida por uma colaboração com o Nuxt. O uso desse componente resultou em melhorias significativas nos tempos de exibição e na mudança de layout. Por exemplo: redução de 57% na Maior exibição de conteúdo e de 100% na Mudança de layout cumulativa em nextjs.org/give.
- In-line automatizado de CSS para declarações de fontes da Web no momento da criação. Este recurso chegou ao Angular (Google Fonts) e Next.js (Google Fonts e Adobe Fonts) que resultou em melhorias importantes para a Largest Contentful Paint e a Primeira exibição de conteúdo (exemplo).
- In-line de CSSs essenciais usando Critters no Angular e no Next.js para reduzir os tempos de exibição. Resultou em uma melhoria de 20 a 30 pontos nas pontuações de desempenho do Lighthouse em um app Angular comum e de grande escala, quando isso foi combinado com o recurso de fontes in-line de CSS.
- Suporte a ESLint pronto no Next.js, que inclui um plug-in personalizado e uma configuração compartilhável para facilitar a detecção de problemas comuns específicos do framework no tempo de compilação, resultando em um desempenho de carregamento mais previsível.
- Uma introdução de uma recamada de desempenho integrada em Criar app React e Next.js para permitir insights mais fáceis sobre o desempenho da página usando Web Vitals e outras métricas personalizadas.
- Bloco granular enviado no Next.js e no Gatsby, resultando em uma redução de 30 a 70% nos tamanhos de pacote e melhorando o desempenho do armazenamento em cache. Esse agora é o padrão no Webpack 5.
- Um bloco de polyfill separado para navegadores mais antigos, em colaboração com a equipe do Next.js, para melhorar o tamanho do pacote em navegadores modernos.
Todos esses recursos foram automatizados para serem ativados por padrão ou precisam apenas de uma ativação simples. Isso é essencial para garantir que os desenvolvedores possam aproveitar os benefícios facilmente sem aumentar a complexidade do fluxo de trabalho.
O que planejamos para 2021?
Até o fim deste ano, nosso foco será ajudar as pilhas de framework a melhorar a experiência do usuário e o desempenho delas em métricas como as Core Web Vitals. Esse trabalho incluirá:
- Conformidade para aplicar as práticas recomendadas. Confira a postagem do blog para saber mais.
- Otimizamos o desempenho do carregamento inicial com base nas nossas colaborações para otimizar Imagens, Fontes e CSS crítico.
- Carregar scripts de terceiros (3Ps) com impacto mínimo na performance desenvolvendo nossa base de trabalho em um componente Script e realizando uma pesquisa profunda sobre a melhor forma de ordenar e sequenciar terceiros.
- Desempenho do JavaScript em grande escala (por exemplo, com suporte a componentes do servidor React no Next.js).
Nossa equipe pretende postar informações mais frequentes sobre RFCs e documentos de design para essas ideias para que qualquer framework ou desenvolvedor que queira acompanhar possa fazer isso.
Conclusão
A equipe do Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Kasource, Gerald, Ralph, Addy, Kara, Keen, Kasourced Nujs) estão ansiosas para continuar trabalhando de perto com o framework aberto e padrão do Angular. Vamos aumentar nosso engajamento para cobrir ainda mais estruturas e ferramentas com o tempo. Acesse este espaço para ver mais postagens do blog, palestras e RFCs da nossa equipe no próximo ano :)