O React Native é fornecido com várias vantagens, como suporte a várias plataformas, atualizações OTA, recarga ao vivo, eficiência de custos etc. passes necessários sobre a ponte.

Mas como funciona a arquitetura atual?

A arquitetura do React Native depende de três threads: a) Thread da interface do usuário: Este é o principal thread do aplicativo usado para renderizar as visualizações do Android e do iOS. b) Shadow thread: É uma espécie de thread de fundo que calcula o layout dos elementos (usando Yoga ) antes de renderizar na plataforma host. c) JS thread: JS empacotado que é responsável por lidar com toda a lógica em seu aplicativo nativo de reação.

A interação entre esses threads não é direta e toda vez que um thread precisa interagir com o outro thread, ele tem que passar pela pesada tarefa de serialização e desserialização de dados para JSON para passar pela ponte. Isso resulta em cópias desnecessárias de dados e essa ponte pode ficar superlotada com bastante facilidade, pois as operações são assíncronas e não há tipagens rígidas.

Algumas limitações da arquitetura atual:
1. Javascript e lado nativo não estão cientes um do outro e dependem de mensagens JSON assíncronas.
2. Todos os módulos são carregados na inicialização, o que aumenta o tempo de interação.
3. Sem priorização de ações: Interações importantes do usuário não podem ser priorizadas sobre as outras ações.
4. Serialização da ponte
5. Os elementos da interface do usuário não são acessíveis diretamente do thread JS.

Apresentando o JSI

JSI traz uma grande mudança em como o javascript e a parte nativa interagem. Ele fornece uma comunicação direta entre os dois domínios com a ajuda de uma interface entre JS e C++. Usando a interface JavaScript, JS pode conter referência a objetos de host e chamar métodos neles. Com a ajuda do objeto host, agora podemos usar objetos nativos no contexto javascript. A ponte que era o maior gargalo está dividida em partes:

Tecido

O novo sistema de renderização criado pelo Facebook, que é a re-arquitetura do gerenciador de interface do usuário. Este renderizador é implementado em C++ e o núcleo é compartilhado entre as plataformas. Na implementação anterior, a criação do layout envolvia várias etapas, como serialização de JSON e saltos na ponte, que apresentavam grandes problemas quando a ponte era bloqueada, por exemplo: queda de quadro ao rolar por uma lista infinita. A nova implementação permite que o gerente de interface do usuário crie a Árvore Sombria diretamente em C++, o que aprimora muito a experiência ao reduzir o número de saltos entre domínios. As operações são síncronas e thread-safe que são executadas do React (JavaScript) para o renderizador (C++), geralmente no thread JavaScript. Também envolve menos serialização de dados, pois os valores do javascript podem ser selecionados diretamente do JSI. Esse controle direto também ajuda na priorização das ações, o renderizador agora pode priorizar certas interações do usuário para garantir que sejam tratadas em tempo hábil. Isso melhorará muito o desempenho em listas, navegação e manipulação de gestos.

Módulos Turbo

Na implementação anterior, não tínhamos a referência aos módulos nativos, então cada módulo era carregado na inicialização, o que aumenta o TTI (Time to Interactive), mas com os módulos turbo, podemos carregar lentamente os módulos conforme necessário, o que ajudará na melhoria do tempo de inicialização. Por exemplo: Se você tem um módulo para imprimir um documento a partir de um link, agora podemos carregar este módulo quando aterrissarmos na tela de impressão e não na inicialização do aplicativo que estava sendo feito na arquitetura anterior. A capacidade de escrever o módulo em C++ também aumenta a vantagem, pois reduz a implementação duplicada entre plataformas.

Codegen

Para unir tudo isso e tornar os dois reinos compatíveis, a equipe do React Native criou um verificador de tipo para automatizar a compatibilidade entre o lado JS e o lado nativo. Esta ferramenta é chamada Codegen. Ele usa uma abordagem modular, o que significa que qualquer linguagem Javascript tipada estaticamente pode ser suportada usando o analisador desse sistema. Usando o JavaScript digitado como a fonte da verdade, este gerador pode definir os arquivos de interface necessários para Fabric e TurboModules para enviar mensagens através dos domínios com confiança. O Codegen também fornece segurança de tipo de tempo de compilação, o que significa que ambos os ambientes podem executar comandos sem nenhuma verificação de tempo de execução, o que significa tamanho de código menor para enviar e execução mais rápida.
Como agora temos código C++ e C++ é fortemente tipado, estamos forçando nosso código JS a ser digitado, porque temos que definir tipos e não podemos escrever nenhum em nenhum lugar do código. Ele basicamente cria uma interface para você e agora como eles são gerados e estão em C++, podemos agora basicamente confiar nos dados que estão sendo enviados e não precisamos ir e voltar verificando os dados. Isso também significa que, usando as verificações de tipo, podemos identificar facilmente problemas durante a fase de desenvolvimento que podem ter resultado em travamentos fatais ou má experiência do usuário.

Algumas das principais vantagens do JSI

1. O código Javascript pode conter uma referência a qualquer elemento de interface do usuário nativa e chama os métodos nele (semelhante à manipulação de DOM na Web)
2. Vinculações rápidas e diretas ao código nativo que podem melhorar muito o desempenho, por exemplo, o MMKV usa JSI, que é aproximadamente 30 vezes mais rápido que o Asyncstorage.
3. Mecanismos diferentes do JavaScript Core podem ser usados.
4. Módulos nativos podem ser carregados quando necessário.
5. Verificação de tipo estático para tornar o código JS e nativo compatível.

O JSI nativo do React está atualmente em fase de lançamento experimental e, à medida que mais projetos adotarem essa mudança, saberemos mais sobre as limitações e o impacto da nova arquitetura, mas uma coisa é certa: o futuro do desenvolvimento de aplicativos react native e multiplataforma parece emocionante.