Ionic 5 – o que há de novo?

African-American IT Developer Writing Code

Conhecendo o Ionic Framework

Criado em 2013, o Framework de código aberto e construído sobre Angular JS e Apache Cordova, fornece uma série de recursos para o desenvolvimento de Aplicativos Híbridos, Web e Web Progressivos (PWA).

Com a premissa de “write once, run everywhere”, o desenvolvimento ficou flexível, o código é escrito uma única vez e a base executável em todas as plataformas. Não é à toa que o Ionic, em seus 8 anos de existência, alcançou uma legião de fãs e haters (Ionic 2 e 3).

Em 2020 foi lançada a versão 5 do Ionic Framework, com o objetivo de ser mais rápido e leve que as versões anteriores. Elenquei 3 atualizações, mas você pode conferir todas aqui.

Vamos ver o que há de novo!

Ionic 5 – o que há de novo?

Na versão 5, o design focado na experiência do usuário é uma das principais metas das atualizações e as alterações se aplicam as integrações Angular, React e Vue.

1. Fácil Personalização de Componentes

Finalmente o chamado foi atendido, e a nova versão contém mais variáveis CSS para facilitar a estilização. Componentes com escopo como back button, card, segment e split pane foram convertidos em Shadow DOM, além de oferecer o suporte para Shadow Parts.

Importante lembrar que, nas antigas versões do Ionic, as variáveis Sass eram utilizadas na personalização o que acarretava um tempo maior na construção da aplicação já que era necessário gerar diversos arquivos CSS com variáveis Sass para conseguir ter temas distintos.

2. Design iOS

Aproveitando o lançamento do iOS 13, muitos componentes de design foram atualizados para corresponder ao iOS nativo sendo esta umas das atualizações mais importantes da versão 5.

  • Segment

Comparado a versão iOS anterior o design do segmento mudou. Com a atualização do Ionic 5, um único indicador diferencia os botões e o indicador é simplesmente arrastado ao invés de ser diferenciado por bordas e fundos preenchidos como na versão anterior.

  • Swipe to Close Modal

O deslizar para baixo para fechar, um recurso característico do iOS, agora não exige do usuário o toque do botão para fechar e não cobre a tela inteira. O Ionic 5 habilita uma modal que empurra uma página para trás, além de que com um gesto de arraste para baixo a modal é fechada definitivamente.

3. Ícones (Ionicons)

A versão 5 conta com um novo conjunto de ícones na biblioteca gratuita e de código aberto, e apresenta mudanças significativas com a atualização:

    • Os Ionicons têm conjuntos para os modos claro e escuro – o que é ótimo, os ícones agora não mudam quando o modo é alterado;
    • A definição por modo ainda funciona, mas cada modo dever ser definido com as propriedades ios e md;
    • 3 variantes novas – nítido, contorno e preenchimento padrão.

Veja os novos Ionicons.

O Ionic, ao longo da sua existência, está cada vez mais aberto e adaptável para as novas tendências o que com certeza o torna um excelente framework para criação de Aplicativos para segmentos variados.

Aqui na Bitzen programamos com o Ionic desde a versão 3 (sim, temos um caso de amor e ódio rs!), então vivenciamos e aplicamos cada mudança, e confesso (falando pelo Time) que estamos bem empolgados com a versão 5 – não é à toa que o Ionic é uma das linguagens principais quando desenvolvemos os Aplicativos Híbridos.

Se você estiver interessado em estudar ou até se aventurar a desenvolver aplicações híbridas, recomendamos de olhos fechados o Ionic. A curva de aprendizado é menor – principalmente se você já possui experiência em desenvolvimento Web.

Você pode acessar a documentação completa aqui.

Mais para explorar

Kenes Rakishev