React Native

React Native 0.79 - Ferramentas mais rápidas e muito mais

A versão 0.79 do React Native foi lançada com melhorias significativas em desempenho e compatibilidade. Entre os destaques, o Metro ganhou uma startup mais rápida e suporte estável para exportações de pacotes, enquanto a inicialização de aplicativos Android ficou mais veloz por conta da remoção da compressão do bundle JavaScript dentro dos APKs.

Compartilhar
React Native 0.79 - Faster tooling and much more · React Native

Hoje estamos animados em lançar o React Native 0.79!

Este lançamento traz melhorias de desempenho em várias frentes, bem como vários corretivos de bugs. Primeiro, o Metro agora é mais rápido para iniciar graças ao hashing diferido e tem suporte estável para exportações de pacotes. O tempo de inicialização no Android também será melhorado graças às mudanças na compressão do bundle JS e muito mais.

Principais pontos

Principais pontos

Metro: Inicialização mais rápida e suporte a exportações de pacotes

Este lançamento traz o Metro 0.82. Esta versão usa hashing diferido para melhorar a velocidade do primeiro yarn start geralmente em mais de 3x (mais em projetos maiores e monorepos) tornando sua experiência de desenvolvimento e builds CI mais rápidas diariamente.

comparação de inicialização do metro

Também no Metro 0.82, estamos promovendo a resolução de campos package.json "exports" e "imports" para estável. A resolução "exports" foi introduzida no React Native 0.72, e o suporte a "imports" foi adicionado em uma contribuição da comunidade - ambos serão habilitados por padrão para todos os projetos do React Native 0.79.

Isto melhora a compatibilidade com dependências modernas do npm, e abre novas maneiras de organizar seus projetos que seguem padrões.

Embora tenhamos testado a resolução "exports" do package.json na comunidade há algum tempo, esta mudança pode ser uma quebra de compatibilidade para certos pacotes e configurações de projeto.

Especificamente, estamos cientes de incompatibilidades relatadas por usuários em alguns pacotes populares incluindo Firebase e AWS Amplify, e estamos trabalhando para corrigir esses problemas na fonte.

Se você está enfrentando problemas:

No âmbito de nosso esforço para reduzir a superfície da API do React Native, estamos em processo de mover o motor JavaScriptCore (JSC) para um pacote mantido pela comunidade: @react-native-community/javascriptcore

Esta mudança não afetará usuários que estão usando Hermes.

A partir do React Native 0.79, você pode usar uma versão comunitária suportada do JSC seguindo as instruções de instalação no readme. A versão do JSC fornecida pelo React Native core ainda estará disponível em 0.79, mas planejamos removê-la no futuro próximo.

Mover o JSC para um pacote mantido pela comunidade permitirá que atualizemos a versão do JSC com mais frequência e ofereçamos as últimas funcionalidades. O JSC mantido pela comunidade seguirá uma agenda de lançamento separada do React Native.

iOS: Registro de Módulos Nativos Compatíveis com Swift

Nesta versão, estamos reformulando a maneira como você pode registrar seus módulos nativos no ambiente de tempo de execução do React Native. A nova abordagem segue o mesmo padrão dos componentes, conforme descrito na documentação oficial.

A partir desta versão do React Native, você pode registrar seus módulos modificando o arquivo package.json. Introduzimos um novo campo chamado modulesProvider na propriedade ios:

"codegenConfig": {
     "ios": {
+        "modulesProvider": {
+          "JS Name for the module": "ObjC Module provider for the pure C++ TM or a class conforming to RCTTurboModule"
+      }
   }
}

O Codegen cuidará de criar todo o código relevante a partir do seu arquivo package.json.

Caso você esteja usando um módulo nativo puramente em C++, será necessário seguir esta configuração recomendada:

Configurar Módulos Nativos Puramente em C++ no seu aplicativo

Para módulos nativos puramente em C++, você precisa adicionar uma nova classe ObjectiveC++ para conectar o módulo nativo com o resto do aplicativo:

CppNativeModuleProvider.h

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface <YourNativeModule>Provider : NSObject <RCTModuleProvider>

@end

NS_ASSUME_NONNULL_END

#import "<YourNativeModule>Provider.h"
#import <ReactCommon/RCTTurboModule.h>
#import "<YourNativeModule>.h"

@implementation NativeSampleModuleProvider

Com essa nova abordagem, unificamos o registro de Módulos Nativos tanto para desenvolvedores de aplicativos quanto para mantenedores de bibliotecas. As bibliotecas podem especificar as mesmas propriedades em seu package.json, e o Codegen cuidará do resto.

Esta abordagem resolve a limitação introduzida na versão 0.77, que impedia o registro de um Módulo Nativo puro em C++ com um Swift AppDelegate. Como você pode ver, nenhuma dessas mudanças modifica o AppDelegate, e o código gerado funcionará para AppDelegate implementados tanto em Swift quanto em Objective-C.

Android: Início de Aplicativo Mais Rápido

Também estamos enviando uma alteração para melhorar o tempo de inicialização do seu aplicativo Android em um grande volume.

A partir desta versão, não comprimiremos mais o pacote JavaScript dentro do APK. Anteriormente, o sistema Android precisava descomprimir o pacote JavaScript antes que o seu aplicativo pudesse iniciar. Isso estava causando uma significativa lentidão durante a inicialização do aplicativo.

A partir desta versão, enviaremos o Pacote JavaScript sem compressão por padrão, então seus aplicativos Android serão geralmente mais rápidos para iniciar.

A equipe Margelo testou essa funcionalidade no aplicativo Discord e obteve um aumento significativo de desempenho: o tempo até interatividade (TTI) do Discord foi reduzido em 400ms, que é uma aceleração de 12% com uma alteração simples de uma linha (testado em Samsung A14).

Ao contrário disso, armazenar o bundle sem compressão resultará em um consumo maior de espaço para seu aplicativo no dispositivo do usuário. Se isso for uma preocupação para você, é possível alternar esse comportamento usando a propriedade enableBundleCompression no arquivo app/build.gradle.

app/build.gradle


react {

enableBundleCompression =true

enableBundleCompression =false

}

Por favor, note que o tamanho do APK aumentará nesta versão, mas seus usuários não terão que pagar a diferença no tamanho de download do APK, pois os APKs são comprimidos quando baixados da rede.

Mudanças Quebradoras

Remoção da Debbugagem Remota JS

Como parte de nossos esforços contínuos para melhorar a depuração, estamos removendo a Debbugagem Remota JS via Chrome. Este método legado de depuração foi depreciado e movido para uma opção de tempo de execução no React Native 0.73. Por favor, use React Native DevTools para depuração moderna e confiável.

Isto também significa que o React Native não é mais compatível com o projeto da comunidade react-native-debugger. Para desenvolvedores que desejam usar extensões de depuração de terceiros, como Redux DevTools, recomendamos Expo DevTools Plugins, ou a integração das versões standalone dessas ferramentas.

Leia mais em este post dedicado.

Módulos internos atualizados para sintaxe export

Como parte da modernização de nossa base de código JavaScript, atualizamos vários módulos de implementação dentro do react-native para usar consistentemente a sintaxe export em vez de module.exports.

Nós atualizamos cerca de 46 APIs no total, que podem ser encontradas no changelog.

Esta alteração tem um impacto sutil nas importações existentes:

Caso 1: Exportação padrão

// ALTERADO - sintaxe require()

- const ImageBackground = require('react-native/Libraries/Image/ImageBackground');

+ const ImageBackground = require('react-native/Libraries/Image/ImageBackground').default;

// Isto permanece inalterado - sintaxe import

import ImageBackground from 'react-native/Libraries/Image/ImageBackground';

// RECOMENDADO - importação raiz

import {ImageBackground} from 'react-native';

Caso 2: Exportações secundárias

Há poucos casos deste padrão, novamente não afetados ao usar a importação raiz 'react-native'.

// Isto permanece inalterado - sintaxe require()

const BlobRegistry = require('react-native/Libraries/Blob/BlobRegistry');

// Isto permanece inalterado - sintaxe require() com desestruturação

const {register, unregister} = require('react-native/Libraries/Blob/BlobRegistry');

// ALTERADO - sintaxe import como único objeto

- import BlobRegistry from 'react-native/Libraries/Blob/BlobRegistry';

+ import * as BlobRegistry from 'react-native/Libraries/Blob/BlobRegistry';

Nós esperamos que o impacto dessa mudança seja extremamente limitado, especialmente para projetos escritos em TypeScript e usando a sintaxe import. Verifique por quaisquer erros de tipo para atualizar seu código.

A importação raiz react-native é fortemente recomendada

No geral, recomendamos fortemente a importação do caminho raiz 'react-native', para evitar mudanças quebradoras extranhas no futuro. Em nossa próxima versão, deprecaremos as importações profundas, como parte da definição melhorada da API JavaScript pública do React Native (veja o RFC).

Outras Mudanças Quebradoras

Esta lista contém uma série de outras mudanças quebradoras que suspeitamos poderem ter um impacto pequeno em seu código de produto e são dignas de nota.

  • Unidades inválidas em sombras de caixa e filtros:
    • Para tornar o React Native mais compatível com as especificações CSS/Web, agora não suportamos mais comprimentos sem unidades em box-shadow e filter. Isso significa que se você estava usando uma sombra de caixa de 1 1 black, nós não renderizaremos. Você deve especificar unidades como 1px 1px black
  • Remover suporte incorreto ao hwb() da sintaxe normalize-color:
    • Para tornar o React Native mais compatível com as especificações CSS/Web, agora restringimos algumas sintaxes inválidas para hwb(). Historicamente, o React Native usava a sintaxe de valores separados por vírgula (por exemplo, hwb(0, 0%, 100%)) que não suportamos mais (você deve migrar para hwb(0 0% 100%)). Você pode ler mais sobre essa mudança aqui.
  • Atualização das exportações da ExceptionsManager
    • Como parte de nossos esforços para modernizar a API JavaScript do React Native, atualizamos ExceptionsManager para agora exportar um objeto padrão ExceptionsManager, e SyntheticError como uma exportação secundária.

Queremos enviar um agradecimento aos membros da comunidade que lançaram contribuições significativas nesta versão:

  • Marc Rousavy por desenvolver e documentar a funcionalidade “Android: Faster App Startup” (Início mais rápido do aplicativo)
  • Kudo Chien e Oskar Kwaśniewski por trabalhar no pacote @react-native-community/javascriptcore e escrever a seção “JSC moving to Community Package” (JSC movendo-se para Pacote da Comunidade)
  • James Lawson por adicionar suporte à resolução de import subpath em Metro.

Ainda, queremos agradecer aos autores adicionais que trabalharam na documentação de recursos nesta postagem:

  • Rob Hogan pela seção “Novas funcionalidades do Metro”
  • Alex Hunt pelas seções “Remoção da depuração remota de JS” e “Módulos internos atualizados para exportar sintaxe”
  • Riccardo Cipolleschi pelo trabalho na registro de módulo nativo iOS

Atualização para 0.79

Por favor, use o React Native Upgrade Helper para ver as alterações de código entre versões do React Native em projetos existentes, além dos documentos de atualização.

Para criar um novo projeto:

npx @react-native-community/cli@latest init MyProject --version latest

Se você usar o Expo, o React Native 0.79 será suportado na futura versão do SDK Expo 53 como a versão padrão do React Native.

0.79 é agora a última versão estável do React Native e 0.76.x passa para não suportado. Para mais informações, consulte a política de suporte do React Native. Nosso objetivo é publicar uma atualização final de fim de vida para 0.76 no futuro próximo.

Fonte original

Conteúdo traduzido e adaptado pela redação do Notícias Mobile. Confira também a matéria na fonte original.

Leia a matéria completa