React Native: Entendendo como funciona

O React Native já faz parte do meu dia-a-dia há alguns anos, foi com ele que pude ter um primeiro contato com o mundo de desenvolvimento mobile.

Hoje, quero compartilhar um pouco sobre como o React Native funciona e como ele torna possível o desenvolvimento de aplicativos para Android e iOS.

Estrutura

“O React Native permite que os desenvolvedores que conhecem React criem aplicativos nativos.” É assim que somos inicialmente apresentados a esse framework em umas das primeiras páginas da doc oficial: Get Started with React Native.

Muitas vezes, essa apresentação inicial do React Native como um framework para criar aplicativos nativos pode parecer confusa, pois ele na verdade não gera nenhum código nativo.

Pelo menos não diretamente, como faria um app escrito em Swift (iOS) ou Kotlin (Android). Em vez disso, ele usa uma ponte, a Bridge, para o código JavaScript conseguir se comunicar com as APIs e componentes nativos.

Isso se torna mais claro ao compararmos com outros frameworks, como o Cordova e Ionic que rodam parte da interface do app em cima de uma WebView.

“...WebView é um componente de software de grande escala que permite o uso de conteúdo web dentro de aplicativos...” - Wikipedia

Diferente deles, o React Native realmente utiliza elementos nativos para a interface do usuário. Isso significa que um Text no React Native se transforma em um UITextView no iOS e um TextView no Android.

React NativeAndroidiOSWeb
<View><ViewGroup><UIView><div>
<Text><TextView><UITextView><p>
<Image><ImageView><UIImageView><img>

Construindo interfaces

No React Native, tudo é baseado em views! Bem... digo, a construção da interface do usuário é toda baseada em views.

Uma view é um bloco de UI usado para compor a tela, seja uma imagem, um texto ou um botão, todos são tipos de views.

Em desenvolvimento nativo, as views são escritas usando Kotlin/Java no Android e Swift/Objective-C no iOS. Já no React Native, essas views são criadas com JSX e, durante a execução, esses componentes React são convertidos para os equivalentes nativos no Android e no iOS.

import React from 'react';
import { Text, View } from 'react-native';
 
const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Text>Salve!</Text>
    </View>
  );
};
 
export default App;

Para entender um pouco mais de React, recomendo ler essa seção sobre Fundamentos do React lá na doc oficial. Ela oferece uma boa introdução ao React no contexto do React Native.

Arquitetura

Ali no começo eu falei brevemente sobre a Bridge, a primeira arquitetura do React Native. "Primeira", pois uma segunda e nova arquitetura vem sendo desenvolvida desde 2018 pelo time do React Native.

React Native's New Architecture - Parashuram N - React Conf 2018

Mas por que uma nova arquitetura? Qual o problema da Bridge? 🤔

Nessa arquitetura com a Bridge, o JavaScript e o lado Nativo não sabem realmente da existência um do outro, eles não tem uma referência. Para eles se comunicarem eles dependem das trocas de mensagens JSON assíncronas que são serializadas e desserializadas pela Bridge. Isso introduz uma camada assíncrona que tem impacto na performance em algumas situações.

Imagine o seguinte cenário:

  • App com uma grande quantidade de dados para mostrar na tela;
  • Diversos eventos;
  • Múltiplas atualizações de estado em resposta desses eventos ocorrendo.

Em uma situação assim, a Bridge ira ficar sobrecarregada... um gargalo surge! Todo esse processo das trocas de mensagens JSON, serialização e desserialização dos dados irão gerar um "lag" na aplicação, fazendo aparecer, por exemplo, flashes de tela branca e delays na renderização de alguns itens durante esses processos.

🫠 . . .

Para resolver isso, a nova arquitetura aparece!

Nela, a Bridge é substituída pelo Fabric, um novo sistema de renderização do React Native que permite criar e manipular views diretamente na thread nativa, de forma mais eficiente.

Além disso, entram também os Turbo Modules, uma abordagem diferente para a interação com o lado nativo, permitindo que o JavaScript carregue módulos nativos apenas quando necessário.

Com essa nova arquitetura, o combo Fabric e Turbo Modules permitem que o JavaScript mantenha uma referência direta aos componentes e módulos nativos, reduzindo bastante a comunicação assíncrona da Bridge e melhorando significativamente a performance do app.

A nova arquitetura ficou por um bom tempo como experimental, mas já passou a ser habilitada por default em projetos React Native 0.76+.

React Native 0.76 - New Architecture by default, React Native DevTools, and more

Há um grande esforço do time da Meta em melhorar documentações e suporte a nova arquitetura. Afinal, querem garantir que a comunidade e inúmeras bibliotecas façam a migração para a nova arquitetura.

Esse é o futuro do framework.

Finalizando

É isso! Esta foi uma visão mais superficial sobre o funcionamento do React Native. Não cheguei a me aprofundar muito em alguns conceitos... era pra ser uma leitura mais rápida.

Mas pretendo escrever mais sobre em breve.

Valeu! 😁

Referências

Core Components and Native Components
Architecture Overview
New Architecture is here
Aplicações hibridas otimizam o webview?
The New React Native Architecture Explained