El día 11 de Febrero Ionic liberó la nueva versión 5 del Framerwork de Ionic, en esta entrada veremos las principales novedades de esta nueva versión así como el proceso de actualización que tendremos que hacer de nuestros proyectos.

Mejoras y Cambios de Ionic 5

A continuación veremos las novedades principales de esta nueva versión:

• 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 debremos 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 Pane
• Esto depeberí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.
• Tal como comentamos en el post sobre Angular 9,  Ionic 5 al usar todos los componentes de Angular, incuido el CLI. beneficia de la actualización a Ivy como motor de compilación y ejecución.

¿Cómo Actualizo?

Se recomienda actualizar desde la versión 4.11.10 de ionic antes de realizar el cambio, ejecutar la actualización de Angular a la versión 9 como dijimos antes, y luego ejecutar:

$ npm i @ionic/angular@latest –save

o en el caso de usar react:

$ npm i @ionic/react@latest –save

$ npm i @ionic/react-router@latest –save

$ npm i ionicons@latest –save

O en el caso de Stencil o JavaScript standar:

npm i @ionic/core@latest –save

En cualquier caso pásate por la guía de actualizaciones para verlo en mayor detalle:

https://ionicframework.com/docs/building/migration

En cualquier caso no te olvides de visitar el Curso de Ionic que tenemos en la tienda.