Au sein des nombreuses conférences d'AngularConnect, nous avons eu droit à l'annonce de la version 2 du framework hybride mobile le plus utilisé. Avec plus d'un million d'applications créées, Ionic a su écouter ses utilisateurs et nous revient avec de belles nouveautés.

Nos impressions

Des choses très prometteuses ont été annoncées lors de cette conférence. Parmi elles nous retiendrons particulièrement la simplification du scripting et du templating, le passage à la WAPI pour les animations, et le changement du système de routing. Ces 3 points à eux seuls résolvent des problèmes récurrents et assez importants que l'on recontre dans la v1 d'Ionic. Autant dire que couplé à l'augmentation perpétuelle des performances mobiles, l'hybride à de beaux jours devant lui !

De manière générale

• Utilisation des capacités des navigateurs les plus récents.
• Simplification du framework en revenant à du JavaScript plus standard et du balisage simplifié.
• Utilisation d'Angular2 mais de manière plus discrète que dans la première version.
• Utilisation des nouveautés JavaScript.

Script et template

• Simplification des templates en essayant de se débarasser des classes.
• Favorisation des attributs comme paramètres pour les directives.
• Ajout des décorateurs pour simplifier la création de pages et d'applications.
• Permettre d'écrire les scripts en vanilla JS en limitant au maximum la nécessité de l'utilisation d'Angular.

Plates-formes

• Une meilleur séparation des plates-formes au coeur du framework pour permettre une syntaxe unique interprétée automatiquement selon le contexte d'exécution.
• Plus que de simples différences de style entre les plates-formes, telles que des widgets au comportement plus proches de chaque OS.
• Une meilleure réutilisation de l'environnement natif (transitions, onglets…).
• Plus de 900 icônes SVG.
• Utilisation des icônes avec un code commun à toutes les plates-formes.

Navigation

• Remplacement de la navigation ui-router par un système de Push / Pop.
• Une meilleure gestion des profondeurs de navigation. Notamment avoir une navigation de niveau zéro constante. (exemple : ne plus avoir un bouton retour lorsque l'on passe d'un lien d'un menu latéral à un autre).
• Améliorer la gestion d'URL et des liens profonds.

Customisaton

• Gestion de plusieurs thèmes avec des propositions par défaut (exemple : thème sombre).
• SASS activé par défaut.
• Augmentation des éléments modifiables via les variables SASS.

• Utilisations des maps pour gérer les groupes de variables SASS :

  $light:         #fff !default;
  $stable:        #f8f8f8 !default;
  $positive:      #387ef5 !default;
  $calm:          #11c1f3 !default;
  $balanced:      #33cd5f !default;
  $energized:     #ffc900 !default;
  $assertive:     #ef473a !default;
  $royal:         #886aea !default;
  $dark:          #444 !default;
  

  devient

  $colors: (
      primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
  );
  

Animations

• Utilisation de la Web animation API (définie par le W3C) pour gérer les animations.
• WAPI disponible nativement sur Chrome (Android) et avec un polyfill déjà fonctionnel sur iOS (Apple).
• Utilisation de l'accélération matérielle pour les transitions.
• Possibilité d'étendre, d'ajouter et de paramétrer les animations.
• WAPI accessible via une encapsulation simplifiée.

Configuration

• Configure all the things!
• Configuration possible à de nombreux niveaux.
• Configuration globale.
• Configuration des plates-formes.
• Configuration des attributs.
• Configurations des instances de composants.

JS

• Passage de ES5 à ES2015 pour la v2.
• Typescript (optionnel).
• Decorateurs ES2015.

Accès au téléphone (plugins Cordova)

• Intégration de Ng-Cordova au coeur d'Ionic pour les composants les plus importants : batterie, GPS, Bluetooth, appareil photo…
• Accès simplifié aux fonctionnalités.
• Chargement optimisé pour n'avoir que ce qui est nécéssaire.

CLI

• ES2015 et Typescript Transpilation.
• Packaging Webpack.

A venir dans la v2

• Support des Web workers.
• Rester à jour avec Angular2.
• Et bien plus…

Vous pouvez d'ores et déjà tester la version 2.alpha disponible ici !

Et bien sûr la vidéo de la conférence est disponible sur Youtube : AngularConnect - Building cross-platform apps with Ionic 2