ionic

4 Dicas para trabalhar com o Ionic Framework

1 – AngularJS

Originalmente essa não era a primeira dica, mas no decorrer da escrita notei que provavelmente era a dica mais importante. O Ionic é um framework escrito sobre o AngularJS, logo, boa parte das dicas com relação ao AngularJS cabem no Ionic (como a últim dica).

De fato o AngularJS não é o framework SPA mais performático do mercado, ele tem problemas estruturais que remetem ao início de seu desenvolvimento e impactam na performance do mesmo e é um dos motivos da total reescrita do framework para sua segunda versão. Com o passar dos meses (e versões) a equipe do AngularJS conseguiu mitigar vários dos problemas de performance e para que você consiga extrair o máximo do Ionic Framework eu recomendo fortemente que você conheça o AngularJS, seus pontos fortes, problemas, peculiaridades, arquitetura, etc.

E para otimizar a performance de seus apps sugiro que leia a série de artigos Micro tunnings with Angular apps (Parte 1 & Parte 2) do GDE Will Mendes.

2 – Native Scrolling

Uma das grandes sacadas da equipe do Ionic para a versão 1.0 "uranium-unicorn" (eu gosto desse nome), foi a implementação do Native Scrolling, que nada mais é que o scroll padrão dos dispositivos. Mas por que isso é bom? Isso é bom por que no começo do desenvolvimento do framework a equipe optou por desenvolver o scroll em javascript para poder oferecer algumas funcionalidades que não seriam possíveis no contexto daquela época dos dispositivos móveis, como Pull To Refresh, Infinite Scrolling, List Reordering, e Collection Repeat. E, convenhamos, grande parte do sucesso do framework é por causa dessas funcionalidades e de sua facilidade de utilização.

Então os dispositivos móveis evoluíram tanto o hardware quanto o software e após o Android 4.1 (Jelly Bean) e o iOS8 essas funcionalidades se tornaram possíveis graças às atualizações do navegador nativo do Android e da WKWebView no iOS8, pois ambas as plataformas passaram a ter suporte aos eventos de scroll nativo e foi aí que a equipe do Ionic resolveu implementar o Native Scrolling, pois com ele a CPU e a GPU do dispositivo móvel, que não é tão potente quanto a de um PC, não precisará mais processar o JS Scrolling, podendo então se preocupar com o que realmente importa: sua aplicação. O que deixará seu aplicativo mais rápido e resultará numa experiência mais fluída para o usuário.

O Native Scrolling funciona da mesma forma que o atributo overflow-scroll="true" na diretiva <ion-content> e para utilizá-lo basta desabilitar o jsScrolling no ionicConfig:

angular.module('ionicApp', ['ionic']).config(function($ionicConfigProvider) {
  if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
})

A diferença de performance ao utilizar o Native Scrolling é notável e se torna ainda mais perceptível em dispositivos Android. No entanto essa funcionalidade ainda não está 100%. Ela não funciona muito bem com o Keyboard e o Collection Repeat. Portanto não é receomendo que você utilize o Colection Repeat ou um input em uma tela que possua o Native Scrolling ativado.

ps.: O código acima ignora a plataforma iOS pois os eventos de scroll nativos só foram implementados na WKWebView do iOS8 e o Ionic oferece suporte ao iOS7 também, logo, o scroll nativo não funcionará como deveria em todas as versões do iOS. É recomendado o uso do scroll nativo em dipositivos iOS caso o suporte de seu aplicativo seja a partir do iOS8.

3 – Debug remoto e autoreload

Durante o desenvolvimento de uma aplicação é sempre bom possuir boas ferramentas de debug para não desenvolvermos às cegas. E no caso de Aplicativos Híbridos nós podemos contar com o apoio do browser nessa tarefa.

Basta rodar o comando ionic run android -l -c -s. Para maiores informações sobre esse comando acesse o artigo Live Reload All the Things.

4 – Estrutura de diretórios e arquivos

Uma boa estrutura de diretórios e arquivos para seu aplicativo é essencial e, de fato, a estrutura dos templates (blank, sidemenu e tabs) do Ionic não é a melhor, pois conforme sua aplicação vai crescendo fica mais complicado gerenciar todos os seus controllers em um único arquivo e quando você divide esse arquivo em um para cada controller fica complicado gerenciar quais arquivos estão relacionados.

Pensando nisso a comunidade do AngularJS criou uma recomendação, chamada Best Practice Recommendations for Angular App Structure, para facilitar no desenvolvimento de Aplicações AngularJS, segundo ela o melhor é organizar seus diretórios e arquivos por funcionalidades e páginas, um exemplo simples seria algo como:

sampleapp/
    app.css
    app.js
    app-controller.js
    app-controller_test.js
    components/
        bar/                        "bar" describes what the service does
            bar.js
            bar-service.js
            bar-service_test.js
        foo/                        "foo" describes what the directive does
            foo.js
            foo-directive.js
            foo-directive_test.js
index.html

Acredito que essas 4 dicas são essenciais para melhorar a performance e a qualidade de aplicativos criados com o Ionic. Em breve voltarei com mais dicas referentes a acesso às APIs do dispositivo, PouchDB, Sincronização com webservice REST, etc.