Hermes: recursos e otimização para React Native

O que é Hermes?

Hermes é um mecanismo JavaScript compacto criado pela equipe da Meta especificamente para React Native. Foi anunciado em 2019 como uma alternativa ao JavaScriptCore (JSC), que era usado por padrão no React Native. O principal objetivo do Hermes é fornecer a inicialização mais rápida possível para aplicativos móveis, especialmente no Android com recursos limitados.

A principal característica do Hermes é a compilação antecipada (AOT — Ahead-of-Time). Ao contrário dos mecanismos JS tradicionais que compilam código em tempo de execução (JIT — Just-in-Time), o Hermes compila JavaScript em bytecode durante a fase de compilação do app. Isso significa que nenhuma compilação ocorre no dispositivo — o bytecode é executado imediatamente pela máquina virtual do Hermes.

Hermes não é um mecanismo JS universal — ele é otimizado exclusivamente para cenários de React Native. Ele não possui recursos não necessários no desenvolvimento móvel: eval, geradores e alguns recursos ES6. Isso permite que o mecanismo seja mais compacto e rápido. De acordo com a Meta, o tamanho do Hermes é de aproximadamente 200–300 KB compactado, significativamente menor que o JSC (cerca de 2–3 MB).

Arquitetura do Hermes e bytecode

A arquitetura do Hermes difere dos mecanismos JS tradicionais por não ter um compilador JIT. Em vez disso, o Hermes usa uma máquina virtual (VM) eficiente que executa bytecode pré-compilado. Abandonar o JIT oferece três vantagens principais: desempenho previsível, menor consumo de memória e redução do tempo de inicialização.

O bytecode do Hermes é uma representação compacta do código JavaScript otimizada para execução rápida. Durante a fase de compilação (via Metro), os arquivos JavaScript são compilados em arquivos .hbc (Hermes Bytecode). O app carrega esses arquivos, e a VM do Hermes os executa sem compilação adicional. O processo de compilação é integrado ao Metro através do plugin hermes-transformer.

Etapas do processamento de código

O fluxo de processamento JavaScript no Hermes consiste em três etapas: Parse — análise sintática do código fonte, Compile — tradução para bytecode, Execute — execução do bytecode pela máquina virtual. As duas primeiras etapas são executadas durante a fase de compilação, a terceira no dispositivo. Isso é fundamentalmente diferente do JSC, onde todas as três etapas são executadas no dispositivo.

# Compilação de bytecode Hermes durante a compilação
hermes -emit-binary -out index.hbc index.js

# Verificar o tamanho do bytecode gerado
ls -lh index.hbc

# Exibir estatísticas de bytecode
hermes -dump-bytecode index.hbc

# Otimizar bytecode para produção
hermes -O index.js -emit-binary -O target.hbc

Após a compilação, todos os arquivos .hbc são empacotados em APK ou IPA junto com o código nativo. Quando o app inicia, a VM do Hermes carrega o bytecode e começa a execução quase instantaneamente — não é necessário tempo de aquecimento JIT, que é típico para V8 e JSC.

Hermes vs JSC: comparação

Comparar Hermes e JavaScriptCore (JSC) ajuda a entender quando escolher cada mecanismo. JSC é um mecanismo JS completo da Apple, usado no Safari. Hermes é um mecanismo especializado para React Native. A escolha entre eles depende das prioridades do projeto.

Hermes vence em velocidade de inicialização e consumo de memória, mas fica atrás do JSC no desempenho de cálculos complexos. A compilação JIT do JSC otimiza caminhos de código quente durante a execução, dando-lhe vantagem em operações intensivas de CPU. Para um app React Native típico, onde atualizações de UI e navegação compõem a carga de trabalho principal, o Hermes proporciona uma melhor experiência do usuário graças à inicialização rápida.

Otimizações do Hermes para React Native

Hermes inclui várias otimizações específicas para React Native. A principal é a integração com JSI (JavaScript Interface). O Hermes suporta JSI nativamente, permitindo o uso da nova arquitetura React Native (Fabric + Turbo Modules) sem camadas adicionais. Isso torna o Hermes e a nova arquitetura o par ideal para máximo desempenho.

Gerenciamento de memória

Hermes usa um coletor de lixo geracional (generational GC) otimizado para dispositivos móveis. Ao contrário do JSC, onde a coleta de lixo pode causar pausas notáveis na UI (jank), o Hermes executa GC em pequenas porções entre quadros, minimizando o impacto na experiência do usuário. De acordo com a Meta, as pausas de GC no Hermes são 2–3 vezes mais curtas que no JSC em cenários típicos de React Native.

Carregamento lento e constantes

Hermes suporta carregamento lento de módulos — um módulo JavaScript é compilado apenas quando realmente necessário. Isso reduz o tamanho do bytecode e acelera a inicialização. Além disso, o Hermes avalia expressões constantes em tempo de compilação, substituindo chamadas de função por valores constantes quando possível.

// Exemplo de otimizações específicas do Hermes

// 1. Hermes inlineia expressões constantes
const TAX_RATE = 0.07;
const price = 100;
// Hermes pré-calcula: TAX_RATE * price durante a compilação
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes otimiza cadeias de acesso a propriedades
const config = { api: { timeout: 5000 } };
// Hermes armazena em cache o acesso a config.api internamente
const timeout = config.api.timeout;
fetch(url, { timeout });

É importante notar que o Hermes suporta depuração via Chrome DevTools (a partir do Hermes 0.12). Os desenvolvedores podem usar ferramentas familiares: pontos de interrupção, perfil de memória, inspeção de variáveis. Isso elimina uma das principais objeções ao Hermes nas primeiras versões, onde a depuração era limitada.

Configuração do Hermes em um projeto React Native

A configuração do Hermes depende da versão do React Native. A partir do React Native 0.70, o Hermes está habilitado por padrão para novos projetos. Para projetos criados anteriormente, ou ao alternar entre mecanismos, a configuração é feita através das configurações de compilação.

Configuração para Android

Para Android, o Hermes é habilitado no arquivo android/app/build.gradle através da flag hermesEnabled. Para iOS, a configuração é feita no Podfile através da variável :hermes_enabled. Após alterar a configuração, é necessário reinstalar os pods e recompilar o projeto.

// android/app/build.gradle — habilitar Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — habilitar Hermes
hermes_enabled = true
pod 'hermes-engine'

Para verificar se o Hermes está rodando no seu app, execute adb logcat | grep Hermes no Android ou verifique o console do Xcode no iOS. Quando o app inicia, o Hermes exibe uma mensagem como “Hermes VM initialized” ou similar. Você também pode verificar globalThis.HermesInternal no código JavaScript — se o Hermes estiver ativo, esta propriedade estará disponível.

// Verificar se o Hermes está funcionando
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Mecanismo Hermes ativo');
  console.log(
    'Versão:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes inativo (fallback para JSC)');
}