Vergleich zwischen Ionic 4 und Ionic 3

ionic 3 vs ionic 4

Über Ionic 4

Nach mehr als einem Jahr Arbeit hat das Ionic Framework-Team Version 4 veröffentlicht. Die neue Version bietet uns signifikante Leistungsänderungen, Kompatibilität mit mehreren Frameworks (nicht nur mit Angular als Vorgängerversionen), eine neue Dokumentation und viele andere Verbesserungen, die wir haben werde in diesem Artikel analysieren.

Sie werden sicherlich viele Zweifel - und vielleicht Angst - an dieser Versionsänderung haben. Aber die gute Nachricht ist, dass die Migration von Ionic 3 zu Ionic 4 trotz der großen Verbesserungen von Ionic 4 sehr einfach ist!

In diesem Artikel möchte ich den Vergleich zwischen Ionic 4 und Ionic 3 sowie die Neuerungen und neuen Konzepte dieser neuen Version erläutern. Hier finden Sie praktische Beispiele für die Verwendung der neuen ionischen CLI und des neuen Routers. Am Ende werde ich Ihnen zeigen, wie Sie Ihre Anwendungen von Ionic 3 auf Ionic 4 migrieren können.

Webkomponenten

Ionic Framework 4 wurde komplett neu geschrieben, um die Web-APIs zu verwenden. Jede Komponente ist als Web-Komponente gepackt. Dadurch kann das Framework in die Zukunft projiziert werden. Um die Erstellung der Webkomponenten zu unterstützen, erstellte das Team ein Tool mit dem Namen Stencil.

Was sind Webkomponenten?

Webkomponenten sind eine Reihe von Web-APIs, mit denen Sie wiederverwendbare und gekapselte HTML-Tags erstellen können.

Eine Möglichkeit, die Webkomponenten zu erläutern, besteht darin, sie sich als wiederverwendbare Widgets für die Benutzeroberfläche vorzustellen, die mithilfe offener Webtechnologien erstellt wurden. Sie sind Teil des Browsers und benötigen daher keine externen Bibliotheken.

Mit Web Components können Sie fast alles erstellen, was mit HTML, CSS und JavaScript möglich ist. Auf diese Weise können Sie eine tragbare Komponente erstellen, die problemlos wiederverwendet werden kann.

Webkomponenten machen den Browser zu dem, der mehr Arbeit leistet, und auf diese Weise verbessern sie die Leistung und Ladezeiten moderner Anwendungen erheblich.

Die Webkomponenten basieren auf den folgenden Spezifikationen:

  • Benutzerdefinierte Elemente: Definiert die Grundlagen und Grundlagen zum Entwerfen und Verwenden neuer Arten von DOM-Elementen.
  • Schatten-DOM: Definiert, wie gekapselte Stile und Code in einer Webkomponente verwendet werden.
  • HTML-Import: Grundsätzlich wird festgelegt, wie das HTML-Dokument in ein anderes HTML-Dokument aufgenommen und wiederverwendet wird.
  • HTML-Vorlage: Definiert, wie Codefragmente deklariert werden, die beim Laden der Seite nicht verwendet werden, aber zur Laufzeit später instanziiert werden können.

Kompatibilität mit anderen Frameworks

Seit seiner Gründung wurde das Ionic Framework mit Angular erstellt. Mit der Popularität und Unterstützung von Webkomponenten hat sich dies jedoch geändert.

Eine der großen Änderungen dieser neuen Version von Ionic besteht darin, dass sie völlig unabhängig vom Grundgerüst ist (zuvor war dieser Ort nur von Angular besetzt).

Da die Komponenten des Ionic Frameworks, wie z. B. , jetzt als Web Components eingekapselt sind, ist keine Bindung an ein Basis-Framework mehr erforderlich. Webkomponenten funktionieren mit jedem Framework. Wenn Sie es vorziehen, können Sie kein Framework verwenden.

Was das Ionic Framework-Team mit dieser Änderung beabsichtigt, ist, dass Ionic ein UI-Framework ist, das mit jeder Technologie arbeiten kann, die die Programmierer wählen. Dies öffnet die Tür für zukünftige Anwendungen, die in Vue oder in React mithilfe der Ionic-Webkomponenten erstellt werden können.

Ionic CLI auf Ionic 4Die CLI 4.0 wurde sowohl hinsichtlich der Funktionen als auch der Geschwindigkeit und Benutzerfreundlichkeit vollständig verbessert.

Um es verwenden zu können, muss die neueste Version der CLI in unserer Entwicklungsumgebung vorhanden sein. Wir können es installieren, indem wir den folgenden Befehl ausführen:

npm install -g ionic @ latest
Um die neueste Version der CLI verwenden zu können, muss der Knoten 8.9 oder höher installiert sein. Anweisungen zum Aktualisieren von Node.js finden Sie unter https://nodejs.org/.

Sobald die neue CLI installiert ist, können wir unsere erste Anwendung mit ionic 4 erstellen. Wenn Sie den folgenden Befehl ausführen, erstellt die CLI eine neue Anwendung mit der Grundstruktur von Ionic 4:

Ionenstart appName leer --type = eckig

appName ist der Name Ihres Projekts

leer ist die Vorlage, die wir zum Erstellen des Gerüsts der Anwendung auswählen

Typ = eckig ist die Art des Projekts

Um Ihre Anwendung im Browser zu testen, können Sie denselben Befehl ausführen, den wir zuvor in Ionic 3 verwendet haben.

ionische dienen

Dies ist die Struktur unserer neuen Ionic 4-Anwendung, die mit der CLI generiert wurde:

Mit dieser neuen CLI haben wir die Möglichkeit, Konsolenbefehle zum Erstellen neuer Seiten, Komponenten, Anweisungen und Dienste zu verwenden. Sehen wir uns einige Beispiele an:

Seite erstellen :

ionische g Seite Benutzer

Erstellen Sie einen neuen Service:

ionic g service Artikel

Dies sind nur einige der neuen Funktionen, die die neue CLI bietet.

Navigation auf Ionic 4

Es gibt große Veränderungen in der Navigation und im Router, was es meiner Meinung nach viel einfacher und verständlicher macht. Ionic 4 verwendet jetzt den Angular Router.

Ionic 3 verwendete eine Navigation auf der Basis eines einfachen Stapels, bei der die neuen Seiten beim Drücken auf den Stapel gelegt wurden, und als wir rückwärts navigieren wollten, haben wir einfach ein Popup der letzten Seite erstellt.

Herkömmliche Websites verwenden einen linearen Verlauf. Dies bedeutet, dass der Benutzer zu einer Seite navigiert und zum Navigieren die Schaltfläche Zurück drücken kann. In Ionic Framework können Anwendungen diesen Schritt durch Ermöglichen der parallelen Navigation fortsetzen. Dies bedeutet, dass es möglich ist, mehrere Navigationsbatterien zu haben und diese jederzeit auszutauschen. Ein Beispiel hierfür wäre eine Navigation mit Registerkarten auf einer Seite und eine andere mit einem Seitenmenü.

Zu erwähnen ist, dass NavController und ion-nav in Ionic 4 veraltet sind. Sie können sie weiterhin verwenden, jedoch nur, wenn in Ihrer Anwendung Lazy Loading nicht verwendet wird.

Anstelle von ion-nav und NavController verwendet Ionic 4 jetzt @ angle / router.

Wie bereits erwähnt, verwendet Ionic 4 beim Erstellen einer Anwendung vom Typ Angular die Navigation von Angular 6. Aus diesem Grund wird beim Erstellen unserer Anwendung ionic 4 vom Typ angle automatisch eine Datei app-routing.module.ts erstellt, die sich in src / app befindet.

Mal sehen, was diese Datei hat und was die Unterschiede zu einer Anwendung in Ionic 3 sind.

In Ionic 4:

{NgModule} aus '@ angle / core' importieren;
{Routes, RouterModule} aus '@ angle / router' importieren;
const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', loadChildren: './pages/home/home.module#HomePageModule'},
];
@NgModule ({
Importe: [RouterModule.forRoot (Routen)],
exportiert: [RouterModule]
})
Exportklasse AppRoutingModule {}

Um zur Startseite zu navigieren, müssen wir Folgendes tun:

{Router} aus '@ angle / router' importieren;
Konstruktor (privater Router: Router) {}
navigateToHome () {
  this.router.navigate (['/ home']);
}

In Ionic 3:

{NavController} aus 'ionic-angular' importieren;
{HomePage} aus './pages/home/home' importieren
Konstruktor (public navCtrl: NavController) {}
navigateToHome () {
  this.navCtrl.push (HomePage);
}

Es ist wichtig zu verstehen, dass in Ionic 4 navController nicht mehr zum Navigieren in der Anwendung verwendet wird.

Beispielnavigation auf Ionic 4

Gehen wir noch einen Schritt weiter und sehen, wie Sie Informationen in Ionic 4 zwischen zwei Seiten austauschen.

// item ist ein Objekt des Stils: {title: "Some title", description: "Some description"}
itemSelected (item) {
  this.router.navigate (["/ home", item]);
}

Um das Objekt item auf unserer Homepage zu erhalten, verwenden wir ActivatedRoute.

{ActivatedRoute} aus '@ angle / router' importieren;
Exportklasse HomePage implementiert OnInit {
Artikel: beliebig;
Konstruktor (private Route: ActivatedRoute) {}
 
ngOnInit () {
   this.route.params.subscribe (data => {
     this.item = data;
   })
}
}

Lebenszyklen der Navigation (LifeCycles)

Die Lebenszyklen (im Englischen als Lebenszyklen bezeichnet), die in Ionic 3 verwendet wurden, wie zum Beispiel ionWillLoad, werden in Ionic 4 nicht mehr verwendet. Nun werden wir die Winkel-Lebenszyklen wie ngOnInit und ngAfterViewInit verwenden.

Wenn Sie bereits bei Angular programmiert haben, kommt Ihnen dies bekannt vor. Wenn Sie mehr über Angular erfahren möchten, empfehle ich Ihnen, diesen Beitrag zu lesen.

routerLink

In Ionic 3 wird das Ereignis (Klicken) verwendet, um zwischen Seiten aus dem HTML-Code zu navigieren. In Ionic 4 verwenden wir den RouterLink, wie er in den Angular-Anwendungen verwendet wird.

Ein Beispiel wäre:

 Gehen Sie zu Produkt 123 

Module

Es ist wichtig zu erwähnen, dass es nicht länger notwendig ist, die Seiten und Dienste in die Datei app.module.ts zu importieren, was meiner Meinung nach das Projekt viel einfacher und organisierter macht.

Für jede Seite gibt es ein Modul dieser Seite. Wenn wir beispielsweise Reactive Forms auf einer Seite verwenden möchten, importieren wir ReactiveFormsModule nur auf der Seite oder den Seiten, auf denen es verwendet wird.

Der folgende Code stammt aus der Datei src / app / pages / new-item / new-item.module.ts unserer Beispielanwendung in Ionic 4, die Sie kostenlos herunterladen können.

{NgModule} aus '@ angle / core' importieren;
{CommonModule} aus '@ angle / common' importieren;
import {FormsModule, ReactiveFormsModule} from '@ angular / forms';
{Routes, RouterModule} aus '@ angle / router' importieren;
{IonicModule} aus '@ ionic / angular' importieren;
import {NewItemPage} from './new-item.page';
const routes: Routes = [
  {
    Pfad: '',
    Komponente: NewItemPage
  }
];
@NgModule ({
  Einfuhren: [
    CommonModule Früher
    FormsModule Früher
    ReactiveFormsModule,
    IonicModule Früher
    RouterModule.forChild (Routen)
  ],
  Deklarationen: [NewItemPage]
})
Exportklasse NewItemPageModule {}

Wie migriere ich meine Anwendung von Ionic 3 auf Ionic 4?

Sie fragen sich wahrscheinlich, wie Sie eine vorhandene Anwendung von Ionic 3 auf eine von Ionic 4 migrieren können. Das Ionic Framework-Team hat eine sehr detaillierte Dokumentation mit den Schritten für die Migration verfasst.

Die Wahrheit ist, dass der Migrationsprozess recht einfach ist und persönlich keine Probleme verursacht hat.

Sie können auch den Migrations-Linter verwenden, ein Tool, das Ihren Code automatisch überprüft und Ihnen mitteilt, welche Änderungen Sie vornehmen sollten.

Schlussfolgerung zu Ion 3 vs. Ion 4

In diesem Artikel sprechen wir über die Hauptunterschiede zwischen Ionic 4 und Ionic 3 sowie über die neuen Konzepte von Ionic Framework 4.0. Es hat eingebaute Leistungssteigerungen, ist einfacher zu handhaben und ist vor allem „zukunftssicher“. Durch die Neuerstellung aller unserer UI-Komponenten auf Webkomponenten und Ihrer Codebasis wird die Stabilität verbessert, da diese auf Open Web Tech basieren.

Wenn Ihre Ionic 3-App fast vollständig ist und / oder für eine Firma / ein Unternehmen erstellt wird, ist dies möglicherweise nicht der beste Zeitpunkt für ein Update.

Ich hoffe, es hat Ihnen geholfen, die neue Version von Ionic Framework besser zu verstehen und vor allem die Ängste vor der Migration zu zerstreuen. Wie oben erwähnt, bedeutet die Migration von Ionic 3 zu Ionic 4 nicht, dass Sie Ihre Anwendung neu schreiben (wie bei der Migration von Ionic 1 zu Ionic 2).

Ursprünglich hier hochgeladen