Desde o lançamento de do React 17 no outono de 2020, a comunidade de desenvolvedores tem grandes expectativas na próxima versão do React Native. React Native 0.64 foi lançado em março de 2021 em meio a muita fanfarra e especulação. A nova versão traz alguns novos recursos interessantes que irão beneficiar toda a comunidade, especialmente os desenvolvedores iOS que anteciparam com entusiasmo o lançamento do Hermes na plataforma.
Neste guia, daremos uma olhada no que há de novo no React Native 0.64, incluindo:
- Hermes no iOS
- Visualização de traços de Hermes com o Chrome
- Hermes com suporte a proxy
- Inline requer habilitado por padrão
- Reação 17
- Mudanças de dependência
Hermes no iOS
Hermes é um mecanismo JavaScript de código aberto otimizado para executar React Native em várias plataformas. O Hermes melhora o desempenho do aplicativo diminuindo a utilização da memória, reduzindo o tamanho do download do aplicativo e reduzindo o tempo que leva para se tornar utilizável ou tempo para interação (TTI).
A Hermes estava anteriormente disponível apenas para Android como uma opção. Com esta atualização, Hermes também está disponível no iOS .
Conforme o ecossistema React Native cresceu, os desenvolvedores encontraram desafios relacionados à produção de aplicativos em grande escala. O tamanho enorme do pacote, o uso excessivo da memória do telefone e o aumento do tempo de interação, para citar alguns problemas, podem resultar em uma experiência do usuário ruim.
Os engenheiros do Facebook criaram o Hermes como uma solução leve para esses problemas. No entanto, antes do lançamento do React Native 0.64, o desenvolvedor iOS enfrentou uma batalha difícil quando se tratava de manter o mesmo nível de qualidade.
A inclusão do Hermes no iOS ajuda os aplicativos React Native a ter um melhor desempenho, torna-os mais leves e diminui o tempo de interação em plataformas iOS. Isso deve incentivar a comunidade React Native a contribuir ainda mais para o crescimento da Hermes e da plataforma em geral.
Mudança de um projeto existente para Hermes
Antes de mudar um projeto existente para Hermes, você deve garantir que atualizou o projeto para usar o React Native 0.64. Para habilitar o Hermes no iOS, defina hermes_enabled como true em seu podfile e execute pod install .
É importante notar que o suporte para Hermes ainda está em sua forma incipiente no iOS. Podemos esperar mais melhorias e suporte nos próximos dias.
Para ativar o Hermes no Android, adicione enableHermes: true ao seu arquivo android/app/build.gradle .
Visualização de traços de Hermes com o Chrome
No ano passado, o Facebook patrocinou a bolsa Major League Hacking e apoiou contribuições para React Native, incluindo o uso da guia Performance no Chrome DevTools para visualizar a execução de um aplicativo React Native ao usar o Hermes.
Embora útil, esse recurso não é inteiramente novo porque você já pode criar o perfil de seu aplicativo React Native em execução no Hermes. Mas, executando este novo comando, você pode converter um perfil de rastreamento Hermes em um perfil de rastreamento Chrome e puxá-lo para a máquina local:
react-native profile-hermes [destinationDir]
Saiba mais sobre como registrar um perfil de amostragem Hermes no formulário oficial docs.
Hermes com suporte a proxy
O React Native 0.64 também traz suporte de proxy para Hermes. Esse suporte permite a compatibilidade com os projetos populares da comunidade, como React Native Firebase e M ob X . Se você tem usado esses pacotes, agora você pode migrar seu projeto para Hermes.
A equipe React Native está planejando tornar o Hermes o mecanismo JavaScript padrão para Android em uma versão futura. Se você encontrar um problema ao usar o Hermes em seus projetos do React Native, você deve relatá-lo .
Inline requer habilitado por padrão
Inline requer é uma opção de configuração Metro que pode ajudar a acelerar o tempo de inicialização de um aplicativo atrasando a execução de módulos JavaScript até que sejam usados. Tradicionalmente, a execução de módulos JavaScript começa na inicialização.
Este recurso existe há alguns anos como uma opção de configuração opcional, mas o React Native 0.64 tem essa opção habilitada por padrão para ajudá-lo a criar aplicativos móveis de rápido desempenho sem nenhuma configuração extra.
Requer inline é uma transformação Babel. Ele faz a importação de módulos e os converte para inline.
Vejamos um exemplo em que inline requer transforma uma chamada de importação de módulo de estar no topo do arquivo para onde é usada.
Antes:
import {TestFunction} do'módulo de teste'; const TestComponent=(props)=> { resultado const=TestFunction (); return {result} ;
};
Depois:
const TestComponent=(props)=> { const result=require ('test-module'). TestFunction (); return {result} ;
};
Reação 17
O React 17 não inclui nenhum recurso novo ou nenhuma mudança significativa voltada para o desenvolvedor. A postagem do blog oficial observou que React 17 é um lançamento de “trampolim” projetado para fazer é mais seguro incorporar uma árvore gerenciada por uma versão do React dentro de uma árvore gerenciada por outra versão. Também torna mais fácil incorporar o React a aplicativos criados com outras estruturas.
Além disso, uma nova transformação JSX elimina a necessidade de importar React para usar JSX. Este é um recurso opcional e a equipe React observou que planeja continuar com o suporte para a transformação JSX clássica.
Mudanças de dependência
- O React Native retirou o suporte para os níveis 16–20 da API Android. À medida que o aplicativo do Facebook deixa de oferecer suporte para essas versões do Android, o React Native seguirá o exemplo
- Xcode 12 e CocoaPods 1,10 agora são necessários
- O suporte mínimo para Node.js aumentou da versão 10 para a 12
- Flipper saltou para 0.75.1
Conclusão
Graças aos esforços de mais de 100 colaboradores em todo o mundo, React Native 0.64 já está no ar. Este novo lançamento é benéfico e apoia toda a comunidade React Native. Com a ajuda da comunidade para detectar bugs, podemos esperar mais melhorias nos próximos lançamentos.
A postagem O que há de novo no React Native 0.64 apareceu primeiro no LogRocket Blog .
