O React Native v0.65 está chegando, e que hora de ser um desenvolvedor React Native! Embora esta não seja uma versão repleta de recursos e repleta de componentes novos e brilhantes, as otimizações de desempenho e as melhorias de acessibilidade fazem dela uma atualização empolgante que vale a pena ser comentada.
Portanto, antes de se apressar e atualizar seu projeto atual , vamos ver por que você deveria.
Hermes 0.8.1
Hermes 0.8.1 é uma grande parte do que torna o última atualização do React Native digna de nota, então vamos nos aprofundar.
Lançado em 2019, Hermes é um mecanismo JavaScript AOT (antecipado) projetado para otimizar o desempenho do React Native em dispositivos Android. E com a ampla gama de dispositivos Android de última geração no mercado, isso faz sentido.
Hermes otimiza o desempenho do React Native em dispositivos Android reduzindo:
Tempo para interação (tempo de carregamento , etc.) Tamanho do download (arquivo APK menor) Utilização de memória (estratégia do coletor de lixo)
O coletor de lixo de Hades
Antes do deus do submundo, Hermes tinha o coletor de lixo GenGC para melhorar a memória do sistema operacional. Ele foi executado em um único thread compartilhado com o intérprete. Mas agora temos um novo deus no quarteirão.
As pessoas brilhantes da Hermes criaram um novo coletor de lixo chamado Hades . Nas palavras da própria equipe, Hades visa”melhorar os tempos de pausa em uma ordem de magnitude em relação ao GenGC.”
Para conseguir isso, o Hades executa a maior parte do trabalho de coleta de lixo em um thread de segundo plano simultaneamente com o intérprete que está executando seu código JavaScript. Não é mais um ou outro.
Em termos simples, o coletor de lixo de Hades é multitarefa. Se seu cérebro funcionasse no novo mecanismo Hermes, você estaria neste blog lendo um artigo com o olho esquerdo enquanto usa o olho direito e as mãos para escrever código no seu IDE favorito simultaneamente!
O próprio Facebook tem observamos melhorias entre 20 e 50 por cento em cargas de trabalho com uso intensivo de CPU e tempos de pausa até 30 vezes mais curtos.
Atualizações do Android
APIs de internacionalização
A maioria dos mecanismos Javascript empacote uma estrutura de internacionalização, que aumenta o tamanho do seu aplicativo. Especificação da API de internacionalização ECMAScript (ECMA-402 ou Intl) agora está integrada ao Hermes para Android e habilitada por padrão.
Embora isso traga enormes ganhos em eficiência de espaço-da ordem de 57-62K por sobrecarga de tamanho de API, em comparação com 6MiB do JSC -existem algumas desvantagens. Existem limitações nos SDKs do Android e os seguintes objetos Intl não são compatíveis no momento:
Intl.PluralRules Intl.RelativeTimeFormat Intl.DisplayNames Intl.ListFormat Intl.Locale Intl.DateTimeFormat properties dateStyle/timeStyle dayPeriod fractionalSecondDigits BigInt.prototype.toLocaleString
Você pode encontrar uma lista completa de limitações no documentos oficiais da Hermes .
Atualizações do iOS
Suporte para Mac Catalyst
Mac Catalyst permite que você traga seu aplicativo iOS existente para macOS, aproveitando o tamanho da tela do Mac e teclado , e velocidade mais rápida. A atualização coincide com o próximo lançamento do macOS Monterey. Esta é uma ótima notícia se você é um desenvolvedor de aplicativo para iPad transformando seu aplicativo para iPad em um aplicativo para Mac, porque agora você pode trazer o poder da Hermes com você.
macOS Monterey , o novo SO de desktop da Apple, está fora do escopo deste artigo, portanto, se este a atualização realmente faz você bombear o sangue, vá para o portal do desenvolvedor da Apple para obter mais detalhes sobre o novo Mac Catalyst APIs e o que elas significam para você como desenvolvedor React Native.
Suporte para Macs Apple M1
Hermes já percorreu um longo caminho desde 2019. Uma das mudanças recentes mais notáveis foi o introdução do suporte para iOS com o lançamento de React Native 0.64 . Essa atualização possibilitou que o Android e o iOS usassem o mesmo mecanismo de JavaScript.
Para todos os usuários da Apple Silicon, o Hermes no iOS agora oferece suporte a Macs Apple M1 (simuladores ARM64). Esta é uma atualização bem-vinda para todos os proprietários de M1 por aí. Como usuário M1 nos últimos seis meses, posso atestar a alegria de estar na vanguarda da tecnologia-bem como o desânimo de tentar ler gobbledygook em meu terminal quando uma compilação falha!
Se o suporte para M1 tem impedido você de mergulhar, agora pode ser um bom momento para começar sua jornada React Native.
Melhorias e mudanças de acessibilidade
iOS
Agora você pode definir os valores de claro e escuro de alto contraste para iOS. Para verificar você mesmo, vá para Configurações > Acessibilidade > Exibição e tamanho do texto > Aumentar contraste .
Para ver este novo recurso de acessibilidade em ação com React Native, vamos editar o projeto de modelo básico.
Crie um novo projeto com o seguinte script em seu terminal, ou acompanhe aqui:
npx react-native init newReactNativeUpdate–template react-native-template-typescript
Em seguida, adicione este snippet de código ao seu projeto em App.tsx após suas instruções de importação:
const dynamicTextColor=DynamicColorIOS ({dark:’darkgray’, light:’gray’, highContrastDark: Colors.white, highContrastLight: Colors.black,});
No componente Seção, altere a cor prop nos estilos de texto de:
color: isDarkMode? Colors.white: Colors.black,
Para:
color: dynamicTextColor,
No seu simulador, vá para Configurações > Acessibilidade > Tela e tamanho do texto > Aumentar contraste e, em seguida, volte para o aplicativo. Observe como o texto cinza agora está preto.
Agora mude o tema do dispositivo para o modo escuro e tente a última etapa novamente. Observe como o texto vai de cinza escuro para branco:
Conclusão
A última atualização do React Native traz desempenho e acessibilidade aprimorados, mas também vale a pena considerar o que tudo isso significa para o futuro de React Native. Agora temos um mecanismo JavaScript para Android e iOS, que também pode ser usado para aplicativos macOS com Mac Catalyst. React Native também fez parceria com equipes de desktop e VR no Facebook. Como eu disse no início do artigo, que momento para ser um React Native Developer!
