Os 9 erros mais comuns que os desenvolvedores Ionic cometem

Introdução

Ionic já existe há dois anos. É um ótimo conjunto de ferramentas para desenvolver aplicativos híbridos baseados em AngularJS. O Ionic é extremamente popular no momento, com mais de um milhão de aplicativos construídos e uma comunidade crescente de milhares de desenvolvedores.

Desde o primeiro lançamento do Ionic, o tempo passou e as tecnologias da web e as melhores práticas evoluíram de várias maneiras. Portanto, é difícil determinar qual caminho seguir ao iniciar um novo projeto. Nessas condições, os desenvolvedores podem cometer erros que podem afetar a qualidade de seus aplicativos ou a produtividade de sua equipe.

Ao ler os erros comuns a seguir, você terá as chaves para evitar problemas fundamentais e criar aplicativos de alto desempenho e escaláveis ​​com o Ionic.

Erro comum nº 1: esquecer de ativar a rolagem nativa

A rolagem nativa permite que o Ionic ouça eventos de rolagem em visualizações da web suportadas. Isso torna Pull to Refresh , List Reordering e Infinite Scroll possíveis sem rolagem JavaScript, que foi criada em uma época em que os navegadores não tinham eventos de rolagem adequados.

A rolagem nativa está habilitada por padrão no Android desde o Ionic 1.2 (dezembro de 2015). É uma grande melhoria de desempenho e experiência do usuário, pois garante uma rolagem suave devido a eventos assíncronos.

Infelizmente, devido à falta de eventos adequados no iOS, a rolagem nativa ainda não está habilitada para essa plataforma.

Se você estiver usando uma versão anterior à 1.2, poderá habilitar a rolagem nativa para Android usando $ionicConfigProvider :

 // Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

Você também pode habilitar ou desabilitar a rolagem nativa em qualquer página usando a diretiva overflow-scroll em qualquer ion-content :

 <!-- Disable Native Scrolling on this page only --> <ion-content overflow-scroll=”false”>

Observe que, infelizmente, a repetição de coleção, que permite que seu aplicativo mostre grandes listas de itens, não pode ser coberta pela rolagem nativa.

Erro comum nº 2: não usar o Ionic CLI para instalar plataformas e plug-ins

O Ionic CLI adiciona recursos ao Cordova CLI. A persistência de plataformas e plugins é um ótimo recurso que o Ionic CLI adiciona.

O problema com o Cordova CLI é que as plataformas e plugins que você instala são instalados apenas em sua máquina. Ao trabalhar em equipe, para evitar bugs, você deseja compartilhar o mesmo ambiente, plataformas e plugins. Com o Cordova CLI, é mais difícil manter o projeto sincronizado entre as máquinas dos desenvolvedores. Sim, você pode confirmar as pastas de plataformas e plugins, mas não é recomendado.

Ao usar Ionic CLI para instalar plataformas ionic platform add ios e plugins ionic plugin add camera , o arquivo package.json é editado adequadamente.

Plataformas e plugins são armazenados nas propriedades cordovaPlatforms e cordovaPlugins :

 "cordovaPlugins": [ "[email protected]", "[email protected]", "[email protected]" ], "cordovaPlatforms": [ "android", "ios" ]

Agora é fácil para outros desenvolvedores entrarem em sincronia ao extrair um novo código, simplesmente executando ionic state restore quando necessário (adição, exclusão ou atualização de versão).

Erro comum nº 3: o desempenho do pensamento sai da caixa

O Ionic é baseado em AngularJS e o desempenho no dispositivo é frequentemente questionado. Gostaria de tranquilizá-lo neste ponto: com um pouco de experiência em AngularJS, você pode criar aplicativos de classe mundial com o Ionic.

O exemplo perfeito é o aplicativo Sworkit que é construído com Ionic, tem mais de 9 milhões de usuários, mais de 7 milhões de downloads e uma média de 4,5 estrelas no Google Play.

Se você deseja obter o melhor do AngularJS, aqui estão algumas coisas que você deve aprender antes de iniciar seu projeto.

$assistir

Os observadores estão acostumados a ouvir as mudanças de escopo no AngularJS. Existem basicamente quatro tipos de $watch : $watch (normal) , $watch (deep) , $watchCollection e $watchGroup .

Cada um deles é diferente, e escolher o certo pode fazer uma enorme diferença em termos de desempenho.

$ assistir (normal)

Usar o $watch normal apenas verificará as propriedades do objeto ou os itens do Array existentes. Alterações superficiais, como adicionar uma propriedade Object ou enviar um novo item para um Array, não serão atendidas.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$watch (profundo)

O $watch profundo cuida de mudanças superficiais e profundas, como propriedades de objetos aninhados. Com este $watch você tem certeza de não perder nenhuma modificação. No entanto, usar $watch profundo tem implicações de desempenho. Aconselho a usá-lo com cautela.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true);

$watchCollection

$watchCollection pode ser considerado entre o $watch normal e o $watch profundo. Ele também funciona comparando referências de objetos, mas com a vantagem de também observar superficialmente as propriedades do seu objeto adicionando uma propriedade Object ou empurrando um novo item para um Array.

 $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$watchGrupo

Introduzido no AngularJS 1.3, $watchGroup permite assistir várias expressões ao mesmo tempo.

Embora $watchGroup possa não melhorar o desempenho do seu aplicativo em comparação com o $watch normal, ele tem a vantagem de ser mais sintético ao observar várias expressões de escopo.

 $scope.$watchGroup([ 'watchExpression', 'watchExpression2', 'watchExpression3' ], function(newVals, oldVals) { if (newVals[0]) { // watchExpression has changed. } if (newVals[1]) { // watchExpression2 has changed. } if (newVals[2]) { // watchExpression3 has changed. } });

Rastrear por

O track by é usado para evitar manipulação inútil do DOM ao usar ng-repeat . De fato, se o ciclo de compilação descobrir que pelo menos um elemento de sua coleção foi alterado, ng-repeat renderizará novamente todos os elementos. A manipulação do DOM sempre tem efeitos no desempenho do aplicativo, portanto, quanto menos você tiver, melhor.

Para evitar renderizar novamente a coleção completa e atualizar apenas os elementos que precisam ser atualizados, use track by com um identificador exclusivo.

 <!-- if items have a unique id --> <div ng-repeat="item in items track by item.id"></div> <!-- if not, you can use the $index that ng-repeat adds to every of its items --> <div ng-repeat="user in users track by $index"></div>

Apenas evite usar track by em collection-repeat .

Encadernação única

A vinculação única, ou :: foi introduzida no Angular 1.3 e tem um impacto real no desempenho do seu aplicativo.

Basicamente, usar o one-time binding :: em uma expressão irá removê-la da lista $watchers quando preenchida. Isso significa que a expressão não poderá ser atualizada mesmo que os dados sejam alterados.

 <p>{{::user.firstName}}</p>

Nosso conselho é passar por todas as visualizações do seu aplicativo e pensar no que pode ou não ser atualizado e usar a vinculação única :: de acordo. Será um grande alívio para o ciclo de digestão.

Observe que, infelizmente, a vinculação única não pode ser usada em uma collection-repeat , porque a lista de itens exibidos na tela muda no pergaminho.

Se você deseja saber mais sobre dicas e truques de desempenho AngularJS e Ionic, recomendo a leitura da folha de dicas de desempenho Ultimate AngularJS e Ionic.

Erro comum nº 4: Confusões com a lógica de View Cache

Os aplicativos de página única não armazenam páginas em cache por padrão. Você provavelmente já experimentou isso usando aplicativos AngularJS, onde a rolagem ou as entradas do usuário não são salvas quando você navega para frente e para trás entre as páginas.

Com o Ionic, dez páginas são armazenadas em cache por padrão, e isso pode ser alterado globalmente ou por plataforma.

 // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);

Esse é um ótimo recurso, mas às vezes é difícil para iniciantes entenderem como lidar com páginas em cache.

O problema é que quando o usuário volta para uma página em cache, o controller não é reinstanciado novamente, o que é diferente de aplicações AngularJS, e tudo é como se você nunca tivesse saído daquela página.

Nessas condições, como você deve atualizar os dados da página?

Apresentando os eventos do ciclo de vida do controlador

Comparado ao AngularJS, o Ionic oferece muitos eventos de ciclo de vida:

 $scope.$on('$ionicView.loaded', function(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', function(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', function(){}); $scope.$on('$ionicView.afterLeave', function(){});

Esses eventos são necessários se você deseja ter controle sobre o cache de visualização.

O evento $ionicView.loaded , por exemplo, é acionado na primeira vez que uma visualização é carregada. Este evento não será mais acionado enquanto esta visualização estiver armazenada em cache, mesmo que o usuário retorne a ela. Este é geralmente o evento que você usaria para iniciar variáveis ​​da mesma forma que você faz com o evento $viewContentLoaded no AngularJS.

Se você quiser buscar dados toda vez que entrar em uma visualização, em cache ou não, você pode usar o evento $ionicView.enter .

Ao usar o evento certo na hora certa, você pode melhorar a usabilidade do aplicativo.

Com relação ao desempenho, usar a visualização de cache afeta apenas o tamanho do DOM. Quando uma página é armazenada em cache, todos os seus observadores são desconectados e a página é, portanto, apenas mais alguns elementos DOM na sua página esperando para serem usados ​​novamente.

O tamanho do DOM é importante para ter uma ótima experiência do usuário, mas armazenar em cache até dez páginas parece funcionar bem (claro, dependendo do que você carrega em suas páginas).

Erro comum nº 5: não saber sobre o Crosswalk para Android

Cada versão do Android executa um WebView diferente (um navegador que executa seu aplicativo). O desempenho é diferente entre os dispositivos e pode ser muito ruim nos dispositivos Android antigos. Para obter a mesma experiência com fluidez e capacidade de resposta em todos os dispositivos Android, você pode instalar o Crosswalk. Ele basicamente incorpora o navegador Chromium mais recente em seu aplicativo e está adicionando cerca de 20Mb por APK, tanto ARM quanto X86.

O Crosswalk pode ser instalado simplesmente usando Ionic CLI ou Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Erro comum nº 6: tentar executar plug-ins do Cordova dentro do navegador

A maioria dos desenvolvedores que usam o Ionic deseja que seu aplicativo seja executado em iOS e Android. Depois de adicionar as plataformas ionic platform add ios android e alguns plugins ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , um erro novato é pensar que você pode testá-los no navegador. Bem, você poderia, mas somente depois de instalar a plataforma de navegador adequada. Tenha em mente que não funciona com todos os plugins.

Os plugins do Cordova destinam-se a interagir com a API nativa do dispositivo por meio de JavaScript. O plug-in de contato ou o plug-in de orientação do dispositivo funcionará apenas em um dispositivo.

No entanto, você pode facilmente testar seu código em um dispositivo e depurá-lo remotamente por meio de seu computador.

Depuração remota no Android

Conecte seu dispositivo e verifique se ele foi detectado corretamente pelo seu computador executando adb devices (é necessário o SDK do Android).

Crie seu aplicativo e instale-o em seu dispositivo executando ionic run android . Depois que seu aplicativo for iniciado no dispositivo, abra o console por meio das ferramentas de desenvolvimento do Chrome (no seu computador) chrome://inspect/#devices e inspecione seu dispositivo.

Depuração remota no iOS

Conecte seu dispositivo e verifique se ele foi detectado corretamente pelo seu computador. Crie seu aplicativo e instale-o em seu dispositivo executando ionic run ios --device .

Depois que seu aplicativo for iniciado no dispositivo, abra as ferramentas de desenvolvimento do Safari (no seu computador) clicando em Develop > Your iPhone > Your app :

Execute os plug-ins do Cordova dentro do navegador

A execução de plug-ins do Cordova dentro do navegador é um recurso avançado que você deve conhecer. Desde o Ionic 1.2, o navegador é oficialmente suportado, por isso abre a era dos aplicativos multiplataforma muito além das plataformas iOS e Android.

Com a plataforma Cordova Browser, Electron e apenas tecnologias Web (JavaScript, HTML e CSS), agora podemos construir aplicativos Ionic para o navegador e o desktop (Windows, Linux e OSX).

Um kit inicial está disponível no Github.

Plataforma do navegador Cordova

Com a plataforma Browser, você pode criar aplicativos Cordova para o navegador. Isso significa que você também pode usar os plugins do Cordova no navegador.

Ele pode ser instalado da mesma forma que você instala as plataformas iOS ou Android:

 cordova platform add browser

Seu aplicativo precisa ser compilado antes do uso exatamente como no iOS ou Android:

 cordova run browser

Este comando compilará seu aplicativo e abrirá seu navegador padrão.

Plug-ins de plataforma cruzada

Muitos plugins como Network, Camera e Facebook suportam iOS, Android e a plataforma Browser ao mesmo tempo - todos com a mesma API.

Para ilustrar que existe uma forma de saber se seu dispositivo está online ou offline em todas as plataformas (iOS, Android, Browser e Desktop) usando a API ngCordova:

 // listen for Online event $rootScope.$on('$cordovaNetwork:online', (event, connectionType) => { this.isOnline = true; }); // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', (event, connectionType) => { this.isOnline = false; });

Com isso em mente, agora você pode imaginar a criação de produtos que podem ser executados em qualquer lugar com uma única base de código.

Erro comum nº 7: seguir a arquitetura do Starter Kit para aplicativos de grande escala

Ao usar o comando ionic start myapp , um projeto inicial é criado com a seguinte estrutura de pastas:

 www/ js/ app.js controllers/ aaa.js bbb.js ccc.js services/ xxx.js yyy.js zzz.js templates/ aaa.html bbb.html ccc.html

Isso é chamado de estrutura Folder-by-Type, onde os arquivos JavaScript, CSS e HTML são agrupados por tipos. Como pode parecer fácil para iniciantes, esse tipo de arquitetura sai do controle rapidamente. Simplesmente não escala.

Aqui estão alguns motivos para não usar a estrutura Folder-by-Type:

• O número de arquivos em suas pastas pode se tornar vasto
• Encontrar todos os arquivos que você precisa modificar para um recurso específico pode ser complicado
• Trabalhar em um recurso levará a muitas pastas abertas
• Não escala bem, quanto mais o aplicativo cresce, mais difícil é trabalhar nele

Eu recomendo usar uma estrutura Folders-by-Feature, onde os arquivos JavaScript, CSS e HTML são agrupados por recurso ou módulo AngularJS:

 myNewFeature/ index.js (AngularJS module) config.js service.js controller.js index.html style.scss

Razões para usar a estrutura de pastas por recurso:

• O número de arquivos em suas pastas é limitado a alguns
• Encontrar todos os arquivos que você precisa modificar para um recurso específico é fácil - eles estão na mesma pasta
• Você pode trabalhar independentemente em um recurso
• Saber o que o módulo representa é fácil - o nome da pasta é suficiente
• Fácil de criar um novo recurso, basta copiar/colar um existente
• Escala bem, você pode adicionar quantos novos recursos quiser sem dificultar o trabalho da sua equipe

Observe que essa arquitetura está próxima da estrutura Folders-by-Component que agora é o padrão em aplicativos Angular2/Ionic2.

Erro comum nº 8: vincular eventos ao onscroll e esquecer o requestAnimationFrame

Essa única armadilha geralmente é um erro de principiante, mas provavelmente pode ter o pior impacto no desempenho. Considere isto:

 <ion-content on-scroll="getScrollPosition()"> // … </ion-content>

 $scope.getScrollPosition = function () { // heavy processing, like manipulating DOM // or anything that triggers a $digest() // will be called every ~80ms, // and will impact UX }

Embora o Ionic forneça limitação para essas ações, ele ainda pode ser muito lento. Basicamente, qualquer coisa que acione um loop de resumo deve ser adiada e não acionada junto com a pintura pesada, que também é o efeito da rolagem.

Muitos dos objetivos que os desenvolvedores têm tentado alcançar vinculando a eventos de rolagem, e especialmente animações, também podem ser alcançados usando um método diferente. Veja requestAnimationFrame .

 var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();

O código acima é um exemplo muito simples, verificando se o usuário passou do topo do elemento. Lembre-se de adicionar alternativas específicas do fornecedor para compatibilidade entre navegadores se você pretende usar o exemplo. Basicamente, ele será executado em uma velocidade ideal, dependendo do navegador, a 60 FPS ou na taxa de atualização da tela. Mas é otimizado e as estruturas de animação de alto desempenho utilizam esse método simples.

Você também pode querer examinar element.getBoundingClientRect() , que fornece informações sobre o tamanho e a posição de um nó HTML.

Erro comum nº 9: prototipagem manual de aplicativos iônicos

O Ionic tem um design específico, quase uma linguagem visual. Especialmente com protótipos e produtos em estágio inicial, muito tempo e despesas podem ser economizados utilizando os componentes e estilos disponíveis. Eles são realmente bastante minimalistas e têm uma boa estética.

Apresentar wireframes e maquetes com funcionalidades básicas tornou-se um padrão da indústria. Ver uma imagem e ver um aplicativo real com componentes dinâmicos em um dispositivo móvel são duas xícaras de chá muito diferentes. Muitos designers, e também desenvolvedores de UX, usam ferramentas como Axure ou Balsamiq, que permitem fazer wireframes rapidamente com funcionalidade mínima.

Agora, os criadores do Ionic lançaram uma ferramenta semelhante feita exclusivamente para desenvolvedores do Ionic. É chamado de Criador Iônico. Ele possui uma interface web de arrastar e soltar e suporta quase tudo o que o Ionic fornece. O que é ótimo é que permite exportar o protótipo em vários formatos, com código Ionic de trabalho padrão, e até mesmo construir o aplicativo e compartilhá-lo. A ferramenta é proprietária, mas muitas das opções são gratuitas.

Conclusão

A Ionic revolucionou a indústria de aplicações híbridas de uma forma que ninguém poderia imaginar. No entanto, ao longo do tempo as melhores práticas e ferramentas não evoluíram. Como consequência, o número de erros potenciais que os desenvolvedores podem cometer aumentou.

Os desenvolvedores especialistas em Ionic têm uma maneira clara de fornecer aplicativos de classe mundial para várias plataformas simultaneamente. O jeito é aproveitar as ferramentas disponíveis, manter o desempenho como prioridade máxima e seguir as melhores práticas.

Este post não teria sido possível sem a criatividade da incrível comunidade Ionic, Michal Mikolajczyk, Mike Hartington (equipe Ionic Core) e Katie Ginder-Vogel (Gerente de Marketing e Comunicações, Ionic). Muito obrigado a todos.