A construção de aplicativos móveis de plataforma cruzada usando JavaScript foi uma virada de jogo para os desenvolvedores de JavaScript. Os desenvolvedores não apenas podem criar aplicativos que são executados na web, mas também podem criar aplicativos nativos para Android e iOS que são executados com JavaScript.
Estruturas como React Native e NativeScript tornam a construção elegante, eficiente e pronta para produção e aplicativos móveis escaláveis com JavaScript fácil. Mas, qual é o melhor para os desenvolvedores?
Antes de compararmos as duas tecnologias, devemos entender os problemas que ambos resolvem de forma única e suas visões.
O que é NativeScript e React Native?
A visão do NativeScript é “Liberar seu desenvolvimento usando APIs de plataforma diretamente, sem deixar seu [amor] por JavaScript.” Pense no NativeScript como a ferramenta necessária ao criar aplicativos móveis de plataforma cruzada com JavaScript em uma equipe agnóstica de framework.
Portanto, se o framework JavaScript de sua escolha é Vue, React, Svelte, Angular ou até Vanilla JavaScript, NativeScript cobre isso!
O React Native, por outro lado, é uma biblioteca JavaScript criada pelo Facebook que constrói aplicativos móveis nativos usando React, o que significa que não podemos construir aplicativos móveis com React Native usando Vue, Angular ou qualquer outra estrutura JavaScript por aí.
Isso não significa que todos os aplicativos React Native no App ou Play Store sejam construídos com JavaScript puro, porque há casos em que os desenvolvedores devem escrever código nativo com Swift/Objective-C ou Java/Kotlin para acessar APIs nativas não disponíveis para JavaScript por padrão.
Com isso em mente, vamos ver como React Native se compara a NativeScript e, no final deste post, você deve ser capaz de escolher a melhor estrutura para você ou sua equipe ao construir aplicativos móveis com JavaScr ipt.
Suporte da comunidade
O suporte da comunidade é um dos fatores mais importantes a se considerar ao escolher a estrutura certa. Pode parecer surpreendente, mas o NativeScript existe há mais tempo que o React Native. O lançamento inicial do NativeScript foi em 2014 , enquanto React Native foi lançado inicialmente em março 26, 2015 .
Embora a diferença de um ano possa parecer uma vantagem, o crescimento e a taxa de adoção do React Native é muito maior do que o NativeScript. A partir desta data de publicação, React Native registra cerca de 533 mil downloads semanais no npm , enquanto NativeScript registra pouco menos de 7 mil downloads semanais .
Quando se trata de contribuidores, React Native facilmente vence com mais de 2.200 colaboradores no GitHub enquanto NativeScript tem 208 colaboradores . E, NativeScript é usado por mais de 3,5 mil desenvolvedores enquanto React Native é usado por pouco menos de 720 mil desenvolvedores no GitHub .
Esta ampla margem mostra a ampla adoção do React Native pela comunidade de desenvolvedores e afeta o número de bibliotecas de terceiros, correções de bugs e respostas no StackOverflow.
O suporte da comunidade também é importante porque determina o número de recursos disponíveis para aprender sobre cada um framework, como postagens de blog, cursos pagos e gratuitos, e-books e vídeos do YouTube.
Quando se trata de suporte da comunidade, o React Native leva a vitória como mais popular.
Primeiros passos
Configurando um projeto React Native
Começar e configurar um projeto React Native pode ser desafiador para desenvolvedores da web que são novos no mundo desenvolvimento de bile. No entanto, graças à Expo, é muito fácil começar a usar React Native .
Embora a Expo tenha algumas limitações , essas limitações não afetam a maioria dos aplicativos criados com o Expo.
Os desenvolvedores também podem usar o Expo Go, um aplicativo móvel criado pela equipe da Expo para executar React Native em um dispositivo físico Android e iOS, digitalizando o código QR para instalar um aplicativo em um dispositivo físico.
Começar com React Native é mais fácil para os desenvolvedores vindo de um plano de fundo React. Mas, se o seu JavaScript principal de escolha for Angular, por exemplo, a curva de aprendizado pode ser íngreme.
Configurando um projeto NativeScript
Começar com NativeScript é bastante fácil com o modelos oficiais ao inicializar um aplicativo NativeScript . Você pode inicializar um aplicativo NativeScript com uma gaveta lateral já configurada executando o seguinte comando no terminal:
create myNsApp–template @ nativescript/template-drawer-navigationA melhor coisa sobre NativeScript é que ele é agnóstico em termos de estrutura, o que significa que você pode construir aplicativos móveis com NativeScript usando uma estrutura JavaScript como Angular, Vue, Svelte, React, ou até Vanilla JavaScript.
No entanto, NativeScript sincroniza melhor com Angular mais do que qualquer outra estrutura porque a equipe NativeScript trabalha com o Google para garantir que ambas as ferramentas funcionem perfeitamente ao construir aplicativos móveis.
Por usando o aplicativo NativeScript Playground , você pode executar seus aplicativos em um Android físico e Dispositivo iOS, assim como Expo Go.
No geral, o aplicativo Expo Go oferece uma experiência de desenvolvedor melhor do que o playground NativeScript, então isso é uma vantagem f ou desenvolvedores que procuram uma experiência de configuração mais simples.
Hot reload
O recurso hot reload é muito importante no desenvolvimento de aplicativos móveis porque melhora drasticamente a produtividade do desenvolvedor. Nenhum desenvolvedor quer esperar mais de um minuto para ver cada pequena mudança injetada em seu aplicativo móvel durante a fase de desenvolvimento.
Nesta seção, veremos como o React Native e o NativeScript lidam com o hot reload.
React Native fast refresh
Na versão 0.61 do React Native, a equipe anunciou um recurso chamado atualização rápida . A atualização rápida unificou o recurso de recarregamento ao vivo já existente e os recursos de recarregamento a quente nas versões anteriores do React Native.
Com a atualização rápida ativada, você pode fazer alterações em seu aplicativo e ver as alterações quase que instantaneamente. Por padrão, este recurso preserva o estado local em componentes funcionais, mas não em componentes de classe.
Você também pode chamar a atualização rápida manualmente usando a diretiva//@refresh reset em seu componente React Native, forçando o componente a remontar.
Substituição de módulo ativo NativeScript
O recurso Hot Module Replacement (HMR) do NativeScript foi lançado no NativeScript 5.3 . Ele oferece suporte à depuração de código do Visual Studio, permitindo que os desenvolvedores usem o depurador mesmo enquanto o recurso HMR ainda está em execução.
Ele também tem suporte total para arquivos SASS, o que significa quando você faz alterações em um.scss ou.sass arquivo em seu aplicativo, eles refletem em seu aplicativo durante o desenvolvimento; O HMR funciona ao adicionar ou excluir um arquivo do diretório do aplicativo NativeScript.
Também há suporte para alterações de script em um arquivo.vue, mas tem um limitação ao trabalhar com TypeScript no Vue , e há suporte HMR completo em projetos Angular NativeScript prontos para uso, sem configurações extras necessárias!
Tanto o HMR quanto a atualização rápida têm desempenho semelhante e ambos possuem recursos inteligentemente desenvolvidos, como depuração para Visual Studio Code em NativeScript e resiliência a erros no React Native .
APIs nativas
APIs do React Native
O React Native vem com alguns itens básicos fora de uso módulos prontos, mas há casos em que você pode precisar de recursos nativos para os quais o React Native ainda não possui um módulo correspondente. Nesses casos, você deve escrever módulos nativos para se comunicar com APIs nativas.
Alcançar isso requer pontes especiais , que requerem algum nível de conhecimento em desenvolvimento nativo. No entanto, com o tamanho do ecossistema do React Native, você provavelmente encontrará um módulo nativo existente no GitHub ou npm.
APIs NativeScript
Acessando APIs de plataforma nativa em NativeScript é o recurso mais importante de NativeScript . Os desenvolvedores podem chamar APIs de plataforma de JavaScript em vez de escrever código nativo com Objective-C ou Kotlin.
É aqui que NativeScript tem uma vantagem sobre React Native porque os desenvolvedores de JavaScript não precisam de experiência em uma linguagem de plataforma específica para trabalhar com APIs nativas.
React Native e desempenho NativeScript
Aplicativos NativeScript são geralmente mais lentos porque a estrutura emprega uma abordagem de thread único para acessar APIs de dispositivos nativos.
Ao contrário do NativeScript, os aplicativos React Native usam um modelo multithread em que o JavaScript e a interface de um aplicativo são executados em threads separados. Portanto, ao construir um aplicativo móvel em que o desempenho é um fator chave, o React Native é sua melhor aposta.
O React Native também oferece renderização de IU mais rápida porque usa o DOM virtual para atualizar IUs do aplicativo, semelhante ao React.
Documentação NativeScript e React Native
A documentação do NativeScript é fácil de entender e tem algumas ilustrações realmente excelentes sobre como implementar coisas como animações , gestos , solicitações HTTP e compartilhamento de código .
E, com casos de uso específicos de NativeScript com Svelte e Vue , há documentação separada. Mas na maioria das vezes, os desenvolvedores devem aprender como as coisas funcionam no ecossistema NativeScript fora dos documentos oficiais.
O React Native tem um ecossistema mais maduro do que o NativeScript, e com isso vem a expectativa de que documentação é explícita porque é acessada por iniciantes e especialistas em desenvolvimento de aplicativos móveis multiplataforma.
No entanto, embora a documentação seja acessível, faltam detalhes, o que pode tornar alguns conceitos confusos para iniciantes.
Criando aplicativos React Native com Expo e usando os documentos da Expo simplifica o trabalho com a documentação do React Native como um iniciante na construção de um aplicativo React Native funcional.
Nenhum dos dois tem a melhor documentação, e os desenvolvedores que usam os dois frameworks geralmente devem ir além da documentação oficial para aprender todos os aspectos dos frameworks.
Empresas que usam NativeScript e React Native
O React Native é usado atualmente na produção pelos principais fabricantes DS e empresas como Facebook , Bloomberg , Coinbase , Discord , Tesla e mais . Isso prova o quão grande e popular o React Native se tornou.
O mercado do Facebook também é desenvolvido com React Native , provando que se você tiver um aplicativo móvel existente escrito em um idioma nativo, poderá adotar o React Native progressivamente para construir diferentes partes do seu celular aplicativo.
Embora o React Native receba o destaque aqui, isso não significa que o NativeScript não possa resolver os problemas de negócios que o React Native resolve para as empresas que o utilizam. Olhando para os aplicativos incríveis aqui construídos com NativeScript mostra que ele pode criar aplicativos móveis prontos para produção.
Conclusão
Construir um aplicativo móvel com JavaScript como desenvolvedor da web é uma experiência incrível porque a linguagem é executada em navegadores da web para construir aplicativos nativos para Android e iOS. De todas as estruturas de JavaScript para a construção de aplicativos de plataforma cruzada, React Native e NativeScript estão no topo.
Neste post, cobrimos o que torna cada estrutura única e até que ponto eles cresceram. A escolha de qualquer uma das estruturas depende, em última análise, dos requisitos de um aplicativo móvel, custo de desempenho, estrutura JavaScript preferencial, conhecimento prévio de desenvolvimento de aplicativo móvel e APIs nativas necessárias.
A partir das perspectivas acima, você deve ser capaz de tomar decisões informadas ao escolher uma estrutura de aplicativo móvel de plataforma cruzada para seu próximo projeto.
Sinta-se à vontade para deixar um comentário e me dizer o que você achou deste artigo. Você também pode me encontrar no Twitter e LinkedIn . Obrigado por ler!
