Ionic 3

Ca recommence ? Va-t-il falloir tout réapprendre ? Non ! Le passage de Ionic à Ionic 2 a nécessité de (presque) tout réapprendre. Celui d'Ionic 2 à Ionic 3 sera bien plus aisé. Pour faire un parallèle avec Angular sur lequel est toujours basé Ionic, le fossé entre AngularJS à Angular 2 se retrouve entre Ionic et Ionic 2, tandis que le passage facile d'Angular 2 à Angular 4 trouve son équivalent dans le passage qui s'annonce tout aussi facile de Ionic 2 à Ionic 3.

SemVer

Comme c'est le cas avec Angular où il est recommandé de ne plus indiquer le numéro de version (on dit désormais simplement 'Angular'), l'équipe de Ionic souhaiterait que l'on s'habitue à parler simplement de Ionic.
Le Semantic Versioning (SemVer) s'applique à Ionic. Ainsi, Ionic 2.1.0 correspond à la version majeure '2', la version mineure '1' et le patch '0'.

Mais sachant que vous arriverez sur cette page en cherchant Ionic 3 dans Google, je vais continuer à utiliser Ionic 2 puis Ionic 3 jusqu'à ce que l'habitude soit prise.

Ionic 3 utilise Angular 4.0

Ionic 3 sera basé sur Angular 4.0. Et comme Angular 4.0 a permis d'améliorer la rapidité des applications Angular et la réduction de la taille des builds, ces deux avantages se retrouveront bien évidemment dans Ionic 3.

Mettre à jour une applciation Ionic 2 vers Ionic 3

Quand le moment sera venu, il suffira de changer les dependencies et dev-dependencies dans package.json

"dependencies": {  
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "ionic-native/core": "3.4.2",  
    "ionic-native/splash-screen": "3.4.2", 
    "ionic-native/status-bar": "3.4.2", 
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.0-beta.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.2",
    "typescript": "~2.2.1"
  },

Module à importer

import { BrowserModule } from '@angular/platform-browser';  
//...
imports: [  
    BrowserModule,
    HttpModule,    // si utilisation de Http
    IonicModule.forRoot(MyApp)
]

Ionic Native 3

Dans Ionic Native 3, les foncionnalités natives d'un device seront accessibles via l'injection de dépendence propre à Angular et non plus via des méthodes statiques. En outre, des mocks permettront de développer une application Ionic entièrement dans le navigateur. Par exemple un mock du plugin 'Camera' (créé en héritant de la classe Camera) permettra de fournir des données en base64 lorsque l'on développe et que l'on ne pousse pas systématiquement sur un device

class CameraMock extends Camera {  
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA");
    })
  }
}

Breaking changes mineurs

Quelques breaking changes sans gros impacts sont à noter :

  • suppression de l'ancienne grid déjà 'deprecated' (celle qui faisait figurer 'width-xx', ainsi une grille faisant 12 colonnes, 'width-50' devient 'col-6', 'offset-50' devient 'offset-6')
  • suppression de la possibilité de jouer sur la couleur (ex: h1[color]) d'éléments HTML natifs. Il faudra jouer sur ion-text.

Quelques modification sur le composant 'ion-slides' :

  • plus d' "options" (utiliser une input property propre à Angular)
  • plus d'événement 'ionWillChange', remplacé par 'ionSlideWillCange'
  • plus d'événement 'ionDidChange', remplacé par 'ionSlideDidChange'
  • plus d'événement 'ionDrag', remplacé par 'ionSlideDrag'
  • plus de méthode getSlider(), utiliser une instance de ion-slides à la place

Ionic pour les développeurs pressés

Vous pouvez donc continuer à progresser sur Ionic 2, qui est un framework complètement nouveau par rapport à Ionic 1, grâce à Ionic 2 pour les développeurs pressés au prix réduit de 47.20 € HT. Le passage à Ionic 3 sera une formalité.