Il y'a quelques semaines j'ai décidé de remettre au goût du jour ma première application développée avec Ionic (à l'époque j'avais utilisé la première version du désormais très célèbre framework). En effet, ma toute première app était Cuisson des oeufs.
Je me souviens, j'avais eu beaucoup de mal à la faire fonctionner correctement, mais elle m'avait permis d'apprendre énormément sur le développement d'application et le développement javascript en général.
Ionic 4 le renouveau ?
A l'heure ou j'écris ces lignes, Ionic 4 est encore (et toujours) en beta. J'ai vu dans ma console lorsque j'ai voulu recréé mon application (en partant de zéro donc) une suggestion de le faire avec Ionic 4. Innocemment je me suis dit "tiens ! si ils me proposent c'est que la version est à bout touchant". Et bien en faite, pas vraiment. Le framework en soit oui très certainement, mais les extensions ne sont pas toutes fonctionnelles et certaines sont plus du bricolage qu'autre chose.
Première étape, il faut ajouter /ngx à chaque import. Ensuite, il faut modifier le package.json pour ajouter manuellement la dernière version du package (la même version que celle de Ionic... enfin presque !). En effet, lorsque j'ai démarré le développement de mon app, Ionic était en version 4.0.0-beta.21 donc à chaque plug-ins installés, j'ai dû modifier leurs versions comme suit :
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/geolocation": "^5.0.0-beta.21",
"@ionic-native/local-notifications": "^5.0.0-beta.21",
"@ionic-native/native-audio": "^5.0.0-beta.2",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic-native/vibration": "^5.0.0-beta.21",
Maintenant il faut ajouter (prenons par exemple la geolocation) le plugin à l'app.module.tsde la manière suivante (avec le fameux ngx):
import { Geolocation } from '@ionic-native/geolocation/ngx';
...
providers: [
Geolocation
],
...
Ionic 3 vs Ionic 4, qu'est-ce qui change ?
Il faut le dire, si vous êtes un adepte de la version 3, il n'y a pas d'énorme bouleversement. Ce qu'il faut savoir c'est qu'au départ Ionic était voué à être développé avec Angular. Mais avec les avancées d'aujourd'hui, et les divers autres framework populaires l'équipe de Ionic pencherait au développement d'un framework modulable de sorte à pouvoir choisir avec plusieurs (coucou React ?).
De ce fait, dorénavant pour créer une application avec ionic 4 il faudra lancer la commande suivante ionic start appName blank --type=angular (préciser Angular, pas forcement obligatoire pour le moment car Angular est le seul framework disponible avec Ionic).
Le point qui a le plus changé ? La navigation !
A la base j'avais arrêté de développer sous React parce que je me prenais trop la tête avec les déclarations liés à la navigation entre les pages. Et bien avec Ionic 4 il faudra vous y habituer, c'est obligatoire (point positif, quand on génère une page avec Ionic CLI celui-ci ajoute directement la navigation au module). Voici un exemple (avec différence) :
Avec Ionic 4 :
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Et pour naviguer vers la page "home" il faudra faire :
import { Router } from '@angular/router';
constructor(private router: Router) { }
navigateToHome(){
this.router.navigate(['/home']);
}Avec Ionic 3 :
import { NavController } from 'ionic-angular';
import { HomePage } from './pages/home/home'
constructor(public navCtrl: NavController){}
navigateToHome(){
this.navCtrl.push(HomePage);
}
Migrer de Ionic 3 à Ionic 4
Pour migrer son application vers Ionic 4, l'équipe de Ionic a publié une marche à suivre qui est disponible ici. Celle-ci est très détaillée et permet de répondre à toutes les questions.
Ils ont aussi publié un outil de migration qui permet de vérifier votre code et de proposer les modifications nécessaires en vue du passage sous Ionic 4.
