A introdução que faltava ao Ionic 2

Era uma vez…

Há cerca de dois anos e meio eu postei o meu primeiro artigo sobre o Ionic Framework (Aplicativos mobile com o AngularJS e Ionic) e desde então Web Platform evoluiu, o ES6 passou a se chamar ES2015 e falta pouco para ser totalmente suportado pelos navegadores, o ES7 virou ES2016 e está logo ali.

Ferramentas como Babel, Typescript e Flow se tornaram comuns. Grunt e Gulp foram aos poucos sendo substituídos pelo Webpack (e o Rollup.js já tá vindo aí). Além disso, o código front-end evoluiu pra uma arquitetura baseada em componentes e isso muito se deve ao React e seus derivados.

E nesse novo mundo front-end o AngularJS 1.x perdeu espaço. O two-way data binding que nós tanto gostávamos era, na verdade, sofrível para a performance. Os escopos eram uma zona. Tínhamos várias formas de fazer a mesma coisa (controller vs directive, service vs factory). A declaração de diretivas era muito complexa. E, por fim, não era possível fazer Server Side Rendering (a não ser que você fosse pelo longo e tortuoso caminho dos hacks obscuros).

E apesar de tudo isso o Ionic Framework continuava sendo uma ferramenta fantástica. Ele possibilitou que muitos de nós conseguissemos criar nossas aplicações sem perder tempo escrevendo o mesmo código de diferentes formas pra duas ou mais plataformas.

Porém, isso não quer dizer que ele não tinha seus problemas. Tinha sim. E muitos. O Ionic Framework foi inicialmente pensado para o iOS e lá ele funcionava muito bem, inclusive com look and feel nativo. Só depois ele foi sendo adaptado (leia-se: remendado) para o Android. E isso nunca permitiu que ele fosse um framework 100% lá. Além disso, no Android, nós temos uma infinidade de dispositivos com inúmeras características de software, performance, resolução, sensores, etc. que prejudicavam ainda mais a experiência no sistema operacional.

É claro que com um pouco de trabalho duro era possível alcançar um nível de qualidade aceitável em nossos aplicativos. E, como bem sabemos, a lei de Moore tá aí pra deixar nossos aplicativos legados cada dia mais rápidos.

Recomeço

Mas vamos avançar um pouco no tempo.

Com todo o aprendizado adquirido pela comunidade front-end nos últimos anos a equipe do AngularJS decidiu reescrever ele inteiro para atender as necessidades dos aplicativos do presente (quiçá do futuro) e, por mais que a ideia fosse boa e, provavelmente, necessária, houve resistência da comunidade. Afinal seria necessário reaprender a usar o Angular. A comunidade ficou dividida.

Mas o que parecia um problema para a equipe do Ionic pode ter se tornado o seu maior trunfo. Com a eminência do Angular 2 e sua total reescrita a equipe do Ionic decidiu comprar a ideia e também reescrever o Ionic. Só que agora usando todo o conhecimento adquirido ao longo dos anos de desenvolvimento do framework.

E hoje, meus amigos, foi lançada oficialmente a nova versão do Ionic. Eu já tenho usado o Ionic 2 desde o beta 4, ou seja, já tem quase 1 ano e posso dizer que passei por uns perrengues por ser early adopter, mas ele evoluiu muito quando comparado ao seu antecessor.

Ainda temos alguns bugs, mas, no geral, uma aplicação criada com o Ionic 2 é muito, mas muito, mas muito melhor que uma criada no Ionic 1. Sem contar que é muito mais fácil dar manutenção conforme a aplicação vai crescendo.

O que tem de novo?

Por herdar as caracaterísticas do Angular 2, o framework agora é mais performático e é basicamente Javascript, ao contrário do Angular 1 (onde precisávamos aprender um monte de coisas pra podermos trabalhar [$scope, $q, controller, directive, etc.]).

É importante ressaltar que agora nós podemos tirar proveito do ES2015 ES6 (tecnicamente é Typescript) para manter nosso código melhor, mais legível e organizado.

O Ionic 2 foi projetado com o conceito de temas, ou seja, por padrão ele já segue as guidelines de design do iOS, do Material Design e do Windows Phone. A estrutura e a forma de personalizar os componentes também ficaram muito mais claros, já que o SASS está mais bem estruturado e o processo de build já vem com ele configurado out of the box.

Por falar em estrutura e build, o Ionic 2 está muito mais simples e organizado nesses pontos. Não temos mais várias formas de fazer as mesmas coisas. Possuímos uma CLI que nos ajuda a gerar automaticamente páginas, componentes, providers, pipes, tabs e diretivas. E, como se não bastasse, nos fornece um processo de build bem definido, que vai compilar, otimizar e minificar nosso aplicativo (pretendo aprofundar mais em como funciona esse processo aqui no blog futuramente).

Calma, que já tá acabando. Foram adicionados novos componentes de UI que antes não existiam (como o DateTime picker). O ngCordova “evoluiu” para o Ionic Native. Existe, por padrão, uma nova ferramenta para captura de erros. Agora existe suporte aos famigerados Progressive Web Apps, dessa forma não estamos mais presos ao controle das lojas de aplicativos.

E pra finalizar: não existe mais um sistema de navegação baseado em URLs. E isso é uma coisa boa, acredite. A equipe do Ionic percebeu que um sistema de navegação baseado em URLs como o ngRoute ou o UI-Router limitavam os aplicativos a forma como as aplicações funcionam na web. E na web tudo isso faz sentido, já que dependemos das URLs para sair navegando por aí. Mas nos aplicativos isso era uma limitação, já que neles a gente não depende de URLs para navegar. Tudo o que nós precisamos é poder exibir uma página e remover essa página da pilha de navegação. Por mais que esse conceito pareça simples, ele nos trás a possibilidade de possuirmos múltiplas pilhas de navegação que compartilham das mesmas páginas e funcionam de forma independente, ficou complexo? Pretendo discorrer sobre o tema em um próximo artigo.

Conclusão

Mudou muita coisa, mas vale a pena dar uma olhada. E, se não der para migrar seus antigos aplicativos, no mínimo comece a escrever os novos usando o Ionic 2.

Existe um guia para migração que você pode encontrar clicando aqui e para mais informações sobre o lançamento oficial é só acessar o post: Announcing Ionic 2.0.0 Final.

Pretendo voltar a escrever mais aqui, ainda não sei se vou me comprometer a postar com certa regularidade (já que tentei outras vezes e fracassei miseravelmente), mas pretendo falar sobre o novo sistema de navegação, testes automatizados, integração contínua, typescript, offline first e por aí vai. Então, nos vemos em breve.