A história da reconstrução da stack tecnológica do Facebook

O Facebook, que começou com um PHP simples, passou por um processo de migração para React + Relay (GraphQL) para se adequar a este novo design, e compartilha o processo e as lições aprendidas

Aplicação de princípios básicos para um app rápido em CSS, JS, Data e Navigation

1. Enviar apenas os recursos necessários o mais rápido possível

2. Experiência de engenharia voltada para a experiência do usuário

CSS

• Redução de 80% do CSS com Atomic CSS, além de evitar o download de CSS desnecessário

• Uso de rems para acessibilidade; para reduzir bugs na conversão manual de px → rems, a ferramenta de build passou a fazer essa conversão automaticamente

• Uso de variáveis CSS para Theming (modo escuro)

• Uso de Inline SVG para evitar cintilação (em vez de colocar arquivos SVG em img). Com isso, a troca de cores também passou a ser possível em tempo de execução

JS

• Entrega de JS com code-splitting em 3 camadas, enviadas por etapa

Tier 1. Layout básico para mostrar rapidamente o skeleton da UI durante o carregamento

Tier 2. JS para renderizar completamente todo o conteúdo visível na tela. A tela deve estar totalmente funcional, e mesmo que código adicional seja carregado depois do Tier 2, a composição da tela não deve mudar

Tier 3. Tudo o que é necessário após a exibição da tela: código de logging, assinatura de atualizações em tempo real etc.

• Divisão de 500KB de JS em 50KB Tier 1, 150KB Tier 2 e 300KB Tier 3 → efeito de carregamento e exibição de tela concluídos muito rapidamente

• Graças à divisão, em testes A/B também passou a ser possível configurar para que cada lado receba apenas o código necessário

• Uso de recursos do Relay, que ajudam a criar apps React orientados por dados, para mudar o carregamento e trazer apenas os componentes necessários de acordo com os dados que serão buscados

• Introdução de um sistema de orçamento de JS por produto (JS Budget). O orçamento é definido com base em metas de performance, restrições técnicas e considerações do produto, evitando o crescimento do código ao longo do tempo.

Data

• Com Relay, toda a busca de dados foi padronizada para usar GraphQL

• Graças ao Relay, os dados necessários podem ser baixados em paralelo já na etapa de requisição da página, permitindo exibir a tela mais rapidamente

• Uso de @stream, uma extensão interna do GraphQL, para fazer com que itens como o feed de notícias sejam enviados gradualmente em uma única query, sem várias idas e voltas de rede

• @defer + React Suspense para carregar depois os dados que não são necessários imediatamente

Navigation

• Construção de um Route Map para reduzir o tempo de carregamento de recursos e as idas e voltas de rede ao carregar uma nova página na navegação SPA

• Carregamento das informações de rota no Route Map, divididas, o mais rápido possível sempre que necessário

• Prefetch de recursos o mais cedo possível (prefetch no hover, busca de código e dados no mouse down, e mudança de estado do React quando ocorre o clique)

• Em vez de mostrar uma tela vazia durante a navegação, uso de transições do React Suspense para continuar exibindo a rota atual até que a nova rota seja carregada

• Uso de EntryPoints (pequenos arquivos que encapsulam pontos de ramificação de código e queries de dados) para paralelizar o download de código e dados

[xguru]

Coisas que descobri no CSS do novo design do Facebook https://pt.news.hada.io/topic?id=1819

Também vale a pena consultar o texto.

[xguru]

Relay - O cliente GraphQL pronto para produção para React https://relay.dev/