O que esperar do motor Hermes no React Native 0.70

O que esperar do motor Hermes no React Native 0.70
Leitores como você ajudam a apoiar a 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 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.





autenticação de dois fatores do facebook sem número de telefone

O que é Hermes?

Hermes é um mecanismo JavaScript de código aberto 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.



MAKEUSEO VÍDEO DO DIA

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 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 seus aplicativos Android e iOS.

No Android, edite seu android/app/build.gradle Arquivo:



project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

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 após 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 biblioteca 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 Arquivo:

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

Agora, seu aplicativo construído com o Expo Application Services terá o Hermes habilitado como seu mecanismo JavaScript.

como conectar xbox um controlador com fio ao pc

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. Hermes usa uma abordagem de compilação antecipada (AOT), transferindo a maior parte do trabalho pesado do mecanismo JavaScript para construir 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, como rolagem ou digitaçã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 empacotado. 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 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 apenas o espaço de memória necessário durante a execução.

Depurando React Native com Hermes e Chrome DevTools

Hermes vem com uma nova 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 o tradicional Depuração de JavaScript usando o console do navegador .

Para configurar o Chrome para depurar aplicativos Hermes, siga estas etapas.

parar o processo crítico de código morreu windows 10
  1. Navegar para chrome://inspecionar dentro do navegador Chrome.
  2. Clique no Configurar botão.
  3. 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 destino Hermes.

Por que Hermes é otimizado para apenas reagir nativo

O desempenho ideal do Hermes como um mecanismo JavaScript React Native é parcialmente devido ao seu ambiente de tempo de execução. No React Native, você empacota todo o código JavaScript no ambiente do aplicativo. Este 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.