Apps Híbridas com Cordova e Ionic - Parte 1 TI

Webview é o nome dado a um tipo especial de browser que começa

a rodar assim que a app híbrida é aberta pelo usuário. É dentro

desse browser que a app é executada. É claro que o usuário não

sabe que está dentro de um browser, pois essa webview não

contém componentes característicos de um, como a barra de

endereço e barra de favoritos, por exemplo. A webview contém

apenas o necessário para que o HTML, CSS e

Javascript funcionem. Ela se comporta como a engine de

renderização da app.

Por isso o nome híbrido: uma parte da app é feita em código

nativo para ser empacotada e distribuída nas app stores, e a

outra parte é feita de código não nativo (html, css e

javascript) que implementa todo o visual e o comportamento da

app.

A grande sacada de uma webview é que ela não se limita à

renderização da app. Ela também consegue acessar recursos

nativos do dispositivo como a camera, microfone,

acelerômetro, etc… Isso é possível graças a uma

interface Javascript que torna a webview apta a executar código

nativo nos dispositivos.

Ou seja, no desenvolvimento híbrido é possível usar apenas
Javascript para acessar os recursos

nativos do dispositivo, coisa que nenhum browser comum

instalado no aparelho seria capaz de acessar.

Apps Híbridas vs Apps Nativas

A principal limitação de uma app híbrida se dá em termos de

performance e fluidez. Atualmente uma app híbrida não consegue

ser tão fluída e performática quanto uma app nativa, já que a

renderização nativa ainda está muito a frente do poder de

renderização de uma webview.

Quanto a isso, porém, trago uma boa notícia: em testes que fiz

com apps híbridas no iphone 5S e no iphone 6, não consegui

notar praticamente nenhuma diferença para as apps nativas. Isso

me trouxe uma certa esperança que esse gap de performance e

fluidez diminuia e talvez se torne imperceptível para apps

híbridas que não façam uso de renderizações muito complexas.

Já a principal vantagem de uma app híbrida é, sem dúvida, ter

uma única base de código capaz de rodar em diversos sistemas

diferentes. Ao invés de dar manuntenção para uma base em Java

para Android, em outra em Objective-C para iOS e mais uma em C#

para windows phone, por exemplo, em uma app híbrida só é

necessário dar manutenção em única base de código que, por sua

vez, poderá ser empacotada e distribuída para todas as

plataformas disponíveis.

Além da vantagem que temos com uma única base de código, existe

outra tão importante quanto: um bom desenvolvedor web é capaz

de usar experiência que já possui para a construção de uma app

híbrida, e de um modo geral pessoas assim são bem mais fáceis

de serem encontradas do que desenvolvedores focados em

plataformas específicas.

Cordova e Phonegap

Atualmente o desenvolvimento híbrido possui 2 plataformas

principais, o cordova e o
phonegap. Os dois servem ao mesmo propósito,

que é de um modo transparente para o desenvolvedor, criar uma

app nativa capaz de abrir uma webview para a execução do html,

css e javascript criados pelo desenvolvedor. Paralelo a isso,

eles também tem o conceito de plugins que são

usados para acessar os recursos do dispositivo. Por motivos que

serão expostos mais adiante, daqui pra frente farei referência

apenas ao Cordova, embora tudo que for dito funcione da mesma

maneira em ambos.

Através do comando build do cordova, o código

não nativo (html, css e javascript) da app é empacotado dentro

de uma app nativa. O build pode ser considerado a principal

funcionalidade do cordova e do phonegap. O input do build

são os arquivos html, css e javascript, além de alguns arquivos

de configuração do seu projeto, e o output é uma app nativa

que, ao ser executada, abre a webview que vai renderizar a app.

Se tanto o Cordova quanto o Phonegap servem para a

mesma coisa, então qual a diferença?

Tudo começou quando uma empresa chamada Nitobi criou o
phonegap em 2009. Em 2011 a Adobe comprou a

Nitobi e pouco tempo depois doou para a Apache o core desse

projeto. Entre outros motivos a Adobe queria se certificar que

outras empresas pudessem contribuir com o projeto. A Apache,

então, foi uma escolha natural para a Adobe, pois muitas

grandes empresas já confiavam na Apache e estavam confortáveis

com as suas licenças. Por fim, para evitar problemas com o nome

phonegap, que é uma marca registrada da Adobe, debaixo da

Apache o projeto recebeu o nome de cordova.

Dessa forma, o phonegap pode ser considerado uma distribuição

do cordova. Tanto um quanto o outro são projetos opensource,

mas ao redor do phonegap a Adobe já lançou e deve continuar

lançando alguns serviços, como o Phonegap Build. Uma boa

maneira de entender isso é enxergar o phonegap como sendo o

cordova cercado por alguns serviços extras (e possivelmente

pagos) da Adobe.

Como não utilizo os serviços da Adobe, eu escolho o cordova

para desenvolvimento híbrido. Como veremos mais a frente, por

motivos semelhantes as bibliotecas open source como Ionic,

que de alguma maneira constroem algo para apps híbridas, também

costumam se basear no cordova.

Independente da plataforma escolhida, grande parte do trabalho

de construir de uma app híbrida se concentra na construção da

interface. Em uma mobile app é necessário não só construir

componentes como menus, tabs e formulários responsivos, mas

também é necessário garantir a performance e o bom

comportamento desses componentes diversos em sistemas,

dispositivos e tamanhos de tela diferentes.

A complexidade na construção desses componentes se tornou um

sério problema. Tempo e dinheiro que deveriam estar

centralizados nas funcionalidades do modelo de negócios estavam

indo parar na construção dos componentes mais básicos da app.

Ionic

Para resolver esse problema, surgiu no final de 2013 um projeto

chamado ionic. O ionic é uma SDK de

componentes visuais focados em mobile apps híbridas. Seus

diversos componentes html e css e funcionalidades javascript

são bastante simples de usar e livram o desenvolvedor de ter

que codificar tudo a partir do zero.

O ionic precisa do cordova instalado para conseguir rodar nos

dispositivos. Como o ionic é uma SDK javascript, sem o cordova

o ionic também funciona, mas o resultado só pode ser visto

através de um browser de um desktop ou do próprio dispositivo.

O cordova é necessário para que a app consiga ser instalada e

executada nos dispositivos.

Um outro fator diferencial do ionic é fato dele ser baseado no
angular, que é um framework javascript

aplamente adotado pela comunidade e que traz um enorme ganho de

produtividade para os desenvolvedores. Ser baseado em angular

também signfica que quem já trabalha com ele vai conseguir

reutilizar no ionic todo o conhecimento previamente adquirido.

Fim