Motivação

O desenvolvimento móvel multiplataforma está em constante evolução, o que pode ser justificado pela necessidade cada vez maior de entregar a mesma solução para diferentes plataformas, como iOS e Android.

Nesse cenário, é fundamental que saibamos escolher as ferramentas com as quais vamos trabalhar para desenvolver os aplicativos, para que tenhamos a produtividade maximizada, bem como a manutenção, testabilidade, entre outras questões, facilitadas. Sabendo disso, veremos nesse artigo o que são e quais as principais diferenças entre Xamarin, Ionic e Cordova, três das principais ferramentas de desenvolvimento móvel multiplataforma do mercado.

Os aplicativos nativos

A grande propaganda utilizada pela Apple e pelo Google para valorizar suas linguagens e ambientes de desenvolvimento (Swift/Objective-C e XCode, para iOS, e Java e Android Studio, para Android) é a qualidade, desempenho e a interface de usuário dos aplicativos nativos. Por causa dessas características os desenvolvedores tendem a optar por desenvolver um aplicativo para cada plataforma, de forma nativa.

Atualmente, no entanto, outros pontos estão sendo considerados, como velocidade e custo de desenvolvimento. É mais caro investir em desenvolvedores iOS e Android (e Windows/Windows Phone, eventualmente) para entregar aplicativos para essas plataformas, do que investir em apenas uma equipe especialista em Angular, com conhecimento em Ionic, ou especialista em C#, com conhecimento em Xamarin. Além disso, não podemos deixar de considerar os custos relacionados à manutenção. As principais vantagens do aplicativos nativos são:

  1. Uso dos recursos do dispositivo de forma direta;
  2. Desempenho ótimo, também por causa do acesso nativo às APIs;
  3. UI ideal, próxima daquilo que o usuário espera.

No entanto, também temos desvantagens, como:

  1. Custos mais altos de desenvolvimento e manutenção, demandando mais pessoal e tempo para manter códigos iOS, Android e UWP (Universal Windows Platform) separadamente;
  2. Linguagens de programação diferentes para as plataformas, o que pode gerar aplicações com comportamentos distintos.

Aplicações nativas multiplataforma: Xamarin

O Xamarin chega, em teoria, como a grande solução para acabar com os problemas citados anteriormente: manter as vantagens do desenvolvimento nativo e diminuir os custos através de um código multiplataforma. Na prática, no entanto, não é bem assim.

O Xamarin possibilita o desenvolvimento de aplicações nativas a partir do .NET Framework, utilizando a linguagem C#. Assim, o compilador irá gerar código nativo, que terá as vantagens do desempenho ótimo, da UI ideal e da utilização direta dos recursos do dispositivo, a partir das mesmas APIs utilizadas no XCode e/ou no Android Studio.

Entretanto, o Xamarin possui uma limitação: o código não é completamente reutilizado (compartilhado) nas plataformas alvo. O compartilhamento é limitado a cerca de 75% (dependendo da aplicação), uma vez que existe a necessidade de criação de código específico, ainda que em C#, para cada plataforma. Esse código inclui as interfaces de usuário, acesso a recursos do dispositivo, entre outros. Em outras palavras, há o compartilhamento do core da aplicação, mas outra grande parte do código necessita ser construída separadamente, com C#. Isso faz com que a curva de aprendizado do Xamarin não seja tão baixa, como o esperado, pois há a necessidade de aprendermos, também, conceitos relacionados a aplicativos iOS e Android (como a configuração de arquivos de layout, recursos e outros detalhes dessas plataformas). Isso pode ser visto com clareza na Figura 1.

Plataforma Xamarin
Figura 1. Plataforma Xamarin

É importante compreender que a grande vantagem do Xamarin está no produto final, que será uma aplicação nativa, e na sua facilidade de manutenção. Com apenas um time de desenvolvedores C#, utilizando ferramentas como o Microsoft Visual Studio (hoje, talvez, a IDE mais completa do mercado), é possível construir aplicações nativas para as principais plataformas móveis.

Na Figura 2, podemos observar que a estrutura do projeto desenvolvido com o Xamarin é relativamente simples e de fácil entendimento. Esse projeto foi criado como parte do curso Primeiros passos no Xamarin.

Projeto Xamarin com aplicações iOS, Android e Windows 8.1
Figura 2. Projeto Xamarin com aplicações iOS, Android e Windows 8.1

Ainda nessa figura, é possível observar os seguintes pontos:

  • ComecandoXamarin.iOS: projeto que traz o código específico para a plataforma iOS. Aqui, devem ser criados os códigos para a User Interface e acesso a recursos desse dispositivo, caso a aplicação faça uso deles;
  • ComecandoXamarin.Android: semelhante ao item anterior, mas tendo como alvo a plataforma Android;
  • ComecandoXamarin.Win: semelhante aos itens anteriores, mas tendo como alvo o Windows 8.1. Aqui, também poderíamos ter um projeto para Windows Phone, UWP, entre outros;
  • ComecandoXamarin.PCL: Local onde a “mágica” do Xamarin acontece. É na Portable Class Library que desenvolvemos o código compartilhado da aplicação. No exemplo do curso, esse código é bem simples, mas na prática o PCL viabiliza o reaproveitamento de, aproximadamente, 75% do código. Também é possível compartilhar código no Xamarin utilizando o Shared Assets Projects.

saiba mais Saiba mais sobre Xamarin

Ionic ou Cordova?

Antes de analisarmos o Ionic ou o Cordova, devemos entender algo muito importante: o Ionic é construído sobre o Cordova, isto é, o Apache Cordova>> é a camada inferior, que cuida da parte de transformação do aplicativo em pacotes para cada plataforma alvo, enquanto o Ionic cuida da parte visual da aplicação, de como ela será apresentada para o usuário final.

Afinal, o que é o Apache Cordova?

Em poucas palavras, podemos dizer que se trata de uma plataforma para desenvolvimento de aplicativos móveis que utiliza HTML, CSS e JavaScript para isso. Assim, a partir de um código central utilizando tecnologias web, podemos criar uma aplicação para várias plataformas mobile, como iOS ou Android.

Embora, na prática, as aplicações desenvolvidas com Cordova operem em cima de um "web view", isso não fica explícito para o usuário, passando a impressão de que a aplicação realmente se comporta como se nativa fosse. Dessa forma, o desempenho, embora inferior, não deixa muito a desejar em comparação com um aplicativo nativo. Por causa dessa e de outras características, trata-se de uma opção interessante e que vem sendo adotada em muitos projetos, ainda mais com o advento de outros frameworks construídos sobre dele, como é o caso do Ionic.

Outro ponto importante são as ferramentas para desenvolvimento com o Cordova. É possível, por exemplo, utilizar o Visual Studio, o que permite um ganho de produtividade para a equipe.

É válido ressaltar que a utilização do Cordova "sozinho" não é recomendada, pois muito do que o Ionic e outros frameworks possibilitam, é facilitar o desenvolvimento, criando soluções que realmente pareçam nativas, embora utilizem tecnologias web. Esses frameworks facilitam, principalmente, o desenvolvimento da interface de usuário.

Aplicações web que parecem nativas: Ionic

O Ionic é uma solução baseada no Apache Cordova< e que viabiliza alguns pontos importantes como diferencial, a exemplo de diferenciados recursos para a construção das interfaces de usuário. Sua ideia principal consiste em, utilizando tecnologias web, possibilitar o desenvolvimento de aplicações para dispositivos móveis com foco em performance, design e otimizações. Em uma definição simples, podemos dizer que o Ionic é um conjunto de componentes front-end que permite escrever código HTML, CSS e JavaScript que se assemelha a uma aplicação nativa. Outro diferencial está na presença do Angular, que é uma opção excelente para UX (User Experience), traz uma organização muito grande para o código que será desenvolvido, devido ao padrão MVC, e facilita o desenvolvimento com JavaScript.

NOTA: A nomenclatura do Angular pede uma nota à parte. Ao ler “AngularJS”, considere a versão "1" do framework. Por sua vez, ao ler “Angular”, considere a versão 2. O Ionic 2, versão mais recente, utiliza o Angular, enquanto as versões anteriores, utilizam o AngularJS.

A Figura 3 traz a estrutura de um projeto exemplo, desenvolvido com Ionic 1.3, criado no curso “Ionic – Introdução”. Note que a estrutura é diferente da que vimos no projeto Xamarin e é, basicamente, uma aplicação web, com estilos (CSS), código JavaScript e HTML. A partir disso, o Cordova irá gerar uma aplicação para cada plataforma. Essa aplicação terá código nativo, apesar de, internamente, utilizar uma espécie de "web view" para execução do HTML, CSS e JavaScript.

Projeto Ionic desenvolvido no Sublime Text
Figura 3. Projeto Ionic desenvolvido no Sublime Text

Por apenas parecer uma aplicação nativa, o Ionic traz uma desvantagem relevante em relação a desempenho: a tendência é que tenha uma performance pior que as aplicações nativas, desenvolvidas com Xamarin ou tecnologias nativas de fato. Além disso, por ser um projeto baseado primeiramente em JavaScript, a organização tende a ser prejudicada, o que dificulta um pouco a manutenção do código, mesmo com a presença do Angular, TypeScript e demais tecnologias presentes no Ionic.

No entanto, há, também, muitas vantagens, como o fato de possibilitar uma curva de aprendizado mais baixa, especialmente para quem já tem uma base em desenvolvimento web. A facilidade de prototipagem de uma aplicação com Ionic é outro ponto positivo. Com isso, um MVP (Mínimo Produto Viável) tende a sair muito mais rapidamente.

saiba mais Saiba mais sobre Ionic

Xamarin ou Ionic?

Afinal, qual a melhor opção? Xamarin ou Ionic (ou Cordova)? Não existe uma resposta definitiva para essas perguntas. Tudo depende do contexto, dos requisitos do projeto, do seu time de desenvolvedores, entre outros fatores. Elencamos alguns pontos a considerar ao se deparar com essa dúvida:

  • Se você é desenvolvedor .NET, priorize o Xamarin. Se você é desenvolvedor web e conhece o Angular, priorize o Ionic;
  • É um projeto com ciclo de vida determinado, priorize o Ionic. É um projeto que terá um ciclo de vida mais longo, com evoluções, priorize o Xamarin;
  • Se o prazo para entrega do projeto é curto e o desempenho não é uma das prioridades, priorize o Ionic, caso contrário, priorize o Xamarin;
  • Se o projeto requer o uso de recursos e interface de usuário nativos, priorize o Xamarin, caso contrário, priorize o Ionic.

Em muitas ocasiões, no entanto, a decisão não será tão simples, envolvendo múltiplos fatores. Nesses casos, cabe a análise de todos eles para que a melhor decisão seja tomada.

Links Úteis

Saiba mais sobre Cordova, Ionic e Xamarin ;)

  • Cordova:
    Neste Guia de Referência você encontrará o conteúdo que precisa para aprender a desenvolver aplicativos mobile multiplataforma utilizando o Cordova.
  • Ionic:
    Neste Guia de Referência você encontrará o conteúdo que precisa para aprender a desenvolver aplicativos mobile multiplataforma utilizando o Ionic.
  • Xamarin:
    Neste Guia de Referência você encontrará o conteúdo que precisa para se tornar um programador especialista em Xamarin, uma excelente opção para o desenvolvimento mobile nativo e cross-platform baseada no compartilhamento de código, por padrão, em C#.