Contente
- PWAs x aplicativos nativos: qual é a diferença?
- Aplicativos da web progressivos: Construindo para a web
- Forças de PWAs
- Fraquezas dos PWAs
- React Native
- Forças de reagir nativo
- Fraquezas do React Native
- NativeScript
- Pontos fortes do NativeScript
- Fraquezas do NativeScript
Qual abordagem você deve adotar ao criar um aplicativo? Você deve seguir a rota das tecnologias PWA / web ou deve usar o design nativo para plataformas específicas? Ambas as opções têm seus prós e contras e, neste artigo, nos concentramos em algumas das escolhas populares usadas para criar aplicativos da web e nativos.
Os PWAs (Progressive Web Apps), também conhecidos como aplicativos da web, são desenvolvidos com tecnologias populares da web HTML, CSS e JavaScript e funcionam em um navegador da web. (Confira algumas das tags HTML essenciais para ajudar em suas compilações.) PWAs são sites efetivamente móveis projetados para se parecerem com um aplicativo, e o uso de APIs da web fornece a eles funcionalidade semelhante a um aplicativo nativo.
Para obter mais conselhos sobre a construção de aplicativos, consulte nossa postagem sobre como fazer um aplicativo ou, se for um site que você deseja criar, consulte esses principais construtores de sites e serviços de hospedagem na web.
PWAs x aplicativos nativos: qual é a diferença?
Os Progressive Web Apps têm a vantagem de serem instaláveis e ativos em um dispositivo sem a necessidade de uma loja de aplicativos. E, parte do processo é o Manifesto de Aplicativo da Web, que permite aos desenvolvedores controlar como um aplicativo aparece e como é iniciado. Além disso, web designers / desenvolvedores front-end já terão o conjunto de habilidades necessárias para começar a construir imediatamente. Não há necessidade de aprender um novo idioma, ao contrário dos aplicativos nativos.
Os aplicativos nativos são desenvolvidos com um sistema operacional específico em mente - ou seja, iOS e Android - e use uma estrutura ou linguagem para cumprir esse propósito. Os aplicativos iOS geralmente usam Xcode ou Swift, e os aplicativos Android, JavaScript. Mas, para este artigo, nos concentramos em algumas estruturas de código aberto baseadas em JavaScript - React Native e NativeScript - que funcionam para ambas as plataformas.
As vantagens dos aplicativos nativos é que eles normalmente trazem melhor funcionalidade, pois fazem melhor uso do hardware e software de um dispositivo, são mais rápidos e responsivos e você obtém garantia de qualidade por meio de classificações em lojas de aplicativos. Mas, isso significará ter que aprender como usar uma estrutura ou biblioteca específica.
Aqui, examinamos três opções diferentes - uma para web (PWAs) e duas para nativas (React Native, NativeScript) - para construir um aplicativo. Examinamos como eles funcionam, o que podem fazer e analisamos seus pontos fortes e fracos para ajudá-lo a decidir qual opção deve escolher para construir seu aplicativo.
Aplicativos da web progressivos: Construindo para a web
Forças de PWAs
- Os aplicativos também funcionam no navegador
- Distribuição: navegador, empresa e lojas de aplicativos
- Pode utilizar React, Angular, Vue, vanilla ou outras estruturas
Fraquezas dos PWAs
- Sem acesso a todas as APIs nativas
- Habilidades e distribuição de loja em iOS e iPadOS são limitadas
- Está em evolução contínua
Os PWAs são o padrão de design atual para criar aplicativos instaláveis off-line de alto desempenho usando apenas a pilha da web: HTML, CSS, JavaScript e APIs de navegadores. Graças ao service worker e às especificações do manifesto do aplicativo da web, agora podemos criar uma experiência de aplicativo de primeira classe após a instalação para Android, iOS, iPadOS, Windows, macOS, Chrome OS e Linux.
Para criar PWAs, você pode usar qualquer arquitetura: do lado do servidor, vanilla JavaScript, React, Vue, Angular ou outras estruturas do lado do cliente. Pode ser um aplicativo de uma única página ou um aplicativo da web de várias páginas e nós definimos como iremos oferecer suporte aos usuários offline.
Nessa abordagem, não precisamos empacotar e assinar os recursos de nosso aplicativo: apenas hospedamos os arquivos em um servidor web e o service worker será responsável por armazenar os arquivos em cache no cliente e atendê-los após a instalação. Isso também significa que, se um aplicativo precisar ser atualizado, basta alterar os arquivos no servidor e a lógica do service worker será responsável por atualizá-los nos dispositivos dos usuários sem a intervenção do usuário ou da app store.
Em termos de distribuição, o método mais comum é o navegador. Os usuários instalam o aplicativo do navegador usando o item de menu Adicionar à tela inicial ou Instalar, aceitando um convite para instalar ou usando uma interface de usuário de aplicativo da web personalizada em plataformas compatíveis. É importante notar que a Apple rejeita PWAs puros publicados na App Store e incentiva os desenvolvedores da web a distribuí-los por meio do Safari.
A interface do usuário é puramente gerenciada pelo tempo de execução da web, o que significa que o web designer é responsável por renderizar cada controle na tela. Se você usar uma estrutura de IU, como Ionic ou uma biblioteca de Material Design, HTML e CSS irão imitar interfaces nativas no Android ou iOS, mas não é obrigatório.Ao fazer PWAs, a aplicação de técnicas de desempenho na web é obrigatória para manter uma boa experiência do usuário.
Em termos de habilidades, um PWA terá acesso apenas às APIs disponíveis no mecanismo do navegador nessa plataforma e não pode ser estendido com código nativo - com exceção das distribuições de PWA da app store. Nesse caso, iOS e iPadOS são as plataformas mais limitadas para PWAs, enquanto o Chrome (para sistemas operacionais Android e desktop) tem mais disponibilidade e está trabalhando duro para adicionar todas as APIs possíveis ao JavaScript com o projeto Fugu.
- Melhor armazenamento em nuvem: Escolha a opção certa para você.
React Native
Forças de reagir nativo
- Mesmos padrões do React.js
- Algumas APIs da web são expostas
- Suporte para Web e desktop
Fraquezas do React Native
- Não é possível reutilizar os componentes da IU da web
- A ponte nativa precisa de algum trabalho
- Experiência de reação é necessária
React Native é uma estrutura de componente baseada em JavaScript de código aberto, patrocinado pelo Facebook, que usa padrões de design React, bem como linguagem JavaScript para compilar aplicativos nativos para iOS, iPadOS e Android a partir de um código-fonte.
Mas nenhum elemento HTML é aceito para renderização; apenas outros componentes nativos são válidos. Portanto, em vez de renderizar um div> com um p> e um entrada> elemento com JSX, você renderizará um Ver> com um Texto> e um TextInput>. Para componentes de estilo, você ainda usa CSS e o layout é definido por meio do Flexbox.
A interface do usuário não será renderizada no DOM do navegador, mas usando as bibliotecas de interface do usuário nativas no Android e iOS. Portanto, um Botão> no ReactNative se tornará uma instância do UIButton no iOS e o android.widget.Button aula no Android; não há tempo de execução da web envolvido no React Native.
No entanto, todo o código JavaScript será executado em uma máquina virtual JavaScript no dispositivo, portanto, não há conversão de JavaScript em código nativo real ao compilar o aplicativo. Existe um conjunto de APIs conhecidas para desenvolvedores web, como a Fetch API, WebSockets e os timers do navegador: setInterval e requestAnimationFrame. Outras habilidades são implantadas na plataforma por meio de APIs customizadas, como animações.
Você pode iniciar um projeto React Native rápido com dois CLIs gratuitos: Expo ou o ReactNative CLI mais avançado e oficial. Se você usa a CLI oficial, também precisa do Android Studio para compilar e testar o aplicativo Android e o Xcode para fazer o mesmo no iOS e iPadOS, portanto, você precisará de um computador macOS para essa plataforma.
O React Native compila aplicativos nativos para iOS e Android, o que significa que a distribuição do seu aplicativo seguirá as mesmas regras de outros aplicativos nativos: lojas de aplicativos para aplicativos públicos, distribuição empresarial e testes alfa / beta. Normalmente, não é possível distribuir um aplicativo por meio de um navegador, embora o React Native para Web e o React Native para plataformas Windows da Microsoft possam ajudar.
NativeScript
Pontos fortes do NativeScript
- Boas ferramentas para codificação e teste
- Galeria extensa de aplicativos prontos para jogar
- Todas as APIs Android e iOS são expostas em JS
Fraquezas do NativeScript
- Pequena comunidade
- Não é possível reutilizar os componentes da IU da web
- Sem suporte para Web, desktop ou React
NativeScript não é tão conhecido como React Native, mas compete no mesmo campo: aplicativos iOS e Android nativos de JavaScript e estruturas da web. Ele permite que você use JavaScript ou TypeScript e um arquivo de interface de usuário XML para criar aplicativos nativos. Ele também oferece suporte a Angular e Vue imediatamente, portanto, é uma ótima solução para desenvolvedores acostumados a essas estruturas.
As vantagens de NativeScript são mais claras quando você usa Angular ou Vue. Para Angular, você cria os mesmos componentes aos quais está acostumado, mas usando XML em vez de HTML para o modelo, incluindo todas as ligações de dados. No XML, em vez de um div> com um p> e um img>, você vai colocar um StackLayout> com um Etiqueta> e um Imagem> componente.
CSS e Sass são compatíveis com estilos semelhantes a CSS no navegador. O roteamento e o gerenciamento de rede são feitos por meio de implementações dos serviços Angular padrão. Para Vue, é algo semelhante; você escreve o modelo em XML em vez de usar HTML no mesmo template> elemento em seu arquivo .vue.
NativeScript inclui uma coleção de componentes que são mapeados para um controle nativo do Android ou iOS, portanto, quando você renderizar uma lista ou um seletor, será o aplicativo nativo, usando a mesma ideia do React Native.
Seu código JavaScript ou TypeScript (transpilado) é executado em uma máquina virtual JavaScript no dispositivo com uma ponte de / para o ambiente nativo. Nessa ponte, todas as APIs nativas do Android ou iOS / iPadOS são expostas, portanto, apesar de ter acesso a APIs de plataforma cruzada, podemos instanciar ou chamar qualquer código Java ou Objective-C de JavaScript / TypeScript e NativeScript para empacotar tipos de dados.
NativeScript tem um ótimo suporte para ferramentas, incluindo plug-ins de código VS, o CLI, um sistema de teste de recarregamento a quente e um aplicativo de playground NativeScript, então você não precisa instalar todas as dependências durante o teste, bem como vários serviços adicionais, como um online Parque infantil.
Finalmente, NativeScript apenas compila um aplicativo para Android e iOS que pode ser instalado a partir de canais de distribuição oficiais e lojas de aplicativos se você cumprir suas regras, distribuição corporativa e testes alfa / beta. Normalmente, não haverá como distribuir aplicativos de um navegador e não há soluções para aplicativos de desktop para esta plataforma.
Este artigo foi publicado originalmente em edição 325 da net, a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 325 ou se inscrever para a rede.
Junte-se a nós em abril de 2020 com nossa programação de superestrelas do JavaScript na GenerateJS - a conferência que ajudará você a construir um JavaScript melhor. Reserve agora emgenerateconf.com
