React Native — Nova Arquitetura — Fabric

Newerton Vargas de Araujo
2 min readSep 20, 2022

A Nova arquitetura do React Native (0.68) está sendo lançada em 2022, que possui alguns dos novos termos como JSI, Fabric, Turbo Module e Codegen. Aqui faremos uma comparação entre a arquitetura existente e a nova arquitetura.

Fabric Architecture

Interface JavaScript (JSI)

Arquitetura atual/antiga:

  • Havia uma ponte entre JavaScript e o Nativo.
  • A interação entre o JavaScript e o Nativo era assíncrona.
Arquitetura atual/antiga

Nova arquitetura:

Arquitura nova — JSI
  • A pronte entre o Javascript e o Nativo foi substituído pelo JSI.
  • JSI desacoplado do Javascript.
  • JSI é escrito em C++.

Fabric

Arquitetura atual:

  • Usando a ponte entre o Javascript e o Nativo.
  • Taxa de transferência lenta.
  • Problemas de desempenho em alguns dos casos de uso, como a lista de rolagem de implementação devido as threads do Javascrript e UI, não estão sincronizados.

Nova arquitetura:

  • Fabric — Novo sistema de renderização.
  • Interações de IU executadas de forma síncrona.
  • A árvore de sombra será imutável e compartilhada entre threads JS e UI.

Turbo Modules

Arquitetura atual:

  • Todos os módulos precisam ser pré-carregados antes que o aplicativo seja iniciado, isso causará problemas de desempenho quando o aplicativo for iniciado.

Nova Arquitetura:

  • Mantém a referência dos módulos e permite que eles sejam carregados sempre que necessário.
  • Melhore o tempo de início dos aplicativos.

Codegen

  • Automatize a compatibilidade entre o thread JS e o thread nativo.
  • Gere código nativo em tempo de compilação em vez de tempo de execução.
  • Defina os elementos de interface usados pelo Turbo Module e pelo Fabric

--

--

Newerton Vargas de Araujo

Software Enginner | Next.js | NestJs | React Native | Flutter | DevOps