Ionic 2 vs. Ionic 1: ganhos de desempenho, novas ferramentas e um grande passo à frente

O projeto Ionic está rapidamente ganhando popularidade. Com mais de 27.000 estrelas no GitHub, tornou-se um dos 50 projetos de código aberto mais populares do mundo.

E como a versão estável do Ionic 2 foi anunciada recentemente, é o momento perfeito para os engenheiros analisarem e entenderem as diferenças entre o Ionic 2 e o Ionic 1.

Em alto nível, Ionic 2 é uma reescrita completa do projeto Ionic 1 com Angular >= 2.x. Dos meus mais de 2 anos de experiência usando o Ionic 1, aqui está o que isso significará em termos práticos.

Desempenho aprimorado de detecção de alterações

Ionic 1 é baseado em Angular 1.x, e Ionic 2 é baseado em Angular >= 2.x. O aumento de desempenho que você obtém apenas usando Angular >= 2.x sozinho é significativo.

Com o Angular 1.x, obter aplicativos de alto desempenho exigia muito conhecimento profundo da estrutura (como $watch , One-time binding e assim por diante). Com Angular >= 2., os aplicativos x são praticamente prontos para uso.

A nova versão do Angular abandonou o famoso e criticado ciclo de resumo (rastreando e testando cada variável do aplicativo a cada mudança). Em vez disso, o Angular >= 2.x depende do Zone.js para rastrear as alterações do aplicativo (síncronas e assíncronas).

Vale a pena explorar a detecção de alterações em Angular >= 2.x para entender como as coisas funcionam nos bastidores. Em Angular >= 2.x, a detecção de alterações é sempre realizada de cima para baixo. Usar a estratégia correta de detecção de alterações ( OnPush ou Default ) em seus próprios componentes é de suma importância se você deseja controlar o desempenho de seu aplicativo.

Todos os componentes do Ionic 2 usam a estratégia OnPush , o que significa que a detecção de alterações não é realizada o tempo todo, mas apenas quando as entradas mudam. Essa estratégia também evita renderizações desnecessárias de subárvores de componentes. Basicamente já está otimizado para você.

Se você quiser saber mais sobre como obter um aplicativo Ionic1 de alto desempenho, sugiro ler esta folha de dicas de desempenho Ultimate AngularJS e Ionic.

Desempenho DOM mais rápido

A manipulação do Angular Document Object Model (DOM) evoluiu muito. Se você deseja uma interface de usuário (UI) reativa, a manipulação do DOM e o desempenho do JavaScript são importantes.

Por exemplo, criar 1.000 linhas em uma tabela leva 126 milissegundos com JavaScript vanilla, 110% mais (264ms) com Angular. 1.x, e apenas 40% a mais (177ms) com Angular >= 2. Como você pode ver, o desempenho do Angular >= 2.x é melhor que o do Angular 1.xe é semelhante ao desempenho do React.

O Ionic 2, mais uma vez, se beneficia dessa atualização de desempenho, e o faz “de graça”.

A nova API de animações da Web

O Ionic 1 e o Ionic 2 ainda contam com animações CSS para transições e animações internas, mas como o Ionic 2 é baseado em Angular >= 2.x, os desenvolvedores têm acesso à nova API Web Animations (W3C) por meio do sistema de animação Angular.

A API de Animações da Web é uma API JavaScript que fornece aos desenvolvedores acesso ao mecanismo de animação do navegador. Ele ainda não é suportado em todos os navegadores, mas com um polyfill você pode usá-lo agora mesmo e desfrutar de uma das maneiras mais eficazes e promissoras de animar a Web.

Fonte

A API de animação Angular >= 2.x permite que você descreva facilmente animações complexas (entrando e saindo de diferentes estados ou animações de grupo) e dá acesso ao ciclo de vida das animações por meio de retornos de chamada.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Rolagem nativa integrada

A rolagem nativa permite que o Ionic 2 ouça eventos de rolagem em WebViews compatíveis. Faz
Pull to Refresh , List Reordering ou Infinite Scroll possível sem emular esses eventos (rolagem JavaScript).

Até agora, a rolagem JavaScript era necessária, mas os WebViews do Chromium (Android) e WKWebView (iOS) evoluíram e agora suportam rolagem nativa. Ele só é ativado por padrão no Android com Ionic 1 (desde dezembro de 2015) e ativado em todas as plataformas com Ionic 2.

O suporte de rolagem nativa traz melhor desempenho e melhora a experiência do usuário, ajudando a garantir uma rolagem suave graças a eventos assíncronos.

API de componentes aprimorada

O Ionic 2 dá acesso a todos os componentes que tornaram o Ionic 1 famoso, mas agora são aprimorados e baseados em Angular >= 2.x. Aqui está a lista dos componentes mais comuns:

• Botão
• Cartão
• Ícone
• Lista
• Cardápio
• Modal
• Barra de ferramentas

A API de componentes mudou um pouco entre Ionic 1 e Ionic 2. Por exemplo, os componentes Ionic 1 ion-spinner usam o atributo icon para o tipo de spinner:

 <ion-spinner icon="bubbles"></ion-spinner>

Enquanto o Ionic 2 usa o atributo name :

 <ion-spinner name="bubbles"></ion-spinner>

Como você pode ver, se você estiver familiarizado com a API do componente Ionic 1, você também se sentirá confortável usando os componentes Ionic 2. Você só precisa estar ciente dessas diferenças.

Com uma lista impressionante de componentes, tudo o que você pode fazer com o Ionic 1 é possível com o Ionic 2 e ainda mais.

Introdução de Web Workers

Web Workers permitem que seu aplicativo execute scripts em threads JavaScript em segundo plano. Os workers podem executar tarefas tediosas e solicitações HTTP fora do contexto do aplicativo (ou seja, sem interferir na interface do usuário). Hoje, os Web Workers são suportados por todos os principais navegadores.

Tradicionalmente, todos os frameworks eram construídos em cima e dependiam dos objetos de window e document . No entanto, em trabalhadores nem estão disponíveis. Com a nova arquitetura Angular >=2 que desacoplou o renderer , a execução do aplicativo no Web Workers (ou em qualquer outra plataforma) ficou mais fácil.

O Ionic 2 está começando a experimentar o uso de Web Workers com o novo componente ion-img . Por enquanto, ion-img só pode ser usado em uma lista VirtualScroll. Ele delega a chamada HTTP de imagem para os Web Workers e também suporta carregamento lento (ou seja, apenas recupera e renderiza imagens na janela de visualização). Seu aplicativo da Web agora se concentra apenas na interface do usuário e permite que os trabalhadores façam o resto.

Aqui está um exemplo de como usá-lo:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Tenha em mente que este é apenas o começo e que esperamos ver mais uso ou Web Workers em um futuro próximo.

Vantagens do TypeScript

Se você estiver usando o Ionic 2, já sabe que ele está usando o TypeScript. TypeScript é um superconjunto de JavaScript ES2015 que compila em JavaScript simples. Com o TypeScript, você tem acesso a todos os seus recursos exclusivos (como interfaces, mixins e assim por diante) e recursos do ES2015 (como funções de seta, gerador, strings de várias linhas e assim por diante).

Vejamos um exemplo de um componente Angular >= 2.x que exibe o nome de um presidente dos Estados Unidos:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Usamos uma Interface ( IPresident ) que descreve a forma do objeto presidente. É interessante ter interfaces descrevendo o que você está manipulando, principalmente se houver vários desenvolvedores em um projeto. Se você cometer um erro e, por exemplo, usar um boolean para o nome do presidente, seu IDE lhe dirá que algo está errado antes mesmo da compilação acontecer.

Em praticamente qualquer IDE que você use (Visual Studio Code, Atom, WebStorm ou similares), você encontrará plugins para habilitar o preenchimento automático, verificação de tipo e um linter.

O TypeScript é uma vantagem real para o Ionic 2, pois torna seu código mais compreensível, ajuda a evitar erros de tipo e ajuda você a ser mais produtivo (por meio de recursos como preenchimento automático, importação automática de módulos, definições de dicas de ferramentas ao passar o mouse e CTRL + Click para vá para definições).

Todos os novos CLI v2

O Ionic CLI v2 adiciona uma maneira de gerar Páginas, Componentes, Pipes e Diretivas, diretamente pela linha de comando.

Por exemplo, se você quiser criar uma nova página chamada MyPage , aqui está o comando que você pode executar:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

O comando seguirá as convenções e criará três arquivos para você:

Um arquivo HTML para seu modelo. Um arquivo SASS para seu estilo de componente. Um arquivo TypeScript para sua lógica de componente.

Aqui está a aparência do arquivo my-page.ts gerado:

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

Aplicar convenções por meio do uso da CLI é ótimo quando você trabalha em equipe. O Angular 2.xe o Ionic 2 estão fazendo um ótimo trabalho ajudando a promover uma melhor compreensão do que uma arquitetura de aplicativo Angular deve ser. Claro, você é livre para divergir das convenções, se quiser.

Embalagem melhorada

O Ionic 1 conta com o ecossistema Gulp para agrupar aplicativos, enquanto o Ionic 2 permite selecionar suas ferramentas favoritas. O Ionic 2 fornece sua própria coleção de ferramentas como um projeto separado: ionic-app-scripts.

O ionic-app-scripts é baseado na ideia de que os desenvolvedores não devem se preocupar com a configuração do empacotamento. A única dependência relacionada a empacotamento que seu projeto terá com o Ionic 2 é @ionic/app-scripts . Por padrão, ele usa o Webpack, mas você também pode usar o Rollup.

Com o Ionic 2 e o CLI v2, os assets , bem como os arquivos TypeScript, ficam na mesma pasta src . O www agora é gerado durante cada compilação e, portanto, deve ser removido do rastreamento de controle de versão.

Introdução da Ferramenta de Relatório de Erros

A nova CLI também introduziu uma ótima ferramenta de Relatório de Erros. Para obtê-lo, você precisa instalar a versão Ionic >= 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Agora, toda vez que você tiver erros, um modal aparecerá com informações significativas sobre ele. Por exemplo:

Ser notificado sobre erros de tempo de execução o mais rápido possível durante o desenvolvimento é incrivelmente valioso e o Ionic 2 fez um ótimo trabalho nesse sentido.

Benefícios da compilação antecipada (AoT)

Ahead of Time Compilation (AoT) é uma pequena revolução no ecossistema Angular. Introduzido com o Angular 2.x, o AoT permite que os modelos sejam pré-compilados em uma etapa de compilação, em vez de serem compilados rapidamente pelo navegador.

Embora isso possa não parecer uma grande diferença, na verdade é. Com o AoT, não precisamos enviar o compilador de modelos com o aplicativo. Isso tem duas vantagens. Primeiro, o pacote será menor, o que impacta diretamente na rede e, portanto, torna o download do seu aplicativo mais rápido. Em segundo lugar, o aplicativo inicializará mais rápido porque a compilação do modelo em tempo real não é mais necessária.

O Ionic 2 aproveita ao máximo o Angular 2.x AoT para otimizar o tamanho e o tempo de carregamento do seu aplicativo gratuitamente.

Ionic 2 é um grande passo à frente

No geral, o Ionic 2 é um grande passo à frente para a indústria móvel híbrida. Embora o conjunto de componentes do Ionic 2 seja semelhante aos componentes do Ionic 1, o Ionic 2 oferece muitas ferramentas e melhoria de desempenho.

De fato, com ferramentas como TypeScript, ionic-app-scripts e Ionic CLI, os desenvolvedores do Ionic 2 podem ser mais produtivos, podem produzir código mais sustentável e são alertados sobre erros de tempo de execução assim que eles acontecem.

O Ionic 2 também fornece um aumento de desempenho gratuito em relação ao Ionic 1, em particular eliminando ou reduzindo seus gargalos (relacionados à detecção de alterações, animações, tempo de carregamento e assim por diante).

Com o Ionic 2, seus aplicativos parecerão mais nativos do que nunca. Tire-o para dar uma volta. Você ficará feliz por ter feito isso.