Ionic

Pesquisa feita por Danilo Silva Gonçalves e Vinicius Vieira dos Santos Araújo.


O que é?

Ionic é um framework open source para desenvolvimento rápido e fácil de aplicações para dispositivos móveis híbridos. Criado no final de 2013, hoje já se encontra na versão 1.3.3, lançada em fevereiro de 2017. Construído em AngularJS e Cordova, ele oferece serviços e ferramentas para desenvolver aplicativos utilizando tecnologias Front-end para Web como HTML5, CSS e JavaScript.
Os aplicativos desenvolvidos com Ionic não são nativos mas se parecem e agem como tal, o que o Ionic faz é estilizar o HTML para se parecer com os componentes UI nativos de cada plataforma móvel e usa o Apache Cordova para fazer tais componentes se comportarem como nativos comunicando-se com as APIs nativas.

ionic-framework-app.jpg

Para instalar o Ionic no Linux, precisamos do Node.js para executar o código JavaScript do lado de fora do navegador, pois o processo é necessário um módulo npm, com a execução do comando:

npm install  -g ionic

Nota: Usuários Linux e OSX podem precisar adicionar o comando sudo para completar a instalação

O comando para exibir a versão do framework instalada:

ionic --version

Vantagens:

  • Baseado no Angular;
  • Write once, run anywhere (escreva uma vez, rode em qualquer lugar). Você escreve uma vez e seu código está pronto pra rodar no iOS, Android Windows Phone e até no Browser;
  • Curva de aprendizagem pequena;
  • Construção de apps com pouco esforço e baixa complexidade;
  • Visualização do aplicativo direto no Browser durante o desenvolvimento sem a necessidade de ficar emulando dispositivos;
  • Suporte da comunidade. A comunidade é muito grande, você consegue suporte e resolve bugs bem rápido;
  • Muito bem documentado e vasto número de tutoriais espalhados pela internet;
  • Manutenção de código centralizada;
  • Mais leve;
  • Ecossistema de ferramentas e serviços como Inonic View, Push Notification, User Authentication, Live Deployment, Native App Package, Ionic Creator, entre outras.

Desvantagens

  • Problemas de performance em alguns ambientes, principalmente em Androids mais antigos;
  • Pode apresentar discrepâncias entre componentes UI que você escreve e o que é renderizado na plataforma nativa;
  • Não é seguro que funcione bem em 100% dos dispositivos.

História

Ionic foi desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co. no ano de 2013. Dentre o Ionic, a Drifty desenvolveu outros produtos que incluem ferramentas de implementação de interfaces Codiqa e Jetstrap, drag-and-drop usando jQuery Mobile e Bootstrap. A empresa ficou bastante conhecida por auxiliar os desenvolvedores em questões de interface e o desenvolvimento de aplicativos mobile era bastante frequente, por isso a Drifty recebia feedbacks de seus clientes que passaram a implementar diversos aplicativos móveis. Por conta dessa demanda, a equipe decidiu elaborar sua própria estrutura que pensada na questão do desempenho e modelada utilizando padrões da web modernos. O lançamento da primeira versão alpha do framework, foi em novembro de 2013. O beta 1.0 foi lançado em março de 2014, a versão final do 1.0 foi lançado em maio de 2015 e outros vários lançamentos seguintes da versão 2.0 em 2016.

max.jpg
ben.jpg
adam.jpg

Depois dos lançamentos do Ionic, em 2015, os desenvolvedores iônicos criaram mais de 1,3 milhões de aplicativos com o SDK.


Características

  • Multiplataforma: É possível desenvolver apps tanto para Android quanto iOS mantendo apenas uma base de código.
  • Produtividade: A característica de multiplataforma é um dos fatores que aumenta a produtividade, pois com apenas uma base de código fica mais fácil manter e evoluir o app. Outro fator é a possibilidade de utilizar desenvolvedores front end na criação do app, pois as tecnologias são facilmente compreendidas por eles, diminuindo a curva de aprendizado.
  • Menor tempo de desenvolvimento: O fato do framework possui a arquitetura multiplataforma e aumentar a produtividade do desenvolvimento do app, consequentemente acarreta nesta característica.
  • Menor custo: Pelo fato dele ser multiplataforma, na teoria, a equipe de desenvolvimento poderia ser reduzida pela metade, já que um único código pode ser utilizado pelos SO’s Android e iOS. Além disso, o valor que seria pago para desenvolvedores das tecnologias nativas, seriam maiores do que os valores que são pagos para desenvolvedores que utilizam o ionic, visto que trabalha com tecnologias que são conhecidas por praticamente todos os desenvolvedores.
  • Angular e TypeScript: O Angular é uma plataforma de código-aberto criada e mantida por colaboradores do Google. Está em um estágio bastante maduro e com reconhecimento no mercado. Como linguagem de programação, o Angular utiliza do TypeScript, criado pela Microsoft. O TypeScript funciona como um super conjunto do JavaScript que, dentre diversas funcionalidades, destaca-se pela tipagem estática de variáveis e membros privados de classes, o que garante uma menor taxa de bugs ainda em fase de desenvolvimento. O Ionic suporta as funcionalidades mais recentes do JavaScript, mesmo que ainda não estejam incorporadas oficialmente na linguagem. Isso é possível graças ao processo de transpilação(conversão de código JavaScript moderno para JavaScript compatível) que o TypeScript proporciona, por exemplo.
  • Prototipação: A criação de telas com o Ionic é bastante fácil. Há, inclusive, uma ferramenta visual para esse fim, o Ionic Creator.
  • Ferramentas: Dentre as várias ferramentas que o ionic incorpora, destacam-se o Ionic Dev App, que permite a injeção do app em um dispositivo móvel para testes durante o próprio desenvolvimento e o Ionic View, que permite que o app seja testado por usuários durante as fases beta de desenvolvimento do app.
  • Boa Documentação: O Ionic é um projeto muito bem documentado e possui uma comunidade bastante ativa na Internet.
  • PWA’s: O Ionic possui suporte à criação de PWA’s(Progressive Web Apps), que basicamente são sites que se comportam como aplicativos.
  • Evolução: Na quarta versão do Ionic, prevista ainda para o ano de 2018, está previsto a adoção do Stencil, onde vai possibilitar ao desenvolvedor escolher o framework Front-end de sua preferência.
  • Performance: Em comparação com aplicações híbridas, misturando código Ionic com código de aplicativo móvel nativo no PhoneGap(agora chamado Apache Cordova) permite maior desempenho do produto resultante: utilizando AngularJS (em vez de jQuery) permite Ionic contar com a aceleração de hardware nativa (ao invés de extensa DOM manipulação). O Ionic aproveita as transições de CSS e as transformações para animação, como uma forma de aproveitar a GPU e maximizar o tempo disponível do processador

Serviços e Ferramentas, Similares e/ou concorrentes (comparações):

Serviços e Funcionalidades:
O Ionic usa plugins Cordova(o Cordova é outro framework bem similar ao Ionic, ele que permite criar aplicações híbridas para diferentes plataformas mobile com base no componente WebView utilizando HMTL, CSS e JavaScript) para obter acesso a recursos de hardware, como por exemplo: câmera, GPS, lanterna, etc. Os desenvolvedores que utilizam o Ionic, podem criar suas aplicações personalizadas para diferentes plataformas, como Android 4.1 e superior, iOS 7 e superior, o Ionic 2 suporta a Plataforma Universal do Windows para criar aplicativos do Windows 10 ou navegadores modernos(Google Chrome, Mozilla Firefox, Opera, etc.) e inclui alguns componentes móveis, tipografia, paradigmas interativos e um tema base extensível. Ionic Framework, desenvolvido com o Angular.js , suporta aplicativos do BlackBerry 10. Além disso, a ferramenta permite que você construa e implemente suas aplicações envolvendo a ferramenta de compilação Cordova com uma ferramenta simplificada de linha de comando 'iônica'.
O Ionic utilizado através do Angular, fornece componentes e métodos personalizados para interação. Um dos componentes é a collection repeat, que permite que os usuários percorrerem uma lista de composta de milhares de itens e não mostra nenhum resultado de desempenho. Outro componente é o scroll-view, que cria-se um contêiner com rolagem com o qual os usuários podem interagir usando um sistema de representantes de influência nativa.

Tag do ionic:

<ion-content> 
</ion-content>

Com a rolagem pode-se obter a posição da rolagem, controlar para baixo ou para cima, dar zoom ou obter informações sobre as instâncias atuais de exibição de rolagem.

Comandos do Scroll-View:

$ ionicScrollDelegate.scrollTop(); 
$ ionicScrollDelegate.scrollBottom(); 
$ ionicScrollDelegate.zoomTo(1,5); 
$ ionicScrollDelegate.getScrollView();

O SDK(Software Development Kit) do Ionic também fornece serviços que os desenvolvedores podem usar para ativar recursos, como notificações em push, testes em componentes A/B, análises, implementações de código e compilações automatizadas(são compilações feitas sem acompanhamento do desenvolvedor).
O Ionic também fornece uma incrível interface de linha de comando (CLI) , para que os desenvolvedores possam começar a criar um projeto com um comando simples. Também possibilita que os desenvolvedores adicionem plugins do Apache Cordova e pacotes front-end adicionais, habilitem notificações push, gerem ícones de aplicativos e telas Splash e construam binários nativos.

Diferenças entre o Cordova e o Ionic:
O Cordova é responsável por fazer seu código Javascript para acessar recursos de hardware nativos do dispositivo, como câmera, GPS, acelerômetro, dentre outros. Já o Ionic é um framework que cuida da parte visual da aplicação, de como ela será apresentada para o usuário final, criando aparências muito similares ao de apps nativos.

Diferenças entre o Xamarin e o Ionic:
O Xamarin possibilita o desenvolvimento de aplicações nativas a partir do .NET Framework, utilizando a linguagem C#. Porém, o Xamarin possui uma limitação: o código não é completamente reutilizado entre as 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 engloba as interfaces de usuário, acesso a recursos do dispositivo, entre outros.

Diferente do Xamarin, o Ionic utiliza todo o código do app nas plataformas alvo. Além disso, a curva de aprendizagem menor se comparado ao Xamarin, pois utiliza as ferramentas web para desenvolvimento do app. Porém, o Ionic trás uma desvantagem importante em relação ao Xamarin: o desempenho. A performance dos aplicativos feitos com o Ionic tendem a ter um desempenho pior se comparado aos feitos no Xamarin. Outra desvantagem é que como é baseado no JavaScript, a manutenção se torna mais difícil do que os códigos feitos em C# pelo Xamarin.


Referências:

https://www.portalgsti.com.br/ionic/sobre/
https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework)
https://www.devmedia.com.br/xamarin-ionic-e-cordova-conheca-o-que-sao-e-as-principais-diferencas/37690
http://igti.com.br/blog/10-motivos-desenvolver-apps-com-ionic/
http://www.macoratti.net/17/03/ionic_app1.htm
https://medium.com/@felipeblini/desenvolvimento-de-aplicativos-m%C3%B3veis-com-javascript-ionic-react-native-e-nativescript-c303b17fba0d

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License