La historia de IONIC

Ionic ha sido, desde su publicación en 2013, el gran abanderado del desarrollo hibrido, construido sobre dos pilares solidos: framework web y wrapeo nativo. Ahora publicará su versión 4 con un cambio drástico.

Historia de Ionic
 
Ionic 1: los comienzos

En 2013 se publica la primera versión de Ionic, construida sobre AngularJS y Cordova. Al estar construido sobre AngularJS hereda las virtudes y defectos de este framework. Por otro lado, gracias a Cordova disponía del wrapeo nativo y su multitud de plugins para proveer de ciertas funcionalidades nativas.

Ionic es una revolución en su momento, permitiendo de forma fácil lo que el mercado buscaba: una manera sencilla de crear aplicaciones hibridas.

 
Ionic 2: la gran actualización

En 2016 el equipo de Angular actualiza por completo su framework, siendo tan grande el cambio que es considerado un nuevo framework en lugar de una actualización, así nace Angular. De este modo, Ionic se ve obligado a actualizarse para utilizar el nuevo framework. Debido a los cambios tan drásticos en el framework base, la actualización supone un gran esfuerzo para el equipo de Ionic.

De la mano de Angular llega el uso de Typescript y la modularizacíon, esto permite a Ionic separar su framework en partes: core, angular, native, etc.
 
Ionic 3: la pausa

En lugar de repetir el caso de AngularJS, Angular decide adoptar semver y un ciclo de releases major de seis meses y LTS bianual. Esto permite tener un framework en constante evolución, con un periodo de seis meses entre breaking changes, la primera versión publicada con este modelo fue Angular 4 saltándose la tercera para estandarizar el versionado interno de sus partes.

Ionic libera así su versión 3 sobre esta versión LTS de Angular, y decide que sus actualizaciones se limitaran a la versión LTS de Angular.

En su versión 3 Ionic se centra en mejorar su propio framework y continuar con su integración con Angular

Ionic Cli
Mejoras considerables en el cli de Ionic, para permitir de manera sencilla configurar, desarrollar y compilar los proyectos y abstraer al desarrollador de los comandos internos: angular-cli, Webpack o Cordova cli

Ionic Native
En la parte nativa, ofreciendo clases propias que recubren los plugins de Cordova para trabajar de manera más sencilla con ellos.

Mejor integración Angular
- Integración con el Routing de Angular

- Definición de anotaciones propias

 Ionic 4: Eliminación de la dependencia de Angular

Ofrece los componentes de interfaz de usuario (UI), optimizados para móviles, a través de Web Components. Esto quiere decir que el rendimiento es superior porque se trabaja directamente con JavaScript y que, además, lo podemos utilizar desde cualquier otro framework frontend.

Se eliminan las dependencias con cualquier framework JavaScript. Ya no hace falta utilizar Angular, como en anteriores versiones, y dispones (si quieres) de otros tan conocidos como React, Vue, cualquier otra librería o incluso JavaScript nativo.

Se añade la librería StencilJS para el desarrollo de los componentes de UI, creada por ellos mismos y optimizada para darnos el mejor rendimiento y correr en móviles y en apps híbridas.

Aunque podamos seguir utilizando Cordova, Capacitor es la nueva capa que se ha añadido para hablar con la parte nativa de los dispositivos y ofrece un mayor rendimiento que el primero.

Ionic: 5: Nuevas propiedades

Actualización del diseño para iOS: con la nueva liberación de iOS 13 se han cambiado varios componentes visuales para adaptarse al nuevo diseño.

Cambio en Segment, este componente selector se ve actualizado visualmente y a nivel de funcionalidad, ahora podremos hacer un gesto para cambiar la selección. Ha sufrido algunos cambios que rompen la programación así que revisa siempre que uses este componente en tu proyecto a la hora de manejar los eventos, porque ya no se usa ionSelect sino ionChange.

Se han eliminado las propiedades –color-activated y –backgroud-activated en los botones, por lo que se usará la clase .activated a todo componente clickable:

• Action Sheet
• Back Button
• Button
• FAB Button
• Item
• Menu Button
• Segment Button
• Tab Button

Tambień hay que echarle un vistazo a todo aquello que tenga que ver con las opacidad de los Focus y los Hover.

También cambia la manera de hacer check en el segment, ya que se usará el valor del io-segment para selccionar el segmento, coincidiendo con el value del botón. Lo mismo sucederá con el ion-select

Se han eliminado las propiedades del botón de Toast para obtener un nuevo role: ‘cancel’

Se han actualizado los colores por defecto:

• primary: #3880ff
• secondary: #3dc2ff
• tertiary: #5260ff
• success: #2dd36f
• warning: #ffc409
• danger: #eb445a
• light: #f4f5f8
• medium: #92949c
• dark: #222428

El servicio de eventos de @ionic\angular se ha quitado, deberemos hacerlo ahora con observables o rxjs

Si quieres aplicar un modo ahora se aplica de padres a hijos de manera automática, lo que evita tener que poner un mode=’md’ en toda la estructura html

Añadida la posibilidad de tener cabeceras expandibles (collapsible), para ofrecer la misma funcionalidad de iOS 13.

Por ejemplo los títulos largos ahora son expandibles, cuando el scroll llega a un determinado punto.

Los títulos pequeños de las cabeceras permiten colocarse debajo de los grandes, se puede usar para tener la funcionalidad de cerrar el modal a la hora de hacer swipe.

El pull to refresh de las aplicaciones nativas ahora se hacer por encima de la cabecera, ahora con la versión de ionic ocurrirá lo mismo.

Las cabeceras de listado ahora deberemos colocarlas dentro de un ion-label, si queremos que tenga más lineas.

Se liberan los iconos versión 5 con un redibujado completo de todos los iconos, incluidas las variantes circular, cuadrada y forma.

Se ha incluido un nuevo motor de Animaciones de Iconos

Respecto a los iconos ya no deberemos cambiar entre iconos dependiendo del modo

Se ha incluido nuevos colores para los iconos, se definen en el theme/variables.scss

Se han rediseñado los starters qe usamos cuando creamos un nuevo proyecto: blank, menu, list y tabs

Para facilitar la maquetación css de los componentes se ha empezado a meter el soporte de Shadow Parts, en los siguientes componentes:

• Back Button
• Card
• Segment
• Split Panel

Esto debería aislar mejor los estilos de los componentes y que no afecten al resto de elementos presentes visualmente

Además el Shadow DOM permite incluir variables CSS (propiedades personalizadas) para maquetar mejor los componentes.

  Ionic 5 al usar todos los componentes de Angular, inclíido el CLI. beneficia de la actualización a Ivy como motor de compilación y ejecución.