Ionic 5 est disponible 🎉🚨

La version 5.0 d’Ionic (Magnesium) est disponible depuis le 11 fĂ©vrier. Cette nouvelle version majeure du framework arrive avec son lot d’Ă©volutions. Qu’est-ce qui a rĂ©ellement changĂ© par rapport la version prĂ©cĂ©dente ? Les bonnes pratiques de la version 4 sont-elles toujours d’actualitĂ©s avec cette nouvelle version ? Quel effort doit-on fournir afin de migrer une application de la version 4 Ă  la version 5 ?

Alors, qu’est-ce qui va vraiment changer dans Ionic 5?

Pas mal de nouvelles fonctionnalités et évolutions, mais pas de bouleversements majeurs. 
C’est en effet ce qu’il ressort de l’annonce d’Ionic sur leur blog et de la consultation de la liste des changements – changelog – disponible sur github.
De plus, il y aura une rĂ©trocompatibilitĂ© des API de la version 4 avec la version 5. C’est une excellente nouvelle car cela facilitera d’autant la migration d’une application de la version 4 Ă  la version 5. 

En qualitĂ© de partenaire officiel d’Ionic, Jnesis a dĂ©cidĂ© d’analyser les principales Ă©volutions. Parmi les principaux changements de la version 5 d’Ionic, on peut donc noter:

  • la suppression des Events au profit des observables / observers de rxjs.
  • de nouvelles couleurs par dĂ©faut sont disponibles pour Ionic 5
  • l’attribut « mode » d’un Ă©lĂ©ment s’applique dĂ©sormais Ă  lui-mĂŞme ainsi qu’Ă  l’ensemble des ses enfants
  • Il n’y a plus d’icĂ´ne spĂ©cifique Ă  Android ou iOS. De nouvelles options sont cependant disponibles pour personnaliser l’apparence des icĂ´nes
  • les styles ont Ă©tĂ© revus:
    • remplacement d’attributs par des classes
    • changement dans les mĂ©dias queries
    • la classe activated Ă  Ă©tĂ© remplacĂ©e par ion-activated
    • certaines propriĂ©tĂ©s CSS globales ont Ă©tĂ© mises Ă  jour
  • certains composants ont Ă©tĂ© modifiĂ©s (Action Sheet, Anchor, Back Button Card Split Pane, Button FAB Button Item Menu Button Tabs, Controllers, Header / Footer, List Header, Menu, Nav Link, Radio, Searchbar, Segment, Segment Button, Select Option, Skeleton Text)

Comment migrer une application en version 4 vers 5 ?

Contrairement à la migration de la version 3 vers la version 4 qui comprenait des changements très importants au niveau de la structure du framework, la migration de la version 4 à la version 5 est beaucoup moins lourde.

Avant de mettre Ă  jour son application vers la version 5, il est recommandĂ© de mettre Ă  jour l’application vers la dernière version 4, puis de corriger l’ensemble des warnings js prĂ©sents dans l’application (les warnings en version 4 non corrigĂ©s gĂ©nĂ©rerons des erreurs en version 5).

Une fois les warnings corrigés, on lance la commande suivante :

npm i @ionic/angular@latest --save

L’essentiel des adaptations est alors visuel (mise à jour des couleurs, propriétés CSS customisées, icônes ou styles dans les composants).

N’hésitez pas à nous contacter si vous souhaitez vous faire accompagner par des experts ionic dans votre démarche de migration ou pour réaliser un audit préliminaire..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *