Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
O React Native 0.70 foi lançado e o Hermes é o novo mecanismo JavaScript padrão enviado com esta atualização. Aqui está o que esperar do Hermes e alguns dos recursos que afetarão o desempenho do seu aplicativo React Native.
O que é Hermes?
Hermes é um mecanismo JavaScript de código aberto que otimiza o desempenho durante iOS e Android o aplicativo é iniciado pré-compilando o código JavaScript em bytecode eficiente e reduzindo uso de memória.
Atualizando versões antigas do React Native para oferecer suporte ao Hermes
Os aplicativos React Native em execução no 0.70 terão o Hermes ativado por padrão. Para aplicativos React Native mais antigos, uma compilação do Hermes é fornecida com todas as versões do React Native a partir da versão 0.60.4 para builds do Android e da versão 0.64.0 para iOS. As versões correspondentes eliminam o risco de incompatibilidade de dependência em seu aplicativo React Native.
Para habilitar o Hermes nessas versões mais antigas do React Native, você precisará adicionar algumas configurações aos aplicativos Android e iOS.
No Android, edite seu android/app/build.gradle arquivo:
projeto.ext.react = [
arquivo de entrada: "index.js",
habilitarHermes: verdadeiro// limpa e reconstrói se mudar
]
No iOS, você faz as seguintes alterações em seu ios/Podfile:
use_react_native!(
:caminho => config[:reactNativePath],
:hermes_enabled => verdadeiro
)
O iOS requer que você instale os pods Hermes após definir as configurações.
Execute o seguinte comando para instalar os pods:
cd ios && pod instalar
Habilitando Hermes com Expo
Você também pode usar o mecanismo Hermes para aplicativos React Native criados ou executados usando o Expo. A biblioteca Expo oferece suporte ao Hermes do SDK versão 42 no Android e SDK versão 43 no iOS até a versão atual 0.70. É importante observar que os aplicativos autônomos não podem executar o Hermes, a menos que sejam criados usando o Expo Application Services Build.
Para habilitar o Hermes em um aplicativo React Native, edite seu app.json arquivo:
{
"exposição": {
"jsEngine": "Hermes"
}
}
Agora, seu aplicativo criado com o Expo Application Services terá o Hermes habilitado como seu mecanismo JavaScript.
Otimização de desempenho Hermes para aplicativos React Native
A maioria dos mecanismos JavaScript analisa todo o código-fonte JavaScript usando um sistema de compilação JIT (Just in Time). O sistema JIT retarda a execução porque seu dispositivo deve aguardar a conclusão de todo o processo de compilação. O Hermes usa uma abordagem de compilação antecipada (AOT), transferindo a maior parte do trabalho pesado do mecanismo JavaScript para o tempo de compilação.
Hermes afeta principalmente três métricas de desempenho do aplicativo: o aplicativo TTI (Time to Interactive), tamanho binário e uso de memória.
Hora de interagir
O TTI é o tempo que um aplicativo leva para carregar e oferecer suporte à interação do usuário, como rolagem ou digitação. O Hermes melhora o TTI médio para aplicativos React Native em comparação com outros mecanismos JavaScript.
Essa redução no TTI ocorre porque o Hermes não executa um compilador JIT.
Tamanho binário
O tamanho binário é o tamanho do aplicativo React Native integrado. Os aplicativos Android usam o formato de arquivo APK, enquanto os aplicativos iOS usam um formato que a Apple chama de IPA. O uso do Hermes reduz significativamente o tamanho do aplicativo em dispositivos Android.
Uso de memória
O uso de memória é outra métrica crítica a ser otimizada em aplicativos. A experiência do usuário de um aplicativo seria afetada negativamente se ele usasse muita memória. Hermes implementa um sistema Garbage Collector que regula o uso de memória sob demanda, garantindo que um aplicativo use apenas o espaço de memória necessário durante a execução.
O Hermes vem com uma nova experiência para depurar aplicativos React Native executados em um emulador, simulador ou dispositivo físico usando o Expo. O Hermes oferece suporte à depuração de aplicativos React Native usando o protocolo Inspector do Chrome DevTools. Você não deve confundir isso com o tradicional Depuração de JavaScript usando o console do navegador.
Para configurar o Chrome para depurar aplicativos Hermes, siga estas etapas.
- Navegar para chrome://inspecionar dentro do seu navegador Chrome.
- Clique no configurar botão.
- Dentro do modal na tela, insira o endereço do servidor do metro bundler que executa seu aplicativo React Native e clique em Feito.
Agora você pode depurar seu aplicativo React Native usando o link de inspeção de destino do Hermes.
Por que Hermes é otimizado apenas para reagir nativo
O desempenho ideal do Hermes como um mecanismo React Native JavaScript é parcialmente devido ao seu ambiente de tempo de execução. No React Native, você agrupa todo o código JavaScript no ambiente do aplicativo. Este sistema torna o bytecode de remessa eficiente.
Outro fator a considerar é a quantidade de trabalho realizado durante a compilação do JavaScript. O Hermes gerencia a interação frequente do usuário antecipada de aplicativos móveis, evitando a otimização agressiva de bytecode. Um mecanismo JavaScript de compilador JIT não executaria tarefas dessa maneira.
