PWA vs React Native: uma visão detalhada

Da mesma forma que o PWA e o Flutter, o PWA e o React Native estão entre as principais abordagens populares para o desenvolvimento de aplicativos multiplataforma no momento. E ao pesquisar sobre esse assunto, é compreensível sentir-se confuso ao tentar decidir sobre o caminho certo de desenvolvimento para o seu negócio. Neste artigo, entraremos em detalhes sobre cada abordagem de desenvolvimento — do que são, seus casos de uso e os detalhes de como cada abordagem de desenvolvimento pode ser benéfica para seus negócios.

Os breves detalhes

Aqui estão os resumos rápidos de cada abordagem de desenvolvimento, bem como os casos de uso para os quais.

Aplicativo Web Progressivo (PWA)

Definições

O Progressive Web App (PWA) é uma solução promissora para o desenvolvimento de aplicativos baseados na web . Em sua essência, os PWAs contam com service workers e manifestos de aplicativos da Web para fornecer experiências semelhantes a aplicativos, que incluem recursos anteriormente exclusivos dos aplicativos, como notificações por push, disponibilidade offline, instalabilidade etc.

Casos de uso e exemplos

Devido à sua natureza baseada na web, os PWAs são mais adequados para sites cuja principal preocupação é fornecer experiências mais envolventes e independentes de conectividade – ou simplesmente para sites que desejam atingir um público mais amplo.

A partir de agora, os PWAs estão sendo amplamente adotados no setor de comércio eletrônico, onde recursos como notificações push e disponibilidade offline são necessários para melhorar as taxas de conversão de compras e construir uma base de clientes mais fiel.

 Leitura recomendada: 12 melhores exemplos de aplicativos da Web progressivos (PWAs) em 2021

Reagir nativo

Definições

React Native é uma estrutura para desenvolver aplicativos nativos verdadeiros baseados em JavaScript e multiplataforma. Aplicativos criados com React Native podem interagir com APIs nativas por meio do paradigma de interface do usuário declarativo do React e JavaScript – e isso significa que uma única base de código React pode ser usada para manter duas plataformas (iOS e Android), tudo sem comprometer a experiência dos usuários.

Casos de uso e exemplos

É difícil definir um caso de uso específico para o React Native, pois ele é usado para criar vários tipos de aplicativos, como aplicativos populares de mídia social (por exemplo, Facebook, Instagram, Pinterest, etc.), ou aplicativos de comunicação digital (por exemplo, Skype, Discord , Tencent QQ, etc). Para obter uma lista de aplicativos criados com o React Native, confira o showcase de aplicativos React Native.

Entrando nas especificidades

Na parte seguinte, abordaremos as especificidades de cada abordagem de desenvolvimento, bem como insights sobre como cada abordagem de desenvolvimento pode se encaixar no plano do seu negócio.

Linguagem

Os PWAs contam com tecnologias da Web para oferecer experiências semelhantes a aplicativos. Portanto, linguagens da Web como HTML, CSS e JavaScript ainda são as principais linguagens que compõem um PWA, enquanto os aplicativos React Native usam React.js (uma biblioteca JavaScript) como sua linguagem principal.

É por isso que, ao pesquisar o código de um aplicativo React Native, você deve vê-lo compartilhar algumas semelhanças com as linguagens da Web, com a única grande diferença é que os aplicativos React Native usam componentes nativos em vez de componentes da Web para criar a interface do usuário.

Interface de usuário

Como os PWAs são baseados nas tecnologias da Web e executados no mecanismo do navegador , a interface do usuário de um PWA típico pode não parecer tão nativa aos olhos treinados. No entanto, para os usuários típicos, as diferenças entre a interface do usuário semelhante ao aplicativo do PWA e a interface do usuário do aplicativo nativo verdadeiro são, no máximo, minúsculas.

Um aplicativo React Native, em vez disso, é capaz de fornecer experiências nativas verdadeiras , graças ao uso de componentes nativos - e estes incluem componentes específicos da plataforma, como <DatePickerIOS> e <ProgressViewIOS> para iOS, ou <ViewPagerAndroid> e <ToastAndroid> para Android.

atuação

Performance é um assunto delicado, pois é difícil chegar à verdade disso. No entanto, desde ambas as abordagens de desenvolvimento usam muito JavaScript, você pode esperar que o desempenho seja bastante semelhante em todas as extremidades - com uma pequena vantagem pertencendo ao React Native, pois é mais integrado ao sistema em uso e não precisa se comunicar por meio de um navegador.

No entanto, o fato de os PWAs viverem no ambiente do navegador não significa que ele funcione como um site comum. Graças ao método de cache avançado empregado em PWAs, não há mais soluços ocasionais ao carregar entre as páginas, como encontrado nos sites/aplicativos da web comuns; e juntamente com o fato de que os PWAs são essencialmente aplicativos de página única aprimorados, o desempenho percebido dos PWAs é o mais próximo possível de uma verdadeira experiência de aplicativo nativo.

Um exemplo disso é a Temoorst, marca sediada no Kuwait na indústria de produtos descartáveis. Com o SimiCart como fornecedor de soluções de escolha, a marca optou por um aplicativo nativo e um PWA para obter os melhores ROIs possíveis, e o aspecto de desempenho do PWA ainda é algo que a marca não esperava. Em um teste cego, você terá dificuldade em encontrar diferenças de desempenho - e visuais - entre o PWA e o aplicativo React Native.

Para testar a diferença de desempenho entre um aplicativo React Native e um PWA, recomendamos que você experimente os aplicativos Temoorst. Os próprios aplicativos são testemunhos de como um aplicativo React Native ou um PWA bem otimizado pode parecer quando levado ao máximo.

• Aplicativo React Native : Google Play Store | Loja de aplicativos da Apple
• PWA : https://temoorst.com/

Segurança

Devido ao maior nível de integração com o dispositivo em uso, um aplicativo React Native é naturalmente mais seguro e menos propenso a vulnerabilidades. Para adicionar mais camadas de segurança em um aplicativo React Native, existem várias abordagens a serem empregadas durante o processo de desenvolvimento, como:

• Fixação de SSL: para proteger conexões de aplicativo para servidor
• Keychain/sensitive-info: fornece armazenamento local seguro junto com autenticação biométrica/face
• Jscrambler: evite adulteração de código adicionando uma camada de autodefesa

Como os PWAs vivem no ambiente do navegador e aproveitam o navegador para a maioria de seus recursos, a maior parte do trabalho de segurança é feita pelo próprio navegador. Comparado a um site normal, um PWA é mais seguro, pois o componente principal do PWA - service worker - é executado apenas em HTTPS, o que significa que a comunicação entre o lado do cliente e o lado do servidor é sempre criptografada.

Os service workers são executados apenas por HTTPS. Como os service workers podem interceptar solicitações de rede e modificar respostas, os ataques “man-in-the-middle” podem ser muito ruins.

Introdução ao Service Worker

Descoberta

É aqui que os PWAs brilham. Os PWAs não apenas estão disponíveis na Web e expostos aos mecanismos de pesquisa, como também podem ser publicados nas lojas de aplicativos. Google, Microsoft e até Samsung se juntaram ao movimento para pressionar por mais adoção de PWAs, adotando PWAs reembalados em suas lojas de aplicativos. A Microsoft Store, por exemplo, vai um passo além e planeja repovoar automaticamente sua loja de aplicativos com PWAs de qualidade indexados por seus próprios rastreadores do Bing:

A Microsoft Store, alimentada pelo rastreador do Bing, indexará automaticamente o Progressive Web App de qualidade selecionada

Dando as boas-vindas aos Progressive Web Apps ao Microsoft Edge e ao Windows 10

A partir de agora, a Apple App Store é o único mercado de aplicativos popular remanescente onde o PWA não consegue alcançar. Isso ocorre porque a Apple deixou claro em suas diretrizes de revisão que, para ser aprovado, o aplicativo precisa estar “além de um site reembalado” – e essa é uma discussão totalmente diferente por si só, sobre como a Apple está desencorajando ativamente o desenvolvimento de a Web com medo de prejudicar seus resultados.
Comparado aos PWAs, a capacidade de descoberta de aplicativos criados com React Native não é tão impressionante, mas a natureza multiplataforma da estrutura significa que, com uma única base de código, você ainda pode descobrir seu aplicativo na Google Play Store e na Apple App Store. E considerando que os usuários do iOS são a maioria em alguns países (incluindo os EUA) - e que os PWAs não podem ser publicados na Apple App Store - isso deve ser motivo suficiente para optar pelo desenvolvimento de aplicativos React Native para atender onde a maioria dos seus usuários são..

Acessibilidade de hardware

Como os aplicativos React Native são verdadeiros aplicativos nativos, eles desfrutam de um acesso muito mais amplo às APIs nativas. E isso significa que mesmo acesso de baixo nível ao hardware do dispositivo (por exemplo, acesso a NFC (Near Field Communication), lista de contatos, etc.) e acesso sistêmico (por exemplo, acesso a configurações do sistema, logs, etc.) para melhorar a experiência do usuário.
E como o PWA depende das APIs da Web para acessibilidade de hardware, um PWA é naturalmente mais restrito em como pode utilizar os recursos do sistema. Na melhor das hipóteses - ou seja, se o navegador em uso suportar todas as APIs de acesso de hardware mais recentes - um PWA pode ter acesso a vários recursos de hardware anteriormente exclusivos de aplicativos nativos, como geolocalização, acesso a câmera e microfone, realidade aumentada (com WebXR API do dispositivo).

 Leitura recomendada: Progressive Web App (PWA) e acesso a hardware

Custos do desenvolvimento

Em termos de custos de desenvolvimento, os projetos React Native tendem a ser caros devido ao alto nível de complexidade envolvido. Por exemplo, é comum que um projeto React Native básico custe mais de US$ 15.000 , enquanto um projeto básico de PWA deve custar apenas cerca de US$ 1.000 a US$ 10.000. No entanto, em comparação com outras estruturas de aplicativos nativos, o React Native continua sendo uma solução econômica graças à sua arquitetura independente de plataforma. Com uma única base de código React Native, você pode publicar seu aplicativo na Google Play Store e na Apple App Store, reduzindo significativamente os custos totais de desenvolvimento sem prejudicar a experiência do usuário.

E embora normalmente seja mais barato do que os projetos React Native, o custo de desenvolvimento de um projeto PWA pode variar significativamente com base no caminho de desenvolvimento escolhido. Por exemplo, se você decidir usar a arquitetura headless (que é uma solução mais flexível e escalável em comparação com a arquitetura tradicional), pode esperar que os custos de desenvolvimento do seu PWA aumentem significativamente devido ao nível mais alto de conhecimento técnico necessário no processo .

Conclusão

Como esses são dois caminhos de desenvolvimento para necessidades muito específicas, escolher entre React Native e PWA pode ser uma decisão difícil. Um PWA é leve, com processos de atualização e instalação sem esforço, e os recursos e funcionalidades que o PWA fornece devem ser mais do que suficientes para o usuário médio do aplicativo. No entanto, devido às restrições atuais que a Apple impõe em suas App Stores, pode ser uma boa ideia investir em um bom aplicativo React Native se a maioria de seus usuários móveis estiver no iPhone.

Para os comerciantes Magento que desejam criar aplicativos React Native multiplataforma ou PWAs headless, aqui no SimiCart oferecemos soluções econômicas para ajudá-lo a obter uma vantagem competitiva sobre seus concorrentes.