Ionic 2 vs Ionic 1 : gains de performances, nouveaux outils et un grand pas en avant

Le projet Ionic gagne rapidement en popularité. Avec plus de 27 000 étoiles sur GitHub, il est devenu l'un des 50 projets open source les plus populaires au monde.

Et puisque la version stable d'Ionic 2 a été récemment annoncée, c'est le moment idéal pour les ingénieurs d'analyser et de comprendre les différences entre Ionic 2 et Ionic 1.

À un niveau élevé, Ionic 2 est une réécriture complète du projet Ionic 1 avec Angular >= 2.x. D'après mes 2+ années d'expérience avec Ionic 1, voici ce que cela signifiera en termes pratiques.

Performances de détection de changement améliorées

Ionic 1 est basé sur Angular 1.x, et Ionic 2 est basé sur Angular >= 2.x. L'amélioration des performances que vous obtenez simplement en utilisant Angular >= 2.x seul est significative.

Avec Angular 1.x, pour obtenir des applications performantes, il fallait beaucoup de connaissances approfondies sur le framework (comme $watch , One-time binding, etc.). Avec Angular >= 2.,x, les applications sont assez performantes dès le départ.

La nouvelle version d'Angular a abandonné le cycle de digestion célèbre et décrié (suivi et test de chaque variable de l'application à chaque changement). Au lieu de cela, Angular>= 2.x s'appuie sur Zone.js pour suivre les modifications de l'application (à la fois synchrones et asynchrones).

Change Detection in Angular >= 2.x mérite d'être exploré pour comprendre comment les choses fonctionnent sous le capot. Dans Angular >= 2.x, la détection des changements est toujours effectuée de haut en bas. Utiliser la bonne stratégie de détection des changements ( OnPush ou Default ) dans vos propres composants est d'une importance primordiale si vous souhaitez contrôler les performances de votre application.

Tous les composants Ionic 2 utilisent la stratégie OnPush , ce qui signifie que la détection de changement n'est pas effectuée tout le temps mais uniquement lorsque les entrées changent. Cette stratégie évite également le rendu inutile des sous-arborescences des composants. Il est fondamentalement déjà optimisé pour vous.

Si vous voulez en savoir plus sur la façon d'obtenir une application Ionic1 performante, je vous suggère de lire cette feuille de triche sur les performances Ultimate AngularJS et Ionic.

Performances DOM plus rapides

La manipulation du modèle d'objet de document angulaire (DOM) a beaucoup évolué. Si vous voulez une interface utilisateur (UI) réactive, la manipulation DOM et les performances JavaScript sont importantes.

Par exemple, créer 1 000 lignes dans une table prend 126 millisecondes avec du JavaScript vanille, 110 % de plus (264 ms) avec Angular. 1.x, et seulement 40% de plus (177 ms) avec Angular >= 2. Comme vous pouvez le constater, les performances d'Angular >= 2.x sont meilleures que celles d'Angular 1.x et similaires aux performances de React.

Ionic 2, une fois de plus, bénéficie de cette amélioration des performances, et le fait "gratuitement".

La nouvelle API d'animations Web

Ionic 1 et Ionic 2 reposent toujours sur des animations CSS pour les transitions et les animations internes, mais comme Ionic 2 est basé sur Angular >= 2.x, les développeurs ont accès à la nouvelle API Web Animations (W3C) via le système d'animation Angular.

L'API Web Animations est une API JavaScript qui permet aux développeurs d'accéder au moteur d'animation du navigateur. Il n'est pas encore pris en charge par tous les navigateurs, mais avec un polyfill, vous pouvez l'utiliser dès maintenant et profiter de l'un des moyens les plus performants et prometteurs d'animer le Web.

La source

L'API d'animation Angular >= 2.x vous permet de décrire facilement des animations complexes (entrée et sortie de différents états ou animations de groupe) et vous donne accès au cycle de vie des animations via des rappels.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Défilement natif intégré

Le défilement natif permet à Ionic 2 d'écouter les événements de défilement sur les WebViews pris en charge. Cela fait
Pull to Refresh , List Reordering ou Infinite Scroll possible sans émuler ces événements (défilement JavaScript).

Jusqu'à présent, le défilement JavaScript était nécessaire, mais les WebViews Chromium (Android) et WKWebView (iOS) ont évolué et prennent désormais en charge le défilement natif. Il n'est activé par défaut que sur Android avec Ionic 1 (depuis décembre 2015) et activé sur toutes les plateformes avec Ionic 2.

La prise en charge du défilement natif apporte de meilleures performances et améliore l'expérience utilisateur en aidant à assurer un défilement fluide grâce à des événements asynchrones.

API de composants améliorée

Ionic 2 vous donne accès à tous les composants qui ont fait la renommée d'Ionic 1, mais qui sont maintenant améliorés et basés sur Angular >= 2.x. Voici la liste des composants les plus courants :

• Bouton
• Carte
• Icône
• Lister
• Menu
• Modal
• Barre d'outils

L'API des composants a un peu changé entre Ionic 1 et Ionic 2. Par exemple, les composants Ionic 1 ion-spinner utilisent l'attribut icon pour le type de spinner :

 <ion-spinner icon="bubbles"></ion-spinner>

Alors que Ionic 2 utilise l'attribut name :

 <ion-spinner name="bubbles"></ion-spinner>

Comme vous pouvez le constater, si vous connaissez l'API du composant Ionic 1, vous vous sentirez également à l'aise avec les composants Ionic 2. Vous aurez juste besoin d'être conscient de ces différences.

Avec une liste impressionnante de composants, tout ce que vous pouvez faire avec Ionic 1 est faisable avec Ionic 2, et même plus.

Présentation des Web Workers

Les Web Workers permettent à votre application d'exécuter des scripts dans des threads JavaScript en arrière-plan. Les travailleurs peuvent effectuer des tâches fastidieuses et des requêtes HTTP en dehors du contexte de votre application (c'est-à-dire sans interférer avec l'interface utilisateur). Aujourd'hui, les Web Workers sont pris en charge par tous les principaux navigateurs.

Traditionnellement, tous les frameworks étaient construits au-dessus et s'appuyaient sur les objets window et document . Cependant, chez les travailleurs, ni l'un ni l'autre ne sont disponibles. Avec la nouvelle architecture Angular>=2 qui a découplé le moteur de renderer , l'exécution de l'application dans Web Workers (ou toute autre plate-forme d'ailleurs) est facilitée.

Ionic 2 commence à expérimenter l'utilisation de Web Workers avec le nouveau composant ion-img . Pour l'instant, ion-img ne peut être utilisé que dans une liste VirtualScroll. Il délègue l'appel HTTP de l'image aux Web Workers et prend également en charge le chargement différé (c'est-à-dire, ne récupère et ne rend que les images sur la fenêtre d'affichage). Votre application Web se concentre désormais uniquement sur l'interface utilisateur et laisse les travailleurs faire le reste.

Voici un exemple d'utilisation :

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Gardez à l'esprit que ce n'est que le début et que nous nous attendons à voir plus d'utilisation ou de Web Workers dans un avenir proche.

Avantages de TypeScript

Si vous avez utilisé Ionic 2, vous savez déjà qu'il utilise TypeScript. TypeScript est un sur-ensemble de JavaScript ES2015 qui se compile en JavaScript brut. Avec TypeScript, vous avez accès à toutes ses fonctionnalités uniques (comme les interfaces, les mixins, etc.) et les fonctionnalités ES2015 (comme les fonctions fléchées, le générateur, les chaînes multilignes, etc.).

Regardons un exemple de composant Angular >= 2.x qui affiche le nom d'un président des États-Unis :

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Nous utilisons une interface ( IPresident ) qui décrit la forme de l'objet président. Il est intéressant d'avoir des interfaces décrivant ce que l'on manipule, surtout s'il y a plusieurs développeurs sur un projet. Si vous faites une erreur et, par exemple, utilisez un boolean pour le nom du président, votre IDE vous dira que quelque chose ne va pas avant même que la compilation ne se produise.

Dans pratiquement tous les IDE que vous utilisez (Visual Studio Code, Atom, WebStorm, etc.), vous trouverez des plugins pour activer la saisie semi-automatique, la vérification de type et un linter.

TypeScript est un réel avantage pour Ionic 2, car il rend votre code plus compréhensible, vous aide à éviter les erreurs de frappe et vous aide à être plus productif (grâce à des fonctionnalités telles que la saisie semi-automatique, l'importation automatique de modules, les définitions d'info-bulles au survol et CTRL + Click pour aller aux définitions).

Toute nouvelle CLI v2

L'Ionic CLI v2 ajoute un moyen de générer des pages, des composants, des tuyaux et des directives, directement via la ligne de commande.

Par exemple, si vous souhaitez créer une nouvelle page nommée MyPage , voici la commande que vous pouvez exécuter :

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

La commande suivra les conventions et créera trois fichiers pour vous :

Un fichier HTML pour votre modèle. Un fichier SASS pour votre style de composant. Un fichier TypeScript pour votre logique de composant.

Voici à quoi ressemble le fichier my-page.ts généré :

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

L'application des conventions via l'utilisation de la CLI est idéale lorsque vous travaillez en équipe. Angular 2.x et Ionic 2 font un excellent travail pour aider à mieux comprendre ce que devrait être une architecture d'application angulaire. Bien sûr, vous êtes libre de vous écarter des conventions, si vous le souhaitez.

Emballage amélioré

Ionic 1 s'appuie sur l'écosystème Gulp pour regrouper les applications, tandis que Ionic 2 vous permet de sélectionner vos outils préférés. Ionic 2 fournit sa propre collection d'outils en tant que projet séparé : ionic-app-scripts.

Les ionic-app-scripts sont basés sur l'idée que les développeurs ne doivent pas du tout se soucier de la configuration de l'empaquetage. La seule dépendance liée à l'emballage que votre projet aura avec Ionic 2 est @ionic/app-scripts . Par défaut, il utilise Webpack mais vous pouvez également utiliser Rollup.

Avec Ionic 2 et la CLI v2, les assets , ainsi que les fichiers TypeScript, vivent dans le même dossier src . Le www est désormais généré lors de chaque build et doit donc être supprimé du suivi du contrôle de version.

Introduction de l'outil de rapport d'erreurs

La nouvelle CLI a également introduit un excellent outil de rapport d'erreurs. Pour l'obtenir, vous devez installer la version Ionic >= 2.1 :

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Maintenant, chaque fois que vous avez des erreurs, un modal apparaîtra avec des informations significatives à ce sujet. Par exemple:

Être informé des erreurs d'exécution dès que possible pendant le développement est extrêmement précieux et Ionic 2 a fait un excellent travail à cet égard.

Avantages de la compilation anticipée (AoT)

Ahead of Time Compilation (AoT) est une petite révolution dans l'écosystème Angular. Introduit avec Angular 2.x, AoT permet aux modèles d'être pré-compilés dans une étape de construction, au lieu d'être compilés à la volée par le navigateur.

Bien que cela ne semble pas être une grande différence, c'est en fait le cas. Avec AoT, nous n'avons pas à expédier le compilateur de modèles avec l'application. Cela a deux avantages. Premièrement, le bundle sera plus petit, ce qui impacte directement le réseau et rend donc votre application plus rapide à télécharger. Deuxièmement, l'application démarrera plus rapidement car la compilation de modèles à la volée n'est plus nécessaire.

Ionic 2 tire pleinement parti d'Angular 2.x AoT pour optimiser gratuitement la taille et le temps de chargement de votre application.

Ionic 2 est un énorme pas en avant

Dans l'ensemble, Ionic 2 est un énorme pas en avant pour l'industrie mobile hybride. Bien que l'ensemble des composants Ionic 2 soit similaire aux composants Ionic 1, Ionic 2 offre de nombreux outils et une amélioration des performances.

En effet, avec des outils tels que TypeScript, ionic-app-scripts et Ionic CLI, les développeurs Ionic 2 peuvent être plus productifs, peuvent produire un code plus maintenable et sont alertés des erreurs d'exécution dès qu'elles se produisent.

Ionic 2 apporte également un gain de performances gratuit par rapport à Ionic 1, notamment en éliminant ou en réduisant ses goulots d'étranglement (liés à la détection des changements, aux animations, au temps de chargement, etc.).

Avec Ionic 2, vos applications se sentiront plus natives que jamais. Sortez-le pour un tour. Vous serez content de l'avoir fait.