A história do desenvolvimento de aplicativos híbridos é interminável. Cada estrutura precisa se esforçar e inovar continuamente para permanecer relevante, e a discussão sobre que a estrutura a ser usada é uma pergunta frequente.
A maioria dos aplicativos híbridos é criada usando uma combinação de HTML, CSS e JavaScript. Esses aplicativos podem variar de soluções baseadas em WebView (como o Cordova/PhoneGap) a outras que não são na verdade “híbrido”, mas executado nativamente no dispositivo (como o NativeScript).
Usando o tempo de execução do iOS do NativeScript como exemplo, podemos ver que nosso código de aplicativo JavaScript, plug-ins e módulos são passados para uma máquina virtual JavaScript (V8 para Android ou JavaScriptCore do WebKit para iOS). Essa máquina existe no dispositivo e, portanto, é responsável por interagir com o código nativo.
Isso serve apenas para dar uma visão geral de alto nível das diferenças entre as abordagens baseadas em WebView/nativo. Não se preocupe com todos os detalhes!
Como, dessa forma, podemos aproveitar a camada nativa, temos a capacidade de acessar APIs nativas sem a necessidade de usar aplicativos como o Cordova ou o PhoneGap.
O processo de desenvolvimento de software para aplicativos móveis nativos envolve a criação de um aplicativo para cada sistema operacional (geralmente iOS e Android), enquanto os aplicativos híbridos de plataforma cruzada e nativos de JavaScript são escritos uma vez, mas podem ser criados para vários sistemas operacionais, fazendo referência ao princípio “write once, run everywhere”.
Então, por que deveríamos criar aplicativos nativos? Bem, se o senhor deseja criar experiências que se estendam a wearables, TVs ou alvos semelhantes, talvez tenha mais sucesso usando uma abordagem nativa. Existem alguns abordagens de plataforma cruzada para isso, como NativeScript -> Android TV ou SDK de visualização do watchOS da Xamarin.
O que um usuário deseja
Do ponto de vista de um usuário, não deve haver diferença entre um aplicativo híbrido e um nativo. Seus usuários não se importam com como o aplicativo foi criado, eles se preocupam em saber se ele atende aos seus padrões.
A empresa determina quais plataformas são necessárias e o cada aplicativo quer atingir o maior número possível de usuários. O consumidor médio tem vários dispositivos e espera que um aplicativo funcione em vários dispositivos.
Portanto, a distribuição desempenha um papel importante no sucesso de um aplicativo e nas plataformas que recebem o desenvolvimento de aplicativos híbridos multiplataforma certo atender a essa necessidade.
O que um desenvolvedor deseja
Os desenvolvedores pensam da mesma forma. Embora o tema híbrido ou nativo ainda seja muito debatido, nenhum desenvolvedor quer manter várias bases de código quando tem a opção de oferecer suporte a apenas uma. Fiz ao meu público algumas perguntas relacionadas a isso:
Termine a frase: Ao criar um aplicativo móvel, eu…
– Paul Halliday (@paulhalliday_io) 29 de abril de 2018
Desenvolvimento híbrido ganha quase por unanimidade para o que um desenvolvedor desejae apenas uma pequena porcentagem de pessoas prefere os SDKs nativos.
Fiz um vídeo semelhante a este artigo no início do ano passado, e o senhor verá que muita coisa mudou desde então. O Flutter cresceu em popularidade desde que se tornou beta, o NativeScript lançou o NativeScript-Vue 1.0, o Ionic 4 está a caminho e muito mais!
Que opções existem para os desenvolvedores híbridos em 2018? Aqui estão meus pensamentos.
Flutter
O Flutter é uma estrutura interessante para o Dart que se concentra no conceito de Widgets (leia-se: Componentes). Ele ainda está na versão beta e não tem uma grande quantidade de recursos de aprendizado, mas eu o recomendaria para quem procura uma solução baseada em Dart.
Ele oferece suporte a uma variedade de recursos de desenvolvimento móvel esperados, como hot reloading, acesso à API do dispositivo, criação de perfil de desempenho e muito mais. Há até mesmo suporte experimental para aplicativos incorporados de desktop com o Flutter com suporte atual para macOS e Linux.
Quanto à adoção e ao suporte futuros, o Google parece estar criando muito conteúdo sobre o Flutter, além de falar sobre ele no Google I/O 1, 2. Embora possa não haver muitas perspectivas para o Flutter agora, entrar cedo e aprender a estrutura agora provavelmente valerá a pena quando ele atingir maior popularidade.
Combinado com isso, o senhor consegue adivinhar o que alimenta o novo sistema operacional Fuschia do Google? O Dart. O Flutter já faz parte do projeto e está alimentando aplicativos criados com base nele, conforme referenciado aqui.
Uma possível desvantagem do Flutter é a falta de uma linguagem de modelos. Quem tem experiência em desenvolvimento de aplicativos está acostumado a usar modelos baseados em XML e, na maioria das vezes, essa é uma maneira confortável de desenvolver visualizações.
Flutter atualmente não tem esse luxo, e suas exibições são simplesmente o resultado do código: (fonte):
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('AnimatedList'),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.add_circle),
onPressed: _insert,
tooltip: 'insert a new item',
),
new IconButton(
icon: const Icon(Icons.remove_circle),
onPressed: _remove,
tooltip: 'remove the selected item',
),
],
),
body: new Padding(
padding: const EdgeInsets.all(16.0),
child: new AnimatedList(
key: _listKey,
initialItemCount: _list.length,
itemBuilder: _buildItem,
),
),
),
);
}
Iônico 4
O Ionic está no jogo dos aplicativos híbridos há muito tempo, ostentando um alto desempenho do WebView que só melhora com o lançamento do Stencil. Se o senhor quiser entrar no Ionic pela primeira vez sem fazer download de quaisquer dependências, confira StackBlitz e os modelos do Ionic.
O Ionic usa principalmente o WebView para exibir conteúdo, com o WKWebView agora sendo fornecido como padrão. Quando comparado com a versão anterior do UIWebViewanterior, os aplicativos Ionic no iOS tiveram melhorias substanciais de desempenho e estabilidade.
Leia mais sobre O que é um WebView?
Agora que todos os componentes do Ionic foram criados com o compilador Stencil, os desenvolvedores podem esperar usar o Ionic ao lado de qualquer framework JavaScript, biblioteca (ou mesmo Vanilla) de sua escolha.
Essa abordagem orientada por componentes da Web significa que os componentes são criados uma vez sem que o estar preso a uma estrutura específica. O Ionic não depende mais do sucesso do Angular e deve ter uma adoção significativamente maior com a capacidade de misturar e combinar pilhas de tecnologia.
Um dos principais pontos fortes do Ionic é a documentação. A riqueza de exemplos e a visualização subsequente dentro do navegador permitem uma curva de aprendizado mais fácil. Depois de ver uma prévia da documentação do Ionic 4, isso só está melhorando!
A CLI do Ionic é bastante fácil de usar, e a forte integração com o Cordova significa que criar seu aplicativo para produção ou executá-lo em um dispositivo é tão simples quanto digitar ionic cordova run ios.
Saiba mais sobre Atualizar seus aplicativos Ionic híbridos para nativos.
Se não quiser conectar o dispositivo, o senhor pode simplesmente executar ionic serve e carregar o Ionic DevApp em seu dispositivo móvel.
Portanto, o Ionic é uma ótima opção para quem deseja criar aplicativos móveis e versão(ões) web de seus produtos. Talvez o senhor não obtenha desempenho de nível nativo devido ao WebView, mas essa troca de desempenho é compensada pela portabilidade. Apenas certifique-se de eliminar a funcionalidade específica do Cordova.
NativeScript 4.0
NativeScript lançou recentemente a versão 4.0 e permite que os desenvolvedores criem aplicativos multiplataforma verdadeiramente nativas aplicativos voltados para iOS e Android. A grande vantagem do NativeScript é a adaptabilidade: há suporte para vanilla JavaScript, TypeScript, Angular e, mais recentemente, Vue.
Confira o próximo webinar sobre NativeScript que abordará estratégias de compartilhamento de código Angular e Vue com a Web.
Usando o Angular NativeScript como exemplo, o senhor pode aproveitar todo o conhecimento que tem sobre o Angular e aplicá-lo à criação de aplicativos nativos. Por exemplo, um padrão comum no Angular é dividir as rotas em seu próprio pacote para carregá-las somente quando necessário (também conhecido como lazy loading). Também podemos fazer a mesma coisa no Angular NativeScript:
Desempenho
Como os aplicativos NativeScript têm uma ponte JavaScript -> Native, o senhor pode esperar ver o desempenho em nível nativo. Podemos ver um exemplo disso com meu vídeo sobre transições de página, pois estamos usando o sistema operacional para conseguir isso, podemos esperar animações de 60 FPS e a mesma experiência que a nativa.
Se compararmos isso com uma versão web da mesma experiência, teríamos que recriar a animação com o Web Animations e correr o risco de não ter o desempenho ideal.
As animações não são a única coisa que temos que considerar quando falamos de desempenho, as listas preenchidas também são um gargalo.
Mais uma vez, obtemos o benefício do nativo ao usar o NativeScript, pois temos a capacidade de usar um ListView que compila para um android.widget.ListView ou UITableView
APIs nativas
O acesso às APIs nativas também é superfácil, com a capacidade de pegar o código Swift e Java da documentação do Android/iOS e, com algumas pequenas alterações, acessar esses recursos.
Criei um vídeo de exemplo disso, escrevendo nosso TypeScript com base na documentação do Android. Assista-o abaixo!
Felizmente, na maioria das vezes, o senhor pode simplesmente usar um plug-in de terceiros já criado que implementa a funcionalidade nativa para você. No entanto, se o senhor precisar para fazer isso por conta própria, pelo menos o senhor viu como é fácil!
Depuração
Como desenvolvedor da Web, ao ouvir as palavras “aplicativo nativo”, o senhor seria perdoado por pensar que teria de abrir mão de suas preciosas ferramentas de desenvolvimento do Chrome, com pouca ou nenhuma maneira de depurar um aplicativo em execução. Mais uma vez, o uso disso ainda é possível com o NativeScript para iOS e Android.
O senhor pode fazer tudo, desde inspecionar erros, alterar propriedades de elementos, usar o depurador e muito mais. Para ver uma lista completa do que é possível, confira aqui.
NativeScript Sidekick
As ferramentas e o ecossistema circundante são importantes quando se trabalha com equipes maiores, pois a capacidade de reduzir o nível de integração permite uma melhoria líquida no ROI.
“Até mesmo os super-heróis precisam de um companheiro”, afirma Ajudante do NativeScript que fornece uma GUI para (e capacita) a CLI do NativeScript com modelos, plug-ins e muito mais.
Se o senhor está cansado de ter que se lembrar de todos os comandos CLI de suas ferramentas favoritas, o Sidekick será muito útil!
NativeScript Playground
O NativeScript Playground permite que o senhor inicie um projeto a partir do navegador da Web e é excelente para compartilhar exemplos menores ou criar protótipos. Basta acessar https://play.nativescript.org/ e crie um novo Playground com o modelo de sua escolha.
O senhor pode acessar o aplicativo fazendo o download do aplicativo complementar NativeScript Playground em iOS ou Androide escanear o código QR.
Este é um ótima maneira de experimentar o NativeScript pela primeira vez sem ter que baixar nenhuma dependência de suporte.
Compartilhamento de código
Conforme discutido em meu Conversão de aplicativos Web NativeScript curso em NativeScripting.comSe o senhor tiver uma visão geral do desenvolvimento móvel/web, a possibilidade de compartilhar código entre a Web e o dispositivo móvel é uma grande vantagem.
Há algumas maneiras de fazer isso com o NativeScript, primeiro, usando o Semente de NativeScript da TeamMaestro. Isso permite que o senhor crie componentes móveis com o .tns.ts e componentes da Web com .ts.
Como alternativa, com os espaços de trabalho do NX e o novo Angular CLI Schematics, xplat by nStudio oferece aos desenvolvedores a capacidade de criar aplicativos multiplataforma voltados para o NativeScript e a Web com facilidade.
Vale a pena considerar isso para qualquer equipe que pretenda fazer tanto a web quanto o e versões nativas de seus produtos.
Interessado em saber mais sobre o compartilhamento de código da Web com o nativo? Dê uma olhada na seção próximo webinar sobre NativeScript.
NativeScript-Vue
O projeto comunitário NativeScript-Vue, que recentemente atingiu 1.0 traz o uso do Vue para a mesa. Embora eu seja um fã do Angular, estou usando o Vue.js mais do que qualquer outra estrutura de front-end no momento, e o NativeScript Vue preenche essa lacuna.
O senhor obtém todo o poder do NativeScript, mas com o mecanismo de renderização Vue. Se estiver procurando uma maneira de praticar suas habilidades em Vue, ou mesmo se já tiver muito Vue escrito, mas quiser um aplicativo móvel, o NativeScript Vue é o primeiro lugar por onde eu começaria.
O acesso a recursos nativos com plug-ins é muito simples. Veja como criei um aplicativo que usa o nativescript-toast com o {N} Vue em 5 minutos!
O compartilhamento de código também é possível (atualmente um trabalho em andamento) com o nativescript-vue-webpack-template disponível aqui: https://github.com/nativescript-vue/nativescript-vue-webpack-template.
Visualizações de modelo separadas podem ser fornecidas para o native e web versão(ões) de um aplicativo, permitindo aplicativos versáteis e acelerando o tempo de desenvolvimento.
Weex
Weex é uma estrutura criada pela Alibaba e recentemente selecionada pela Apache Incubator que usa Vue.js ou Rax para criar aplicativos móveis nativos. Como o mecanismo de renderização é desacoplado da camada de sintaxe, é muito provável que a quantidade de estruturas possíveis de usar com o Weex aumente com o tempo.
Semelhante ao NativeScript, o Weex tem um playground que pode ser usado para testar/desenvolver protótipos de aplicativos.
Ele tem um canal oficial do Gitter, mas atualmente só tem uma sala chinesa disponível. Isso pode dificultar a obtenção de suporte em tempo real, em comparação com os grupos do Slack de empresas como a NativeScript, Iônico, Fusívele assim por diante.
Como a maioria dos exemplos e plug-ins está em chinês, essa é atualmente a principal limitação que me impede de adotar o Weex e tentar usá-lo em projetos de teste.
Fusível
O Fuse é semelhante ao Flutter com o uso de um renderizador personalizado. Ele usa OpenGL para criar aplicativos móveis nativos com JavaScript, mas não tem componentes de interface do usuário para Android/iOS.
Com o uso da linguagem declarativa de modelos de UX, tudo é possível, desde a criação de elementos de UI até animações complexas, sem nenhuma sobrecarga.
O Fuse também vem com o Fuse Studio, uma ferramenta de desktop usada para auxiliar na criação de aplicativos Fuse. Pense nela como um editor WYSIWYG para aplicativos móveis. Eu prefiro trabalhar com o Fuse principalmente por meio de código, mas, como iniciante, o senhor pode achar o Fuse Studio útil.
Recentemente, ele acabou de se tornar totalmente open source, sem modelo de negócios pago, em Fuse Open. Isso significa que o senhor tem acesso a todos os plug-ins, temas e recursos pagos anteriormente. Evidentemente, isso é ótimo para a comunidade, mas com a desaceleração do desenvolvimento interno, o sucesso pode depender do grau de adoção generalizada.
Portanto, o Fuse é uma opção interessante para quem quer experimentar algo novo. Eu me diverti muito com ele e acho que, para aplicativos que se esforçam para ter uma interface de usuário peculiar, vale a pena considerar o Fuse.
React Native
O React Native é bastante popular e tem uma comunidade bastante grande. Ele também está sendo apoiado por grandes empresas, como Facebook, Instagram, Airbnb e outras. Trata-se de uma estrutura JavaScript criada com o React, mas, em vez de ser voltada para o navegador, é voltada para plataformas móveis com diferentes elementos de interface do usuário.
Essencialmente, ele usa uma ponte JavaScript -> Native que renderiza componentes específicos da plataforma com o Virtual DOM, permitindo que o React seja usado para desenvolver aplicativos móveis para as plataformas iOS e Android. Como estamos compilando para nativo, não há WebViews com que se preocupar aqui.
Um benefício de uma comunidade maior são os plug-ins mais associados. O senhor pode se aprofundar nos recursos nativos usando plug-ins orientados pela comunidade ou criar seus próprios plug-ins com o módulos nativos.
O React Native também oferece suporte ao Hot Reloading, tornando o desenvolvimento mais rápido, pois o usuário não precisa esperar que o aplicativo seja reiniciado após cada alteração. Isso é ótimo para momentos em que o usuário está fazendo muitas pequenas alterações.
Uma possível desvantagem disso (para alguns) é que ele ainda não está na versão 1.x. Isso significa que o senhor poderá entrar em produção com uma estrutura que é 0.x e algumas equipes classificariam isso como instável.
Se você gosta de trabalhar com o React (ou sua equipe já gosta), então o React Native pode ser uma opção óbvia para você.
Conclusão
O desenvolvimento moderno de aplicativos híbridos deixa o desenvolvedor quase sem opções em 2018. Quais projetos eu recomendo? Isso depende de suas necessidades:
Estou procurando uma solução JavaScript nativa
NativeScript. É a estrutura mais versátil de todasO senhor pode usar JavaScript, TypeScript, Angular ou Vue, cada um resultando em aplicativos nativos sem um WebView que limita o desempenho.
Estou procurando uma solução versátil para atingir o maior número possível de pessoas
Se o desempenho do aplicativo não for crítico, eu recomendaria Ionic. O senhor pode criar PWAs, aplicativos para desktop e aplicativos para iOS/Android graças ao Cordova e ao Electron. Com o lançamento do Ionic 4 e do Stencil, é provável que a experiência de desenvolvimento só melhore.
Quero usar o React para criar aplicativos móveis
React Native ou Iônico 4 (lançado no final deste ano) é a melhor opção aqui. Conforme mencionado anteriormente neste artigo, o React Native ainda não atingiu a versão 1.0, mas já está sendo usado por empresas de primeira linha e oferece a capacidade de criar aplicativos nativos primeiro.
Estou procurando aprender algo de ponta
Eu recomendaria que o senhor desse uma olhada no Flutter. Não é a estrutura mais popular no momento, mas é extremamente promissora para o futuro. Isso seria interessante para aqueles que estão procurando aprender novas linguagens, como Dart.