O React Native 0.70 foi lançado e Hermes é o novo mecanismo JavaScript padrão enviado com esta atualização. Cá 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 sincero que otimiza o desempenho durante lançamentos de aplicativos iOS e Android pré-compilando código JavaScript em bytecode eficiente e reduzindo o uso de memória do aplicativo.
Atualizando versões mais antigas do React Native para suportar Hermes
Aplicativos React Native rodando na versão 0.70 terão o Hermes habilitado por padrão. Para aplicativos React Native mais antigos, uma compilação Hermes é fornecida com todas as versões React Native a partir da versão 0.60.4 para compilações Android e versão 0.64.0 para iOS. As versões correspondentes eliminam o risco de uma incompatibilidade de submissão em seu aplicativo React Native.
Para habilitar o Hermes nessas versões mais antigas do React Native, você precisará somar algumas configurações aos seus aplicativos Android e iOS.
No Android, edite seu android/app/build.gradle Registo:
project.ext.react = [
entryFile: "index.js",
enableHermes: true
]
No iOS, você faz as seguintes alterações no seu ios/Podfile:
use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => true
)
O iOS exige que você instale os pods Hermes depois definir as configurações.
Execute o seguinte comando para instalar os pods:
cd ios && pod install
Habilitando Hermes com Expo
Você também pode usar o mecanismo Hermes para aplicativos React Native criados ou executados usando o Expo. A livraria Expo suporta 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 independentes 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 Registo:
{
"expo": {
"jsEngine": "hermes"
}
}
Agora, seu aplicativo construído com o Expo Application Services terá o Hermes habilitado porquê 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 realização porque seu dispositivo deve esperar a peroração de todo o processo de compilação. Hermes usa uma abordagem de compilação antecipada (AOT), transferindo a maior segmento do trabalho pesado do mecanismo JavaScript para edificar o tempo.
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.
Tempo para interativo
O TTI é o tempo que um aplicativo leva para carregar e dar suporte à interação do usuário, porquê rolagem ou digitação. Hermes melhora o TTI médio para aplicativos React Native em verificaçã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 empacotado. Os aplicativos Android usam o formato de registo APK, enquanto os aplicativos iOS usam um formato que a Apple labareda 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 sátira para otimizar em aplicativos. A experiência do usuário de um aplicativo seria afetada negativamente se ele usasse muita memória. A Hermes implementa um sistema Garbage Collector que regula o uso de memória sob demanda, garantindo que um aplicativo use exclusivamente o espaço de memória necessário durante a realização.
Hermes vem com uma novidade experiência para depurar aplicativos React Native executados em um emulador, simulador ou dispositivo físico usando o Expo. Hermes suporta a depuração de aplicativos React Native usando o protocolo Inspector do Chrome DevTools. Você não deve confundir isso com a depuração JavaScript tradicional usando o console do navegador.
Para configurar o Chrome para depurar aplicativos Hermes, siga estas etapas.
- Velejar para chrome://inspecionar dentro do navegador Chrome.
- Clique no Configurar botão.
- Dentro do modal na tela, insira o endereço do servidor para o metro bundler executando seu aplicativo React Native e clique em Feito.
Agora você pode depurar seu aplicativo React Native usando o link de inspeção de fado Hermes.
Por que Hermes é otimizado para exclusivamente reagir nativo
O desempenho ideal do Hermes porquê um mecanismo JavaScript React Native é parcialmente devido ao seu envolvente de tempo de realização. No React Native, você empacota todo o código JavaScript no envolvente do aplicativo. Nascente sistema torna o envio de bytecode eficiente.
Outro fator a ser considerado é a quantidade de trabalho realizada durante a compilação do JavaScript. Hermes gerencia a interação frequente do usuário antecipada de aplicativos móveis, evitando a otimização agressiva de bytecode. Um mecanismo JavaScript do compilador JIT não executaria tarefas dessa maneira.
Barnabé Ferreira