Meta lança compilador React de código aberto

Meta lançou um compilador de código aberto para React na quarta-feira na React Conference, que foi realizada em Las Vegas e transmitida ao vivo. Joe Savona, membro da equipe React da Meta e engenheiro de interface de usuário, disse que a equipe vem desenvolvendo o compilador nos últimos anos.

“O React Compiler otimiza automaticamente seus componentes e ganchos, de modo que apenas as partes mínimas de sua IU sejam atualizadas conforme o estado muda”, disse Savona ao público. “Então isso parece muito mágico.”

Por que um compilador React?

Por que uma linguagem interpretada precisaria de um compilador? Savona comparou o React Compiler ao Hermes da Meta e ao V8 da V8 Alliance, que são mecanismos JavaScript que incluem compiladores.

“O React Compiler é mais parecido com o TypeScript, ou com os compiladores dentro dos motores JavaScript, como V8 ou Hermes”, disse ele. “Ele divide seu código em expressões individuais e cria um fluxo de controle e um gráfico de fluxo de dados. Ele executa otimizações sofisticadas, como eliminação de código morto, propagação constante, inferência de tipo, até mesmo análise de alias e muito mais.”

Essas otimizações normalmente apareceriam dentro de um mecanismo JavaScript ou compilador para linguagens como Rust ou C++, acrescentou. O React Compiler aplica essas ideias ao JavaScript para melhorar o desempenho sem sacrificar a experiência do desenvolvedor, continuou ele. O código não muda, mas os aplicativos e atualizações ficam mais rápidos por padrão, disse ele.

“Na verdade, nosso código fica ainda mais limpo e conciso, porque não precisamos de memorização manual”, acrescentou Savona. Memoização é uma técnica de otimização que aproveita o cache.

Aplicando o compilador React ao código

Ele apontou para uma demonstração anterior de um media player construído com React. Não há uso de chamadas de memorando, nem funções de retorno de chamada aleatórias e desnecessárias, mas há muitas informações contidas no código nas quais os desenvolvedores nem sempre pensam, disse ele.

“Por exemplo, considere a lista de músicas filtradas”, disse ele. “Obviamente, o React terá que filtrar a lista de músicas novamente e atualizar a playlist. Este código também nos diz o inverso; se uma música não mudar, então o React não deveria ter que atualizar as músicas filtradas e não precisa atualizar a playlist.”

É exatamente isso que acontece com o compilador habilitado, acrescentou: não há necessidade de atualizar a playlist quando a música não muda.

“Somos capazes de entender isso porque JavaScript e React têm regras claras sobre como funcionam e aprendemos essas regras”, disse Savona. “Nós os usamos todos os dias enquanto lemos código, escrevemos código, depuramos código e ocasionalmente testamos código.”

O compilador pode ser ensinado a compreender essas regras. Então ele pode “ver” o código “da mesma maneira que nós, exceto que é muito mais completo”, acrescentou.

Ele pode aplicar o mesmo processo a todos os valores do código, criando um gráfico de computação de como os dados se movem pela interface do usuário, disse ele.

“O compilador conhece as regras do React e algumas coisas extras”, continuou ele. “Por exemplo, ele sabe que as funções de estado definido não mudam de fato, então o compilador não precisa considerar se esse valor pode ser atualizado. Assim, podemos remover essa vantagem de dependência.”

Então a única coisa que precisa ser atualizada é a reprodução atual, e não a lista de reprodução inteira.

“A melhor parte é que todas essas informações vêm dos mesmos componentes e ganchos do React que você já está escrevendo hoje”, disse ele. “Não há API para aprender. Não há necessidade de alterar a maneira como você escreve o código. Podemos simplesmente aproveitar todas as informações que já estão no seu código hoje.”

Esses tipos de atualizações precisas da interface do usuário às vezes são chamados de reatividade refinada, acrescentou.

Em seguida, Mofei Zhang, engenheiro de software da Meta, subiu ao palco para mostrar o desempenho do compilador quando usado em aplicativos da Meta. Em páginas com muita interatividade ou componentes, Meta descobriu que os desenvolvedores começaram a fazer concessões.

“Uma pequena amostra do código que vimos era muito difícil de ler”, disse Zhang. “Esse código continha muitas otimizações manuais, o que ajudou a tornar a IU mais ágil, mas também tornou o código muito mais difícil de raciocinar.”

Ela mostrou um trecho de código que continha quase 20 locais onde o desenvolvedor otimizou manualmente um objeto.

Meta Tries React Compiler no Instagram e Quest

Então, em 2023, a Meta começou a lançar o React Compiler em dois aplicativos: Instagram.com e sua loja Quest, a loja de aplicativos para dispositivos Quest VR da Meta. A versão otimizada para compilador foi duas vezes mais rápida que antes, disse ela. Os tempos de carregamento inicial e de navegação entre páginas melhoraram em até 12%. E não houve impacto no uso da memória nem nas falhas gerais, que podem refletir erros de falta de memória. O carregamento de missões para navegação foi mais rápido em pelo menos 4%. O Instagram obteve uma melhoria média de 3% em todas as rotas.

“Na Meta, isso foi realmente um grande negócio”, disse Zhang. “Para contextualizar esses números, os engenheiros vasculharam cada parte desses aplicativos para adicionar milhares de chamadas de memorização.”

Normalmente, apenas uma melhoria de 1 ou 2 pontos percentuais nas métricas, como a primeira vez que pinta, em uma página específica seria um grande negócio, acrescentou ela.

“O React Compiler melhorou significativamente o desempenho de quase todas as páginas em que foi lançado”, disse ela. “Em aplicativos menos otimizados, descobrimos que o React Compiler pode adicionar mais de 15 vezes a quantidade de memorização já presente no código-fonte.”

O uso do compilador permitirá que os desenvolvedores obtenham interações rápidas em aplicativos que não foram otimizados manualmente, ao mesmo tempo que melhora a legibilidade e a manutenção de aplicativos já otimizados, concluiu ela. Os desenvolvedores podem até eliminar a memoização codificada manualmente.

“Acabamos de ver como o React Compiler pode até mesmo aumentar o limite de quão rápido os aplicativos podem ser, pois pode otimizar muito mais do que os desenvolvedores podem com memoização aninhada e condicional, bem como análise estática sofisticada”, disse ela. “Continuamos a lançar ainda mais aplicativos para iterar no compilador.”

Além de seu código-fonte aberto, há o playground do React Compiler para desenvolvedores que desejam explorar como ele funciona.

Savona subiu ao palco para encerrar.

“O React Compiler permite que os desenvolvedores continuem escrevendo exatamente o mesmo código com o qual estão acostumados”, disse ele. “Na verdade, como vimos, podemos parar de usar a memorização manual. … O React Compiler pode oferecer melhorias significativas de desempenho para aplicativos do mundo real.”

O post Meta Releases Open Source React Compiler apareceu pela primeira vez em The New Stack.