Bonjour à tous! Dans ce tutoriel Ionic nous allons voir comment mettre à jour votre framework à la version Ionic 5.

Nous allons également voir les principales nouveautés que propose cette version et comment les prendre en main.

Nous verrons notamment les nouveaux composants qu’Ionic 5 proposent avec la particularité de s’adapter au nouveau design d’iOS.

Ionic propose en plus de cela une nouvelle API de gestion des animations que nous aborderons en fin de ce tutoriel Ionic 5.

Ionic 5 List Header
Les nouveaux composants d’Ionic 5 et le thème sombre

Nous allons donc suivre les étapes suivantes pour découvrir les nouveautés d’Ionic 5:

  1. Mettre à jour Ionic
  2. Le mode sombre d’Ionic 5
  3. Les nouveaux composants Ionic 5
  4. Ionicons V5: la nouvelle bibliothèque d’Icônes d’Ionic 5
  5. Ionic Animation API

Mettre à jour Ionic

On commence par la mise à jour du framework Ionic à la version 5. Cela se fait très facilement et assez rapidement avec une simple ligne de commande.

Je vous laisse cependant le guide de migration officiel d’Ionic 5 pour accéder à des informations plus complètes: https://ionicframework.com/docs/building/migration

La ligne de commande en question est une commande NPM pour mettre à jour Ionic, et la ligne de commande Angular à la dernière version:

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

Attention, cette ligne de commande convient aux projets Ionic/Angular et non aux projets Ionic/React.

Je vous laisse également le guide complet des nouveautés d’Ionic 5 sur GitHub: https://github.com/ionic-team/ionic/blob/master/BREAKING.md#version-5x

Passons maintenant aux principales nouveautés concrètes de cette version.

Commencez le développement mobile avec Ionic et Firebase
Commencez le développement mobile avec Ionic et Firebase

Le thème sombre d’Ionic 5

La plus visible des nouveautés d’Ionic 5 est la présence par défaut du thème sombre.

En effet les système d’exploitation mobile iOS et Android ceux sont tous les deux mis massivement au thème sombre.

La plupart des application iOS (Facebook, Pinterest, Instagram) proposent désormais un mode sombre qui sera automatiquement déclenché avec le mode de l’appareil.

Le thème sombre, une des nouveautés d'Ionic 5
Le thème sombre, une des nouveautés d’Ionic 5

Même si la transition est plus longue à venir sur Android, la fonctionnalité est bien là et la compatibilité aussi.

La nouveauté de ce thème sombre est qu’il activé par défaut sur vos applications Ionic désormais.

Si vous créez une application Ionic et que vous la publiez sur l’App Store, votre application passera automatiquement à son thème sombre le soir (si l’utilisateur a bien activé cette fonctionnalité).

Le thème sombre d'Ionic 5
Le thème sombre d’Ionic 5, activable aussi manuellement

Bien sûr il est possible d’activer ou de désactiver cette fonctionnalité, et pour cela je vous renvoie vers la documentation d’Ionic à ce sujet: https://ionicframework.com/docs/theming/dark-mode

Créez des applications Ionic à interface sociale avec Firebase
Créez des applications Ionic à interface sociale avec Firebase

Les nouveaux composants Ionic 5

Depuis la sortir d’iOS 13, de nouvelles normes de design et d’animations sont apparus dans le monde du développement mobile.

Ionic reprend donc toutes ces nouveautés et les intègre avec succès dans sa nouvelle version.

Je vous laisse en premier l’article de blog d’Ionic qui reprend la plupart des nouveaux composants: https://ionicframework.com/blog/announcing-ionic-5/

Dans ce tutoriel, j’ai repris les composants les plus importants pour moi qui apportent le plus de valeur à nos applications.

Ion Modal

Le premier composant mis à jour d’Ionic est le modal, et surtout la gestuelle d’ouverture et de fermeture de celui-ci: https://ionicframework.com/docs/api/modal#swipeable-modals

Le modal glissable dans Ionic 5
Le modal glissable dans Ionic 5

Nous pouvons maintenant créer des pages sous forme de modal que nous pouvons fermer en glissant vers le bas.

Le controller est le même, on importe simplement un module supplémentaire d’Angular:

import { IonRouterOutlet } from '@ionic/angular';

constructor(private routerOutlet: IonRouterOutlet) {}

async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    swipeToClose: true,
    presentingElement: this.routerOutlet.nativeEl
  });
  return await modal.present();
}

De cette manière, lorsque vous testez votre application Ionic sous iOS et même sur votre navigateur, votre page modal s’ouvre en afficher la page précédente en fond.

Vous pouvez ainsi fermer la page en glissant depuis le header vers le bas, ce qui est un geste de plus en plus répandu sur iOS.

Ion Title

Ionic a aussi mis à jour l’un de ses principaux composants, le titre dans le header de nos page: https://ionicframework.com/docs/api/title

Le comportement de notre ion-title sur iOS se rapproche maintenant beaucoup plus des applications natives d’Apple.

On retrouve en effet la possibilité de réduire une titre dit “large” en un plus petit lorsque l’on srcoll dans notre page.

 Apprenez à créer des applications Ionic directement avec Driss AS
Apprenez à créer des applications Ionic directement avec Driss AS

Ionicons V5: la nouvelle bibliothèque d’Icônes d’Ionic 5

En mettant à jour le framework, l’équipe d’Ionic a également proposé une nouvelle bibliothèque d’icônes open source.

Ces nouvelles icônes change quelques peu en comportement et dans leur utilisation, mais le principe reste le même.

Ionicons V5: la nouvelle bibliothèque d'Icônes d'Ionic 5

Attention, si vous travaillez avec des applications Ionic 4, consultez la précédente bibliothèque d’icône à l’adresse suivante: https://ionicons.com/v4/

Comme je vous l’ai dit, dans tous les cas le principe reste le même, simplement ici nous retrouvons trois types pour chaque icône:

  1. Outline: seuls les bords de l’icône sont colorés
  2. Filled: le fond de l’icône est coloré
  3. Sharp: les bords de l’icône sont plus carré (fond coloré aussi)

Dans la version 4 des icônes d’Ionic, il existait un mode pour chaque version de design des système d’exploitation mobile.

On avait ainsi le mode iOS et Android (Material) et ainsi une adaptation de nos icônes en fonction de l’appareil sur lequel tournait l’application.

Ici le type Sharp reprend les grandes lignes du Material Design d’Android, tandis que les types Outline et Filled sont en fait les version pleins et transparentes des icônes iOS.

De la même manière, vous pouvez sélectionner l’icône et récupérer sa balise HTML correspondante:

Ionicons V5: la nouvelle bibliothèque d'Icônes d'Ionic 5

Par exemple une icône (Sharp) de fusée, que j’utilise par exemple dans mon application Startuper est représentée par le code suivante:

<ion-icon name="rocket-sharp"></ion-icon>

En revanche l’icône Filled de la fusée sera simplement:

<ion-icon name="rocket"></ion-icon>

Et finalement l’icône Outline de la fusée sera:

<ion-icon name="rocket-outline"></ion-icon>

Voilà pour les nouveautés des icônes dans Ionic, que des bonnes nouvelles!

Ionic Animation API:

Dans cette partie, nous allons rapidement aborder la nouvelle fonctionnalité d’Ionic pour créer plus facilement des animations: l’API Ionic Animations.

Ionic a en effet proposé de créer sa propre API à partie de technologie existante mais spécialement conçu pour le mobile: https://ionicframework.com/blog/introducing-ionic-animations/

Ionic 5: Ionic Animation API
Ionic 5: Ionic Animation API

L’API Ionic Animations utilise l’API Web Animations (avec des animations CSS comme solution de rechange) pour contrôler les animations sans utiliser d’autre plugin.

Je vous laisse le lien de la documentation de l’API Web Animations pour en savoir plus: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

Dans son article de présentation, Ionic propose un premier exemple très simple pour modifier la taille et l’opacité d’une image avec le code suivant:

const animation = createAnimation()
  .addElement(document.querySelector('.square'))
  .duration(1000)
  .direction('alternate')
  .iterations(Infinity)
  .keyframes([
    { offset: 0, transform: 'scale(1)', opacity: '1' },
    { offset: 1, transform: 'scale(1.5)', opacity: '0.5'
 }
  ]);

animation.play();

On remarque notamment la fonction assez connu de scale() et la propriété opacity pour modifier la taille et l’opacité de notre image.

Je reviendrai probablement en détail sur l’utilisation de cette API dans nos applications Ionic même si pour le moment ce n’est pas une priorité pour moi.