Na imagem acima você consegue visualizar o nosso aplicativo no iOS, Android e Windows Phone! O Ionic não apenas executa o build da aplicação com uma única base de código para dispositivos diferentes como também se adapta ao comportamento e estilo visual de cada um, numa tentativa de fazer com que o usuário sempre tenha uma experiência condizente com a plataforma que utiliza. Perceba, por exemplo, como o spinner, a barra de busca, os ícones e estilo da lista são diferentes entre as plataformas. No caso do iOS, são incluídos até mesmo as setas na lateral direita da célula, o que é comum na plataforma. Além de tudo isso, poder testar aplicativos dessa maneira e ainda tirar proveito do recurso de LiveReload enquanto você está programando é algo realmente especial.
Estamos chegando ao fim da criação do nosso aplicativo. Vimos que, apenas com pequenos ajustes, foi possível obter um código mais modular e ainda incluir o componente SearchBar com o estilo visual adequado para cada plataforma. Tudo isso de maneira simples e rápida, graças ao casamento perfeito entre o Angular e os componentes estilizados fornecido pelo Ionic.
Mesmo com todos os recursos que o Ionic 2 nos oferece é sempre importante garantir a melhor experiência possível para o usuário fazendo otimizações gerais, como customização de UI, ajustes no comportamento de componentes, ganho de performance, etc. Essa última etapa será dedicada à este propósito.
Notei alguns problemas ao utilizar a Action Sheet para filtrar a lista quando o scroll está numa posição muito abaixo, pois a ação de carregar posts antigos pode ser disparada indevidamente. Podemos evitar isso fazendo a lista rolar para o topo antes de executar qualquer filtro. Mas como controlar isso programaticamente?
Antes precisamos obter uma referência à este componente utilizando a anotação @ViewChild da biblioteca @angular/core (algo similar à maneira como protocolos funcionam no iOS):
Apesar de termos nossa barra de buscas funcionando perfeitamente, a cada caractere digitado estamos emitindo uma nova requisição, o que é desnecessário. Mas há uma forma elegante de lidar com isso utilizando Observables, uma vez que o evento só será disparado quando uma requisição for considerada válida.
O que queremos fazer é monitorar o componente de duas maneiras: A primeira é oferecendo um tempo maior para que o usuário conclua a digitação da palavra que está buscando através do método debounceTime e a segunda é utilizando o método distinctUntilChanged que irá comparar a palavra (ou a sequência de caracteres) digitada com a última que foi procurada, evitando que uma nova requisição seja emitida para um resultado que já se encontra na tela.