Ionic 2 vs. Ionic 1: Leistungssteigerungen, neue Tools und ein großer Schritt nach vorne

Das Ionic-Projekt gewinnt schnell an Popularität. Mit mehr als 27.000 Sternen auf GitHub ist es zu einem der 50 beliebtesten Open-Source-Projekte weltweit aufgestiegen.

Und da kürzlich die stabile Version von Ionic 2 angekündigt wurde, ist dies der perfekte Zeitpunkt für Ingenieure, die Unterschiede zwischen Ionic 2 und Ionic 1 zu analysieren und zu verstehen.

Auf hohem Niveau ist Ionic 2 eine komplette Neufassung des Ionic 1-Projekts mit Angular >= 2.x. Aus meiner mehr als 2-jährigen Erfahrung mit Ionic 1 erfährst du hier, was dies in der Praxis bedeutet.

Verbesserte Leistung der Änderungserkennung

Ionic 1 basiert auf Angular 1.x und Ionic 2 basiert auf Angular >= 2.x. Der Leistungsschub, den Sie allein durch die Verwendung von Angular >= 2.x erhalten, ist erheblich.

Mit Angular 1.x war für performante Anwendungen viel fundiertes Framework-Wissen erforderlich (wie $watch , One-Time Binding und so weiter). Mit Angular >= 2.,x sind Anwendungen ziemlich performant out of the box.

Die neue Version von Angular hat den berühmten und verschmähten Digest-Zyklus (das Verfolgen und Testen jeder Variablen der App bei jeder Änderung) fallen gelassen. Stattdessen verlässt sich Angular >= 2.x auf Zone.js, um Anwendungsänderungen (sowohl synchron als auch asynchron) zu verfolgen.

Es lohnt sich, die Änderungserkennung in Angular >= 2.x zu untersuchen, um zu verstehen, wie die Dinge unter der Haube funktionieren. In Angular >= 2.x wird die Änderungserkennung immer von oben nach unten durchgeführt. Die Verwendung der richtigen Änderungserkennungsstrategie ( OnPush oder Default ) in Ihren eigenen Komponenten ist von größter Bedeutung, wenn Sie die Leistung Ihrer Anwendung steuern möchten.

Alle Ionic 2-Komponenten verwenden die OnPush Strategie, was bedeutet, dass die Änderungserkennung nicht immer durchgeführt wird, sondern nur dann, wenn sich die Eingaben ändern. Diese Strategie vermeidet auch unnötiges Rendern von Teilbäumen der Komponenten. Es ist im Grunde schon für Sie optimiert.

Wenn Sie mehr darüber erfahren möchten, wie Sie eine leistungsstarke Ionic1-Anwendung erhalten, empfehle ich Ihnen, diesen Spickzettel für die Leistung von Ultimate AngularJS und Ionic zu lesen.

Schnellere DOM-Leistung

Die Manipulation des Angular Document Object Model (DOM) hat sich stark weiterentwickelt. Wenn Sie eine reaktive Benutzeroberfläche (UI) wünschen, sind DOM-Manipulation und JavaScript-Leistung wichtig.

Beispielsweise dauert das Erstellen von 1.000 Zeilen in einer Tabelle mit Vanilla JavaScript 126 Millisekunden, mit Angular 110 % mehr (264 ms). 1.x und nur 40 % mehr (177 ms) mit Angular >= 2. Wie Sie sehen können, ist die Leistung von Angular >= 2.x besser als die von Angular 1.x und ähnelt der React-Leistung.

Auch die Ionic 2 profitiert von dieser Leistungssteigerung, und das „kostenlos“.

Die neue Webanimations-API

Ionic 1 und Ionic 2 verlassen sich immer noch auf CSS-Animationen für interne Übergänge und Animationen, aber da Ionic 2 auf Angular >= 2.x basiert, haben Entwickler über das Angular-Animationssystem Zugriff auf die neue Web Animations (W3C) API.

Die Webanimations-API ist eine JavaScript-API, die Entwicklern Zugriff auf die Animations-Engine des Browsers bietet. Es wird noch nicht von allen Browsern unterstützt, aber mit einem Polyfill können Sie es jetzt verwenden und eine der leistungsstärksten und vielversprechendsten Möglichkeiten zur Animation des Webs genießen.

Quelle

Mit der Animations-API von Angular >= 2.x können Sie komplexe Animationen (Betreten und Verlassen von verschiedenen Zuständen oder Gruppenanimationen) einfach beschreiben und über Rückrufe auf den Lebenszyklus von Animationen zugreifen.

 @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%)' })) ]) ]) ] })

Eingebautes natives Scrollen

Natives Scrollen ermöglicht es Ionic 2, Scrolling-Ereignisse auf unterstützten WebViews abzuhören. Es macht
Pull to Refresh , List Reordering oder Infinite Scroll möglich, ohne diese Ereignisse zu emulieren (JavaScript-Scrolling).

Bisher war JavaScript-Scrolling erforderlich, aber Chromium (Android) und WKWebView (iOS) WebViews haben sich weiterentwickelt und unterstützen jetzt natives Scrollen. Es ist nur auf Android mit Ionic 1 (seit Dezember 2015) standardmäßig aktiviert und auf allen Plattformen mit Ionic 2 aktiviert.

Die native Scrolling-Unterstützung bringt eine bessere Leistung und verbessert die Benutzererfahrung, indem sie dank asynchroner Ereignisse dazu beiträgt, einen reibungslosen Bildlauf zu gewährleisten.

Verbesserte Komponenten-API

Ionic 2 gibt Ihnen Zugriff auf alle Komponenten, die Ionic 1 berühmt gemacht haben, aber jetzt verbessert sind und auf Angular >= 2.x basieren. Hier ist die Liste der gängigsten Komponenten:

• Taste
• Karte
• Symbol
• Liste
• Speisekarte
• Modal
• Symbolleiste

Die Komponenten-API hat sich zwischen Ionic 1 und Ionic 2 ein wenig geändert. Beispielsweise verwenden Ionic 1 ion-spinner Komponenten das icon -Attribut für den Spinner-Typ:

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

Während Ionic 2 das name verwendet:

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

Wie Sie sehen können, werden Sie sich auch mit der Verwendung von Ionic 2-Komponenten wohl fühlen, wenn Sie mit der Ionic 1-Komponenten-API vertraut sind. Sie müssen sich nur dieser Unterschiede bewusst sein.

Mit einer beeindruckenden Liste von Komponenten ist alles, was Sie mit Ionic 1 tun können, mit Ionic 2 machbar, und noch mehr.

Einführung von Web Workern

Web Worker ermöglichen es Ihrer Anwendung, Skripts in Hintergrund-JavaScript-Threads auszuführen. Worker können lästige Aufgaben und HTTP-Anforderungen außerhalb Ihres Anwendungskontexts ausführen (dh ohne Eingriff in die Benutzeroberfläche). Heute werden Web Worker von allen gängigen Browsern unterstützt.

Traditionell wurden alle Frameworks auf den window und document aufgebaut und stützten sich auf diese. In Arbeitern sind beide jedoch nicht verfügbar. Mit der neuen Angular >=2-Architektur, die den renderer entkoppelt, wird die Ausführung der Anwendung innerhalb von Web Workers (oder jeder anderen Plattform für diese Angelegenheit) vereinfacht.

Ionic 2 beginnt mit der Verwendung von Web Workern mit der neuen ion-img Komponente zu experimentieren. Derzeit kann ion-img nur innerhalb einer VirtualScroll-Liste verwendet werden. Es delegiert den Bild-HTTP-Aufruf an die Web-Worker und unterstützt auch verzögertes Laden (dh Bilder nur im Ansichtsfenster abrufen und rendern). Ihre Webanwendung konzentriert sich jetzt nur noch auf die Benutzeroberfläche und lässt die Mitarbeiter den Rest erledigen.

Hier ist ein Beispiel für die Verwendung:

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

Denken Sie daran, dass dies nur der Anfang ist und dass wir in naher Zukunft mehr Nutzer oder Web Worker erwarten.

TypeScript-Vorteile

Wenn Sie Ionic 2 verwendet haben, wissen Sie bereits, dass es TypeScript verwendet. TypeScript ist eine Obermenge von JavaScript ES2015, die zu einfachem JavaScript kompiliert wird. Mit TypeScript haben Sie Zugriff auf alle einzigartigen Funktionen (wie Schnittstellen, Mixins usw.) und ES2015-Funktionen (wie Pfeilfunktionen, Generator, mehrzeilige Zeichenfolgen usw.).

Sehen wir uns ein Beispiel einer Angular >= 2.x-Komponente an, die den Namen eines Präsidenten der Vereinigten Staaten anzeigt:

 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' }; }

Wir verwenden eine Schnittstelle ( IPresident ), die die Form des Präsidentenobjekts beschreibt. Es ist interessant, Schnittstellen zu haben, die beschreiben, was Sie manipulieren, insbesondere wenn mehrere Entwickler an einem Projekt arbeiten. Wenn Sie einen Fehler machen und beispielsweise einen boolean für den Namen des Präsidenten verwenden, teilt Ihnen Ihre IDE mit, dass etwas nicht stimmt, noch bevor die Kompilierung erfolgt.

In praktisch jeder IDE, die Sie verwenden (Visual Studio Code, Atom, WebStorm oder ähnliches), finden Sie Plugins, um die automatische Vervollständigung, Typprüfung und einen Linter zu aktivieren.

TypeScript ist ein echter Vorteil für Ionic 2, da es Ihren Code verständlicher macht, Ihnen hilft, Tippfehler zu vermeiden und Ihnen hilft, produktiver zu sein (durch Funktionen wie Autovervollständigung, automatischer Import von Modulen, Tooltip-Definitionen beim Hover und CTRL + Click to siehe Definitionen).

Alle neuen CLI v2

Die Ionic CLI v2 fügt eine Möglichkeit hinzu, Seiten, Komponenten, Pipes und Direktiven direkt über die Befehlszeile zu generieren.

Wenn Sie beispielsweise eine neue Seite mit dem Namen MyPage erstellen möchten, können Sie den folgenden Befehl ausführen:

 $ 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

Der Befehl folgt den Konventionen und erstellt drei Dateien für Sie:

Eine HTML-Datei für Ihre Vorlage. Eine SASS-Datei für Ihren Komponentenstil. Eine TypeScript-Datei für Ihre Komponentenlogik.

So sieht die generierte my-page.ts Datei aus:

 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'); } }

Das Durchsetzen von Konventionen über die CLI ist großartig, wenn Sie in einem Team arbeiten. Angular 2.x und Ionic 2 leisten großartige Arbeit, um ein besseres Verständnis dafür zu fördern, wie eine Angular-App-Architektur aussehen sollte. Natürlich steht es Ihnen frei, von den Konventionen abzuweichen, wenn Sie dies wünschen.

Verbesserte Verpackung

Ionic 1 verlässt sich auf das Gulp-Ökosystem, um Anwendungen zu bündeln, während Ionic 2 Sie Ihre bevorzugten Tools auswählen lässt. Ionic 2 bietet eine eigene Sammlung von Tools als separates Projekt: ionic-app-scripts.

Das ionic-app-scripts basiert auf der Idee, dass sich Entwickler überhaupt nicht um die Paketkonfiguration kümmern sollten. Die einzige verpackungsbezogene Abhängigkeit, die Ihr Projekt mit Ionic 2 haben wird, ist @ionic/app-scripts . Standardmäßig wird Webpack verwendet, aber Sie können auch Rollup verwenden.

Bei Ionic 2 und der CLI v2 befinden sich die assets sowie die TypeScript-Dateien im selben src Ordner. Das www wird jetzt bei jedem Build generiert und sollte daher aus der Nachverfolgung der Versionskontrolle entfernt werden.

Einführung des Error Reporting Tools

Die neue CLI führte auch ein großartiges Tool zur Fehlerberichterstattung ein. Um es zu bekommen, müssen Sie die Ionic-Version >= 2.1 installieren:

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

Jedes Mal, wenn Sie Fehler haben, wird ein Modal mit aussagekräftigen Informationen darüber angezeigt. Zum Beispiel:

Während der Entwicklung so schnell wie möglich über Laufzeitfehler benachrichtigt zu werden, ist unglaublich wertvoll und Ionic 2 hat in dieser Hinsicht großartige Arbeit geleistet.

Vorteile der Ahead of Time Compilation (AoT)

Ahead of Time Compilation (AoT) ist eine kleine Revolution im Angular-Ökosystem. AoT wurde mit Angular 2.x eingeführt und ermöglicht es, dass Templates in einem Build-Schritt vorkompiliert werden, anstatt on-the-fly vom Browser kompiliert zu werden.

Dies mag zwar nicht wie ein großer Unterschied erscheinen, ist es aber tatsächlich. Mit AoT müssen wir den Template-Compiler nicht mit der Anwendung ausliefern. Dies hat zwei Vorteile. Erstens wird das Bundle kleiner, was sich direkt auf das Netzwerk auswirkt und daher das Herunterladen Ihrer Anwendung beschleunigt. Zweitens wird die App schneller booten, da eine spontane Vorlagenkompilierung nicht mehr erforderlich ist.

Ionic 2 nutzt Angular 2.x AoT voll aus, um die Größe und Ladezeit Ihrer Anwendung kostenlos zu optimieren.

Ionic 2 ist ein großer Schritt nach vorne

Insgesamt ist Ionic 2 ein großer Schritt nach vorne für die Hybrid-Mobilfunkbranche. Obwohl der Satz von Ionic 2-Komponenten den Ionic 1-Komponenten ähnelt, bietet Ionic 2 viele Tools und Leistungsverbesserungen.

Tatsächlich können Ionic 2-Entwickler mit Tools wie TypeScript, ionic-app-scripts und Ionic CLI produktiver sein, besser wartbaren Code erstellen und werden sofort auf Laufzeitfehler aufmerksam gemacht.

Ionic 2 bietet auch einen kostenlosen Leistungsschub im Vergleich zu Ionic 1, insbesondere durch die Beseitigung oder Reduzierung von Engpässen (in Bezug auf Änderungserkennung, Animationen, Ladezeit usw.).

Mit Ionic 2 fühlen sich Ihre Anwendungen nativer denn je an. Nehmen Sie es für eine Spritztour heraus. Sie werden es nicht bereuen.