Arquitetura Bridgeless redefine a velocidade das aplicações!

React Native lançou oficialmente a versão 0.76, um lançamento que leva o framework para o próximo nível, habilitando uma nova arquitetura como configuração padrão. Nas versões anteriores, esse recurso era opcional e exigia que os desenvolvedores fizessem login. Mas agora, todos os novos projetos React Native virão com esta estrutura de conversão, muitas vezes chamada de “Sem ponte”Estruturas. Este blog aborda o que torna a nova arquitetura React Native uma virada de jogo.

A Bridgeless Architecture tem sido um tema quente no ano passado, e por boas razões. Mas o que você está fazendo? “Sem ponte”O que significa e por que é importante? Para apreciar os benefícios do novo layout, vamos primeiro revisar as limitações do modelo anterior e como esta atualização se sai.

Recapitulação da arquitetura antiga

Os dois mundos do React Native são – JavaScript e nativo.
Existem três tipos:
um. Sequência JavaScript: Ele lida com todas as implementações do código do pacote JavaScript.
b. Thread/UI nativo principal: Gerencia módulos nativos e atualizações na interface do usuário.
c. Série de fundo/sombra: Também conhecida como corda de Yoga, é responsável por calcular a forma e a forma dos objetos.

A interface entre JavaScript e código nativo é uma “ponte”.
Os componentes são formatados em JSON na camada JS e são enviados de forma semelhante através de uma ponte para a camada nativa, que recodifica e converte o componente em um componente nativo para ser renderizado na tela. E a camada nativa envia JSON de volta quando ocorre um evento.

Problemas de desempenho na arquitetura antiga do React Native

Molduras sólidas ou ocas
Quadros perdidos durante a animação
Tempos de inicialização lentos
Quadros piscando na mudança de tela
Redundância de nós e vazamentos de memória
Bloqueio de threads de UI
Desempenho inconsistente entre plataformas (iOS vs. Android)

Principais objetivos da nova arquitetura do React Native:

O novo layout foi projetado para atender às limitações da versão anterior. Seus principais objetivos incluem:

🚀 Tempos de inicialização rápidos
⚙️ Suporte de renderização única
📱 Melhor capacidade de resposta do aplicativo
🌐 Compatibilidade entre plataformas
🛠️ Taxas de acidentes reduzidas
💾 Gerenciamento de memória aprimorado
🔄 Versão compatível

Nova Arquitetura

A nova arquitetura do React Native é uma reescrita completa de seu sistema central, incluindo como os componentes são renderizados, como a abstração javascript interage com as abstrações nativas e como as tarefas/atualizações são organizadas em diferentes threads.

A Nova Arquitetura tem 4 componentes principais:

Novo Módulo Nativo
Novo doador
Ciclo de eventos
Removendo a ponte

Novo Módulo Nativo

Novo módulo nativo escrito inteiramente em C++ que reescreve como JS e plataformas nativas interagem.

Novas habilidades:

Atualizações sincronizadas de e para o tempo de execução nativo

A camada JS agora pode se comunicar com a camada nativa diretamente por meio da Interface JavaScript (JSI), sem uma ponte assíncrona. Os Módulos Nativos Personalizados agora podem chamar uma função de forma assíncrona, retornar um valor e passar esse valor para outra função do Módulo Nativo.

// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
 // ❌ value cannot reference a native object
 nativeModule.doSomething(value);
});

Na Arquitetura Antiga, a resposta de uma chamada de função nativa pode ser tratada fornecendo um retorno de chamada e o valor retornado precisa ser validado.

// ✅ Sync response from Native Module
const value = nativeModule.getValue();

// ✅ value can be a reference to a native object
nativeModule.doSomething(value);

Na Nova Arquitetura, as chamadas e respostas de funções nativas são consistentes.

Digite segurança entre JS e código nativo

Codegen permite que os módulos definam um contrato rigidamente digitado entre JavaScript e camadas nativas, reduzindo erros de tipo entre fronteiras – uma fonte comum de falhas em aplicativos de plataforma cruzada – ao mesmo tempo que gera automaticamente código padrão.

Compartilhamento de código entre plataformas

O novo sistema de módulos oferece suporte a módulos C++, permitindo interoperabilidade entre plataformas Android, iOS, Windows e macOS. Escrever módulos em C++ permite melhor gerenciamento de memória e otimização de desempenho.

O módulo lento carrega automaticamente

Os módulos agora são carregados lentamente, reduzindo o tempo de inicialização, carregando-os na memória somente quando necessário, garantindo um desempenho mais rápido à medida que a complexidade do aplicativo aumenta.

Ele oferece suporte a atualizações síncronas e assíncronas. Essa abordagem híbrida traz um enorme salto na capacidade de resposta dos aplicativos. As atualizações sincronizadas garantem que as interações do usuário sejam processadas rapidamente, sem esperar por tarefas em segundo plano, criando uma experiência integrada e nativa. Enquanto isso, as atualizações síncronas permitem que as tarefas em segundo plano sejam executadas sem problemas, sem interromper a interface principal. Essa renderização de modo duplo atinge o equilíbrio perfeito entre desempenho e usabilidade, fazendo com que os aplicativos pareçam mais rápidos, mais fluidos e mais otimizados para situações do mundo real.

O novo doador: principais destaques

1.Processamento multithread

As operações de entrega são distribuídas entre threads com base na prioridade, reduzindo a carga no thread principal.

Benefícios: atualizações críticas (por exemplo, animações, entrada do usuário) são tratadas imediatamente, enquanto tarefas em segundo plano (por exemplo, atualizações de layout) são executadas em threads separados.

2. Árvore de IU imutável

A UI é armazenada em snapshots imutáveis, garantindo atualizações seguras para threads.
Várias versões de UI podem ser processadas simultaneamente, permitindo atualizações paralelas e renderização eficiente

3.Pós-processamento com múltiplas árvores contínuas

As atualizações em segundo plano continuam sem bloquear o thread principal.
Características: transições suaves, atualizações consistentes e processamento disruptivo de tarefas urgentes.

4.O Estudo da Estrutura Harmoniosa

As informações de layout podem ser acessadas instantaneamente em todos os tópicos para atualizações rápidas (por exemplo, reposicionamento de dicas de ferramentas).

Por que é importante?

Reação: Capturando a entrada imediata do usuário.
Desbloqueando atualizações: as tarefas em segundo plano não interferem na IU.
Consistência: Ambiente de UI seguro e previsível.

Experiência Fluida: transições perfeitas e atualizações visualmente discretas.

Ciclo de eventos

1.Um loop de eventos bem definido

Alinha o processamento de threads JavaScript para React Native com React DOM e padrões da web, simplificando o desenvolvimento entre plataformas.
Ele permite um fluxo de trabalho previsível e melhor compatibilidade de comportamento entre React DOM e React Native.

2.Benefícios

Atualizações interrompíveis: tarefas menos importantes podem ser suspensas para eventos urgentes do usuário, melhorando a capacidade de resposta.
Alinhamento da Web: corresponde à especificação da Web para eventos, temporizadores e funções, melhorando a familiaridade e o compartilhamento do código.

Recursos básicos do navegador: Preparando o React Native para suporte futuro de recursos como MutationObserver e IntersectionObserver.

3.O Estudo da Estrutura Harmoniosa

Ele suporta useLayoutEffect para leitura e atualizações de layout adaptáveis no mesmo quadro, garantindo um layout de IU preciso.

Essas mudanças tornam o React Native mais previsível, responsivo e compatível com os padrões de desenvolvimento web, abrindo caminho para melhorias futuras.

Removendo a ponte

Bridging traz comunicação direta entre JavaScript e código nativo usando a interface JavaScript.

Essa remoção melhorou o tempo de inicialização.

Na Arquitetura Antiga na arquitetura antiga, para fornecer métodos globais em JavaScript, teremos que inicializar o módulo em JavaScript na inicialização, o que causa um pequeno atraso na inicialização da aplicação.

// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
 NativeTimingModule.setTimeout(timer);
};

// App.js
setTimeout(() => {}, 100);

Na Nova Arquitetura com JSI, React Native agora fornece comunicação direta entre JavaScript e código nativo, ignorando a necessidade de Bridge. Este ajuste leva a:

Tempos de inicialização rápidos: os módulos não requerem mais pré-inicialização em JavaScript para iniciar o aplicativo corretamente.
Relatório de erros aprimorado: o diagnóstico aprimorado de falhas de JavaScript facilita a depuração, especialmente durante a inicialização do aplicativo.
Falhas reduzidas: a remoção do comportamento indefinido associado ao Bridge melhora a estabilidade do aplicativo.

// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);
// App.js
setTimeout(() => {}, 100);

Compatibilidade com versões anteriores e planos futuros

Embora a nova arquitetura reduza a dependência do Bridge, ela permanece disponível para compatibilidade com versões anteriores, garantindo que os desenvolvedores possam migrar em seu próprio ritmo. Com o tempo, a ponte será completamente fechada à medida que os aplicativos usarem a Nova Arquitetura.

Migração Gradual para Atender Nativos 0,76

React Native 0.76 permite o Nova Arquitetura de novo Reação 18 por padrão, mas a adoção total requer uma migração gradual para desbloquear todos os benefícios, incluindo os mesmos recursos.

Pontos importantes

Desenvolvimento inicial: A maioria dos aplicativos pode atualizar para 0,76 com esforço moderado. A camada de interoperabilidade garante que os aplicativos sejam executados na Nova Arquitetura, ao mesmo tempo em que oferecem suporte ao código legado.
Limitações da camada de interoperabilidade: Shadow Nodes personalizados e recursos associados não são suportados na camada de interoperabilidade.
Suporte React compatível: Para usar os mesmos recursos, os aplicativos devem seguir i Regras de reação e migre o código JavaScript usando o Guia de desenvolvimento do React 18.

Estratégia de Migração

Atualize para a nova arquitetura sem quebrar o código existente.
Migrar gradativamente módulos e áreas para a Nova Arquitetura.
Após a migração completa, habilite os mesmos recursos nos ambientes novos e atualizados.

Suporte da Biblioteca

Acabou 850 bibliotecas popularesincluindo aqueles com mais de 200 mil downloads semanais, já são compatíveis.
Verifique a compatibilidade da biblioteca em reactnative.directory.

A conclusão

A mudança para o React Native 0.76 e sua nova arquitetura representa um grande avanço para os desenvolvedores, oferecendo desempenho aprimorado, fluxos de trabalho mais suaves e acesso a recursos modernos como o Concurrent React. Ao fornecer uma camada de interoperabilidade contínua, o React Native garante que os aplicativos existentes possam evoluir perfeitamente, ao mesmo tempo que permite que os desenvolvedores aproveitem todos os benefícios da Nova Arquitetura em seu próprio ritmo.

Com forte apoio da comunidade React Native e ampla compatibilidade de bibliotecas, este desenvolvimento marca um passo importante em direção a uma estrutura rápida, responsiva e preparada para o futuro. Ao adotar essas mudanças, os desenvolvedores podem criar aplicativos escalonáveis e de alto desempenho que aproveitam o melhor das práticas de desenvolvimento nativo e web.

Source link