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.
Nous allons donc suivre les étapes suivantes pour découvrir les nouveautés d’Ionic 5:
- Mettre à jour Ionic
- Le mode sombre d’Ionic 5
- Les nouveaux composants Ionic 5
- Ionicons V5: la nouvelle bibliothèque d’Icônes d’Ionic 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.
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.
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é).
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
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
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.
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.
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:
- Outline: seuls les bords de l’icône sont colorés
- Filled: le fond de l’icône est coloré
- 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:
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/
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.