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.

Jean Lucas de Carvalho

Instrutor at Futuring
Desenvolvedor Front-end na HE:labs e instrutor na Futuring, especialista em aplicativos híbridos com Cordova e Ionic Framework, faxineiro do Frontend Goiás, ex-subcelebridade do Google Developer Bus Brazil, sedentário e o lindão ali da foto. Tudo isso quando não está com preguiça demais pra fazer alguma coisa.

Latest posts by Jean Lucas de Carvalho (see all)

Comentários

One thought on “4 Dicas para trabalhar com o Ionic Framework

  1. Pingback: Otimizando a performance de aplicativos Cordova/Ionic Framework | Front In Brazil