A Guerra dos Motores Mobile: React Native (Fabric) vs Flutter (Impeller)
Durante anos, a discussão "React Native vs Flutter" foi baseada em preferências superficiais: "Eu gosto de JSX" ou "Eu prefiro a tipagem do Dart".
No cenário atual de 2025, o jogo mudou drasticamente. Ambos os frameworks passaram por reescritas completas de seus motores internos para resolver seus maiores calcanhares de Aquiles. O React Native matou a "Bridge". O Flutter matou o "Shader Jank".
Não se trata apenas de escolher uma biblioteca, mas de entender a engenharia de renderização que define a fluidez do seu app. Vamos abrir o capô de ambos os motores para compreender como essas novas arquiteturas entregam a performance que os usuários modernos exigem.
1. O Passado: Onde os Gargalos Viviam
React Native "Old Architecture" (The Bridge)
Antigamente, o React Native funcionava enviando mensagens JSON serializadas entre o mundo JavaScript e o mundo Nativo (Objective-C/Java) através de uma "Ponte" (Bridge).
- Problema: Se você tentasse animar uma View a 60 FPS, a Bridge congestionava com milhares de mensagens JSON, causando engasgos. A comunicação era assíncrona e lenta.
Flutter "Old Architecture" (Skia)
O Flutter sempre desenhou seus próprios pixels usando a biblioteca gráfica Skia (a mesma do Chrome).
- Problema: O "Shader Compilation Jank". Na primeira vez que uma animação complexa rodava no iOS, o Skia precisava compilar os shaders (programas de GPU) em tempo real. O resultado era uma travada perceptível na primeira execução.
2. React Native: A Nova Arquitetura (JSI + Fabric)
O time do Meta reescreveu o core do React Native em C++.
JavaScript Interface (JSI)
A JSI substituiu a Bridge. Em vez de serializar JSON, o JavaScript agora pode manter referências diretas a objetos C++ (Host Objects). Isso significa que o JS pode chamar um método nativo Java/Obj-C sincronamente, assim como o navegador chama o DOM.
Fabric (O Novo Renderizador)
Graças à JSI, o novo sistema de renderização, Fabric, permite:
- Priorização: O React pode interromper uma renderização de baixa prioridade (carregar dados) para processar uma de alta (animação de toque).
- Sincronia: O layout (Yoga) é calculado e compartilhado entre as threads sem cópia excessiva de memória.
TurboModules
Os módulos nativos (Câmera, Bluetooth) agora são carregados sob demanda (Lazy Loading). Antes, todos os módulos nativos eram inicializados na startup do app, o que deixava o boot lento.
3. Flutter: A Era do Impeller
O time do Google decidiu que o Skia, sendo uma biblioteca genérica, não era suficiente. Eles criaram o Impeller, um motor de renderização feito sob medida para o Flutter.
Adeus, Shader Jank
Diferente do Skia, o Impeller não compila shaders em tempo de execução. Todos os shaders necessários são pré-compilados durante o build do app (AOT - Ahead of Time). Isso garante uma performance previsível. O primeiro frame é tão rápido quanto o milésimo frame.
Metal e Vulkan Nativos
O Impeller foi escrito para usar as APIs gráficas modernas de baixo nível: Metal (no iOS) e Vulkan (no Android), ignorando o OpenGL antigo. Ele aproveita ao máximo a arquitetura das GPUs modernas, gerenciando buffers e texturas de forma muito mais eficiente que o Skia.
Comparativo de Arquitetura 2026
| Feature | React Native (New Arch) | Flutter (Impeller) |
|---|---|---|
| Linguagem Core | C++ (JSI) | C++ (Engine) / Dart (Framework) |
| Comunicação | Direta (JSI Host Objects) | FFI (Foreign Function Interface) |
| Renderização | Nativa (UIViews / Views) | Customizada (Canvas / GPU) |
| Look & Feel | Nativo da Plataforma | Pixel Perfect (Consistente) |
| Compilação | JIT (JS) / Hermes Bytecode | AOT (Dart Machine Code) |
4. Onde cada um vence?
Quando escolher React Native (Fabric)?
- Se o seu app depende pesadamente de componentes nativos complexos (Mapas, Players de Vídeo Nativos). O Fabric facilita a integração com Views nativas existentes.
- Se você quer que o app tenha a "cara" exata do sistema operacional, inclusive herdando automaticamente mudanças de UI do iOS 18/19.
- Se você tem um time web forte em React.
Quando escolher Flutter (Impeller)?
- Se você precisa de performance gráfica absoluta (60/120 FPS cravados) em animações customizadas complexas.
- Se você quer garantir que o app seja idêntico em qualquer tela, sem surpresas de renderização entre Samsung e Xiaomi.
- Se o app é focado em "Marca" e Design System próprio, ignorando os padrões nativos.
5. O Futuro: WebAssembly e Além
Ambos estão olhando para além do mobile.
- Flutter Web: Usa CanvasKit (Wasm) para renderizar o app no navegador. É pesado, mas pixel-perfect.
- React Native Web: Compila para HTML/CSS padrão. Mais leve e acessível para SEO.
A convergência é clara: o React Native ficou mais rápido (aproximando-se do desempenho bruto do Flutter), e o Flutter ficou mais estável (resolvendo seus problemas de jank). Para o engenheiro, a escolha agora é menos sobre "qual funciona" e mais sobre "qual arquitetura se encaixa no meu time".
Glossário Técnico
- JSI (JavaScript Interface): Camada C++ que permite ao motor JS invocar funções nativas diretamente.
- Shader: Pequeno programa que roda na GPU para decidir a cor de cada pixel.
- Jank: Quando o app perde um frame (demora mais de 16ms para renderizar), causando uma travada visual.
- AOT (Ahead-of-Time): Compilação feita na máquina do desenvolvedor, antes de instalar o app.
- Yoga: O motor de layout do React Native (escrito em C++) que implementa Flexbox.
Referências
- React Native Team. The New Architecture. Docs Oficiais.
- Flutter Team. Impeller Rendering Engine. Docs Oficiais.
- Software Mansion. Deep Dive into React Native JSI. Artigos técnicos profundos.
- Hillel Coren. Flutter vs React Native Performance Benchmarks.
