Accueil / Blog / Métier / 2015 / Ionic 2 : les nouveautés (retours de l'AngularConnect)

Ionic 2 : les nouveautés (retours de l'AngularConnect)

Par Simon Bats publié 23/10/2015
Des changements radicaux et bienvenus par rapport à la version 1 d'Ionic.
Ionic 2 : les nouveautés (retours de l'AngularConnect)

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

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Les nouveautés de Typescript 3.0 Les nouveautés de Typescript 3.0 13/08/2018

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

React 16.3 : Introduction de la context API React 16.3 : Introduction de la context API 06/04/2018

React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.

Routing Angular : optimisez le rendu au changement de page Routing Angular : optimisez le rendu au changement de page 08/06/2018

Avec les Resolvers, les Guards et les Initializers, découvrez les bonnes pratiques pour éviter ...

Découverte de React Native Découverte de React Native 18/04/2016

Présentation de React Native, quelles sont ses possibilités et peut-on l'utiliser en prod ?