O lançamento de React Native 0.64 introduziu a opção completa-em suporte para Hermes no iOS. Isso promete ser uma grande mudança no ecossistema de desenvolvimento de aplicativos móveis React Native.
Neste tutorial, exploraremos os benefícios de usar Hermes como o mecanismo JavaScript para seu aplicativo React Native e demonstraremos como construir e executar um aplicativo React Native usando Hermes. Orientaremos você nas etapas necessárias para colocar seu aplicativo React Native em funcionamento com Hermes como o mecanismo JavaScript.
Aqui está o que vamos cobrir:
- Novo no React Native 0.64: suporte Hermes para iOS
- O que é Hermes?
- Por que a otimização de desempenho é importante?
- Usando Hermes no React Native
- Ativando Hermes no Android
- Ativando Hermes no iOS
- Construindo um aplicativo React Native com suporte Hermes
- Depurando um aplicativo React Native no Chrome
Novo no React Native 0.64: suporte Hermes para iOS
O lançamento do anúncio React Native 0.64 veio com suporte para Android API níveis 16-20 devido ao baixo uso. Hermes é o título que acompanha esta versão. Outras mudanças incluem habilitar o requerimento em linha para o empacotador Metro, Hermes traces com o Google Chrome, Hermes com suporte a proxy e outras mudanças para React 17. Vamos explorar algumas dessas mudanças que podem afetar como os aplicativos móveis são construídos no React Native daqui para frente.
O suporte Hermes para Android está ativo há algum tempo. Com o suporte opcional para iOS no React Native 0.64, agora você pode criar um aplicativo rápido, eficiente e à prova de desempenho.
O que é Hermes?
Hermes é um mecanismo JavaScript de código aberto projetado para otimizar o desempenho reduzindo o tempo de inicialização do aplicativo e pré-compilando o JavaScript em bytecode eficiente.
Construir um aplicativo com o Hermes é bastante simples. São necessárias apenas três linhas de código para configurar o Hermes e colocá-lo em funcionamento:
use_react_native! ( : path=> config [: reactNativePath], : hermes_enabled=> true )
Observe que o Hermes no iOS ainda está em seu estágio inicial e ainda não ganhou estabilidade total. Se você encontrar bugs, pode visitar o React Native GitHub repo oficial para levantar um problema.
Por que a otimização do desempenho é importante?
Esteja seu aplicativo ainda em desenvolvimento ou implantado para produção, o desempenho é um dos principais atributos a serem observados ao criar um aplicativo móvel. Hermes preenche a lacuna de desempenho no React Native.
Veja como a Hermes funciona nos bastidores:
O painel esquerdo consiste na entrada de código no playground Hermes, enquanto o painel direito exibe a saída como bytecode. O tempo de carregamento também é mostrado. Nesse caso, a função sum levou 60 segundos para ser compilada e executada.
Usando Hermes no React Native
Para este tutorial, mostraremos como construir um aplicativo React Native bastante simples que exibe informações meteorológicas a partir de dados fictícios. O aplicativo exibirá as previsões do tempo atuais nos EUA.
O aplicativo finalizado deve ser semelhante a este:
Antes de começar, certifique-se de que está usando React Native 0.64 .
Para criar um novo projeto React Native, navegue até seu diretório de trabalho por meio do terminal e copie/cole o código abaixo:
npx react-nativo init WeatherApp
Habilitando Hermes no Android
Para ativar o Hermes no Android, abra seu projeto recém-criado em seu editor de código preferido e atualize seu arquivo android/app/build.gradle para ficar assim:
project.ext.react=[ entryFile:"index.js", enableHermes: true ]
A seguir, execute o projeto no Android com o código abaixo:
$ npx react-native run-android
Habilitando Hermes no iOS
Para habilitar o Hermes no iOS, abra seu projeto recém-criado em seu editor de código preferido e atualize seu Podfile , defina hermes_enabled . Veja o snippet de código abaixo:
use_react_native! ( : path=> config [: reactNativePath], : hermes_enabled=> true )
Em seguida, execute pod install.
$ cd ios && pod install
Por fim, execute seu aplicativo iOS com o código abaixo:
$ npx react-nativos run-ios
Seu aplicativo deve ser assim:
Você notará que Hermes é identificado como o mecanismo do aplicativo no canto superior direito. Isso indica que o Hermes está funcionando ativamente.
Agora que concluímos a configuração do Hermes, vamos prosseguir com a construção de nosso aplicativo.
Criação de um aplicativo React Native com suporte Hermes
Primeiro, clone o arquivo inicial do Github :
$ git clone https://github.com/emmanueletukudo/herms-starter.git
Substitua o conteúdo da tela Home pelo código abaixo:
import React from"react";
import {StyleSheet, Text, Image, View, TouchableOpacity, FlatList} de"react-native";
importar axios de"axios";
importar {dados, ícones} de"../constants/"
const Home=()=> { const [weatherData, setWeatherData]=React.useState ([ { id: 0, cidade:"Nova York", temp: 283,88, principal:"Nuvens", ícone: icons.thunder, descrição:"nuvens nubladas", }, { id: 1, cidade:"San Francisco", temp: 285,52, principal:"Chuva", ícone: icons.rainy, descrição:"nuvens quebradas", }, { id: 2, cidade:"Chicago", temp: 283,88, principal:"Chuva", ícone: icons.metro, descrição:"nuvens nubladas", }, ]); function renderWeather (item, index) { Retorna( {item.city} {item.main} {item.temp} ) } Retorna( item.id.toString ()} renderItem={({item, index})=> renderWeather (item, index)} /> )
}
estilos const=StyleSheet.create ({ constainer: { flex: 1, backgroundColor:"# 000", alignItems:"center", preenchimento: 70, }, weatherContainer: { largura: 350, justifyContent:"center", marginHorizontal: 14, backgroundColor:"# 000", }, Olá:{ flex: 1, alignItems:"center", fontSize: 12, fontWeight:"700", cor:"# 000" }, weatherDtails1: { flex: 1, justifyContent:"center", marginTop:"20%", borderRadius: 10, marginRight: 15, paddingRight: 12, paddingBottom: 12, }, temp: { cor:"#ffffff", fontSize: 14, fontWeight:"700", }, a Principal:{ cor:"#ffffff", fontSize: 14, marginTop: 15 }, cidade:{ cor:"#ffffff", fontSize: 40, fontWeight:"700" }, weatherDetails: { fontSize: 17, fontWeight:"400", }, weatherDetailsWrapper: { flexDirection:"coluna", alignContent:"center", marginTop:"40%", }, ícone: { topo:"10%", largura: 200, altura: 200, }
})
exportar Página inicial padrão;
O código é autoexplicativo. Temos três segmentos: os dados simulados com o React usesState hook , a função que renderiza os dados em um componente React e o código que renderiza os dados no componente Home usando React Native FlatList . Você poderia usar a mesma abordagem para obter dados reais de uma API, mas isso está além do escopo deste tutorial.
Depurando um aplicativo React Native no Chrome
Hermes oferece suporte para depuração de JavaScript via Chrome DevTools , implementando o protocolo do inspetor do Chrome. O Chrome se conecta ao Metro pela porta que está ouvindo no momento, então você precisa saber a porta onde o Metro está ouvindo. Metro escuta na porta 8181 por padrão, então você pode acessar seu aplicativo através do navegador usando http://localhost: 8081 .
Depois de descobrir em que porta seu aplicativo está sendo executado, abra um novo toque no Chrome e digite chrome://inspect . Clique no botão Configurar… para adicionar o endereço do servidor Metro do aplicativo (por exemplo, http://localhost: 8081 ).
Adicione o endereço no modal que aparece:
Agora você deve conseguir depurar seu aplicativo React Native usando o Chrome DevTools. Para acessar o depurador, clique em Inspecionar .
Conclusão
A otimização de desempenho para aplicativos móveis ficou muito mais fácil no React Native, graças ao mecanismo leve de JavaScript Hermes.
Você pode ler mais sobre Hermes na documentação oficial .
A postagem Primeiros passos com Hermes in React Native apareceu primeiro no LogRocket Blog .
