Conheça o Aurora

Shubhie Panicker
Shubhie Panicker
Addy Osmani
Addy Osmani
Houssein Djirdeh
Houssein Djirdeh

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.

Logotipo da Aurora

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.

Gráfico que mostra
  ferramentas comuns em frameworks
Ferramentas comuns usadas por desenvolvedores de framework

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.

Processo conduzido por parceiros da Aurora para melhorar as métricas das Core Web Vitals

Para resumir as etapas que seguimos para qualquer novo recurso em que trabalhamos:

  1. Identifique dificuldades na experiência do usuário em uma pilha conhecida usando apps representativos.
  2. Crie protótipos de soluções que resolvam esse problema, com ênfase em "padrões fortes".
  3. Verifique o recurso com outra pilha de framework para garantir que ele seja adaptável.
  4. Valide o recurso fazendo testes com alguns apps de produção, geralmente com testes de laboratório para o desempenho.
  5. Impulsione o design usando o processo RFC, abordando o feedback da comunidade.
  6. Coloque o elemento em uma pilha popular, geralmente atrás de uma bandeira.
  7. Ative o recurso em um app de produção representativo para avaliar a qualidade e a integração do fluxo de trabalho do desenvolvedor.
  8. Meça a melhoria do desempenho rastreando as métricas em apps de produção representativos que adotaram o recurso ou fizeram upgrade.
  9. Ative o recurso como o padrão na pilha para que todos os usuários que fizerem upgrade se beneficiem.
  10. Depois de comprovar isso, trabalhe com outras estruturas para lançar o recurso.
  11. Identifique lacunas na plataforma da Web com um ciclo de feedback.
  12. 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 :)