Advertisement
  1. Code
  2. Ionic 2

Einführung in Ionic 2

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Artikel werfen wir einen Blick auf Ionic 2, die neueste Version des plattformübergreifenden Ionic-Frameworks für mobile Apps. Für den Anfang werden wir noch einmal zusammenfassen, was Ionic ist und wofür es verwendet wird. Dann werden wir uns mit Ionic 2 befassen. Ich werde Ihnen sagen, was neu ist und wie es sich von Ionic 1 unterscheidet, und ich werde Ihnen bei der Entscheidung helfen, ob Sie es für Ihr nächstes Projekt verwenden sollten oder nicht.

Was ist Ionic?

Ionic ist ein Framework zum Erstellen von Hybrid-Apps mit HTML, CSS und JavaScript. Es enthält eine Reihe von UI-Komponenten und -Funktionen, mit denen Sie voll funktionsfähige und attraktive mobile Apps erstellen können.

Ionic basiert auf dem Cordova-Stack. Sie können mobile Apps nicht allein mit Ionic erstellen, da nur der UI-Teil behandelt wird. Es muss mit Angular zusammenarbeiten, das die Anwendungslogik verwaltet, und Cordova, dem plattformübergreifenden App-Framework, mit dem Sie Ihre App in eine installierbare Datei kompilieren und in der Webansicht des Mobilgeräts ausführen können.

Mit Cordova und Ionic erstellte Apps können sowohl auf Android- als auch auf iOS-Geräten ausgeführt werden. Sie können auch Cordova-Plugins installieren, um native Funktionen wie den Zugriff auf die Kamera und die Arbeit mit Bluetooth Low Energy-Geräten bereitzustellen.

Weitere Informationen zu Cordova finden Sie in einigen unserer Kurse und Tutorials hier auf Envato Tuts+.

  • Eine Einführung in Cordova: Grundlagen

  • Erstellen einer App mit Cordova

Ionic ist jedoch mehr als nur ein UI-Framework. Das Unternehmen Ionic bietet auch Dienste an, die das Ionic UI Framework unterstützen, einschließlich Ionic Creator, Ionic View und Ionic Cloud.

Was ist neu in Ionic 2?

In diesem Abschnitt werden einige der wesentlichen Änderungen an Ionic in Version 2 sowie die neuen Funktionen und Tools, die in Ionic 2 eingeführt wurden, vorgestellt.

Browser-Unterstützung

Ionic 1 wurde nur für hybride mobile Apps entwickelt. Ionic 2 unterstützt jedoch auch progressive Web-Apps und Electron-Apps. Das bedeutet, dass Sie jetzt nicht nur Ionic-Apps erstellen können, die in der Cordova-Umgebung ausgeführt werden, sondern auch progressive Web-Apps, die moderne Webfunktionen verwenden, um Benutzern eine App-ähnliche Erfahrung zu bieten.

Sie können auch auf Electron abzielen, eine Plattform zum Erstellen plattformübergreifender Desktop-Apps mit HTML, CSS und JavaScript. Electron ist Cordova ziemlich ähnlich, jedoch für Desktop-Betriebssysteme wie Windows, Ubuntu oder macOS.

Angular 2 und TypeScript

Ionic 2 verwendet jetzt Angular 2 für Vorlagen und Anwendungslogik. Dies bedeutet, dass Entwickler die neue Angular 2-Syntax lernen müssen, bevor sie produktiv Ionic 2-Apps erstellen können. Machen Sie sich jedoch keine Sorgen, da die Konzepte immer noch dieselben sind wie in Angular 1. Es gibt auch Ressourcen wie ngMigrate, mit denen Sie Ihre Angular 1-Fähigkeiten in Angular 2 konvertieren können.

Neben Angular 2 verwendet Ionic 2 auch TypeScript. Für diejenigen, die damit nicht vertraut sind, ist TypeScript eine Obermenge von JavaScript. Dies bedeutet, dass Sie weiterhin Vanille-JavaScript-Syntax verwenden können, um Ihre Apps zu schreiben. Wenn Sie die mit TypeScript gelieferten Funktionen wie ES6- und ES7-Syntax, statische Typisierung und intelligente Codevervollständigung verwenden möchten, können Sie die TypeScript-spezifische Syntax verwenden. Es gibt Plugins, die Sie in Ihrem bevorzugten Texteditor oder Ihrer bevorzugten IDE installieren können, um die Vorteile der erweiterten Code-Vervollständigungsfunktionen von TypeScript zu nutzen.

Syntax

Wie bereits erwähnt, hat sich die Vorlagensyntax in Ionic 2 erheblich geändert, vor allem aufgrund des Übergangs zur Verwendung von Angular 2. Möglicherweise stellen Sie sogar fest, dass die neue Syntax einfacher und prägnanter ist. Hier einige Beispiele für die Syntax von Ionic 1 und Ionic 2 nebeneinander:

Ereignisse anhören:

Verwenden eines Modells:

Durchlaufen eines Arrays und Anzeigen jedes Elements:

Ordnerstruktur

Wenn Sie die Ordnerstruktur eines Ionic 1-Projekts mit einem Ionic 2-Projekt vergleichen, werden Sie feststellen, dass die meisten Ordner, die Sie in einem Ionic 1-Projekt gewohnt sind, noch in Ionic 2 vorhanden sind Plattform hat sich nicht wirklich geändert - Ionic 2 verwendet immer noch Cordova. Die einzigen Dinge, die sich geändert haben, sind die Teile, die mit Ihren Quelldateien zu tun haben. Hier ist ein Screenshot der Ordnerstruktur einer Ionic 1-App:

ionic 1 folder structureionic 1 folder structureionic 1 folder structure

Und hier ist eine App, die mit Ionic 2 erstellt wurde:

ionic 2 folder structureionic 2 folder structureionic 2 folder structure

Wenn Sie genauer hinschauen, werden Sie feststellen, dass es jetzt einen src-Ordner gibt. Dort befinden sich alle Quelldateien Ihres Projekts. Jedes Mal, wenn Sie  dieÄnderungen an einer Datei in diesem Verzeichnis vornehmen, wird die geänderte Datei kompiliert und in das Verzeichnis www/build kopiert. Bisher befanden sich die Quelldateien alle im Verzeichnis www, und Sie benötigten keinen zusätzlichen Kompilierungsschritt.

Die Verzeichnisstruktur ist auch besser organisiert. Wenn Sie das Verzeichnis src/pages überprüfen, sehen Sie, dass jede Seite einen eigenen Ordner hat und in jedem die HTML-, CSS- und JavaScript-Dateien für diese bestimmte Seite enthalten sind.

Zuvor hatten Sie in Ionic 1 nur ein leeres Verzeichnis und hatten die Freiheit, Ihr Projekt nach Ihren Wünschen zu strukturieren. Dies hatte jedoch den Nachteil, dass Sie nicht gezwungen wurden, die Dinge auf die beste Weise zu tun. Sie könnten faul werden und sich an eine Struktur halten, die alle Dateien zusammenfasst, was größeren Teams, die an komplexen Apps arbeiten, die Arbeit erschweren könnte.

Theming

Im Gegensatz zur vorherigen Version von Ionic, die für alle Plattformen nur ein einziges Erscheinungsbild hatte, unterstützt Ionic 2 jetzt drei Modi: Material Design, iOS und Windows. Jetzt entspricht Ionic dem Erscheinungsbild der Plattform, auf der es bereitgestellt wird. Wenn Ihre App beispielsweise auf Android installiert ist, verwendet sie ein ähnliches Design und Verhalten wie native Android-Apps.

Es gibt Unterstützung für das Theming in Ionic, obwohl es zum Zeitpunkt des Schreibens dieses Artikels nur mit dem Standard-Light-Thema geliefert wird. Wenn Sie das Thema optimieren möchten, können Sie die Datei src/theme/variables.scss bearbeiten.

Werkzeuge

Ionic 2 enthält außerdem neue Tools, mit denen sich mobile Apps zum Vergnügen machen lassen. Ich werde Ihnen in diesem Abschnitt einige zeigen.

Generatoren

Ionic 2 bietet jetzt einen Generator, mit dem Sie Seiten und Dienste für Ihre App erstellen können:

Dadurch werden die folgenden Dateien in Ihrem app/pages-Ordner erstellt:

Jede Datei enthält auch einen Boilerplate-Code:

Dies dient auch als Leitfaden für neue Entwickler, damit sie die Best Practice für die Strukturierung ihres Codes kennen. Hier ist der generierte TypeScript-Code, der die Logik für die obige Seite verarbeitet:

Fehler melden

Ionic 2 enthält jetzt ein Tool zur Fehlerberichterstattung für das Front-End. Dies bedeutet, dass Ionic jedes Mal, wenn ein Fehler in Ihrem Code auftritt, ein modales Fenster direkt in der App-Vorschau selbst öffnet. Dies macht es Entwicklern wirklich einfach, Fehler zu erkennen, die in der App auftreten.

Ionic App-Skripte

Ionic App Scripts sind eine Sammlung von Build-Skripten für Ionic-Projekte. Zuvor verwendete Ionic Gulp für die Erstellung des Erstellungsprozesses.

Ionic 2 enthält einige dieser Skripte, um das Ausführen allgemeiner Entwicklungsaufgaben zu vereinfachen. Dazu gehören beispielsweise das Transpilieren des TypeScript-Codes in ES5, das Bereitstellen der App zum Testen im Browser oder das Ausführen auf einem bestimmten Gerät.

Sie finden die Standardskripte in der Datei package.json des Projekts:

Neue Komponenten

Komponenten sind die UI-Bausteine in Ionic. Beispiele sind Schaltflächen, Karten, Listen und Eingabefelder. Ionic 2 wurde um viele neue Komponenten erweitert, und in diesem Abschnitt werden einige davon vorgestellt.

Folien

Wenn Sie möchten, dass Ihre App für Erstbenutzer eine Anleitung bietet, können Sie mit der Folienkomponente ganz einfach eine erstellen. Mit dieser Komponente können Sie seitenbasierte Layouts erstellen, durch die der Benutzer wischen kann, um alles über Ihre App zu lesen.

Aktionsblatt

Aktionsblätter sind Menüs, die vom unteren Bildschirmrand nach oben verschoben werden. Auf der obersten Ebene des Bildschirms wird ein Aktionsblatt angezeigt. Sie müssen es entweder durch Tippen auf Leerzeichen schließen oder eine Option aus dem Menü auswählen. Dies wird häufig für Bestätigungen verwendet, z. B. wenn Sie eine Datei auf Ihrem iOS-Gerät löschen.

Segmente

Segmente sind wie Registerkarten. Sie werden verwendet, um verwandte Inhalte so zu gruppieren, dass der Benutzer nur den Inhalt des aktuell ausgewählten Segments sehen kann. Segmente werden häufig mit Listen verwendet, um nach verwandten Elementen zu filtern.

Toast

Toast ist die subtile Version von Warnungen. Sie werden häufig verwendet, um den Benutzer darüber zu informieren, dass etwas passiert ist, für das keine Benutzeraktion erforderlich ist. Sie werden häufig oben oder unten auf der Seite angezeigt, um den aktuell angezeigten Inhalt nicht zu beeinträchtigen. Sie verschwinden auch nach einer bestimmten Anzahl von Sekunden.

Symbolleiste

Eine Symbolleiste wird als Container für Informationen und Aktionen verwendet, die sich in der Kopf- oder Fußzeile der App befinden. Beispielsweise sind der Titel des aktuellen Bildschirms, Schaltflächen, Suchfelder und Segmente häufig in einer Symbolleiste enthalten.

Terminzeit

Die DateTime-Komponente wird verwendet, um eine Benutzeroberfläche zum Auswählen von Datum und Uhrzeit anzuzeigen. Die Benutzeroberfläche ähnelt der Benutzeroberfläche, die bei Verwendung des datetime-local-Elements generiert wird. Der einzige Unterschied besteht darin, dass diese Komponente über eine benutzerfreundliche JavaScript-API verfügt. Bisher hatte Ionic keine Komponente zum Arbeiten mit Datum und Uhrzeit. Sie mussten entweder die native Datumsauswahl des Browsers verwenden oder ein Plugin installieren.

Floating Action Buttons

Floating Action Buttons (FABs) sind Schaltflächen, die in einem bestimmten Bereich des Bildschirms festgelegt sind. Wenn Sie jemals die Google Mail-App verwendet haben, ist die Schaltfläche zum Erstellen einer neuen Nachricht eine schwebende Aktionsschaltfläche. Sie sind nicht auf eine einzelne Aktion beschränkt, da sie beim Tippen erweitert werden können, um andere schwebende Schaltflächen anzuzeigen.

Weitere Informationen zu den neuen Komponenten finden Sie in der Dokumentation zu den Komponenten.

Neue Funktionen und Verbesserungen

Ionic 2 ist auch mit neuen Funktionen und Verbesserungen ausgestattet. Diese sind hauptsächlich auf den Übergang zu Angular 2 und TypeScript zurückzuführen.

Webanimations-API

Ein Vorteil des Wechsels zu Angular 2 ist das neue Animationssystem von Angular, das auf der Webanimations-API basiert. Beachten Sie, dass die Webanimations-API nicht in allen Browsern unterstützt wird. Aus diesem Grund müssen Sie Crosswalk verwenden, um einen unterstützten Browser zusammen mit Ihrer App zu installieren. Der einzige Nachteil dabei ist, dass die Installationsgröße dadurch größer wird. Eine andere Möglichkeit ist die Verwendung einer Polyfüllung.

Performance

Mit Ionic 2 erstellte Apps sind schneller als mit Ionic 1 erstellte. Hier ist der Grund:

  • Angular 2: Die DOM-Manipulation und die JavaScript-Leistung haben sich in Angular 2 erheblich verbessert. Sie können diese Tabelle überprüfen, wenn Sie mehr über die Besonderheiten erfahren möchten. Ein weiterer Vorteil von Angular 2 ist die vorzeitige Kompilierung: Vorlagen werden mit einem Build-Tool vorkompiliert, anstatt kompiliert zu werden, während die App im Browser ausgeführt wird. Dadurch wird die App schneller initialisiert, da die Vorlagen nicht mehr im laufenden Betrieb kompiliert werden müssen.
  • Natives Scrollen: Ionic verwendet kein JavaScript-Scrollen mehr. Stattdessen wird jetzt das native Scrollen für unterstützte WebViews verwendet. Es ist jetzt auch auf allen Plattformen aktiviert (im Gegensatz dazu wird es nur auf Android in Ionic 1 unterstützt). Neben dem nativen Scrollen gibt es auch den virtuellen Bildlauf, mit dem Sie durch eine sehr große Liste von Elementen mit sehr geringen Leistungseinbußen scrollen können. Diese beiden Änderungen sorgen für eine flüssigere Bildlaufleistung.
  • Web Worker: Mit Web Workern können Sie Skripts im Hintergrund ausführen, isoliert von dem Thread, der die Webseite ausführt. Ionic 2 implementiert Web-Worker über ihre ion-img-Komponente. Wenn Sie diese Komponente anstelle des Standard-img-Elements verwenden, können Sie die HTTP-Anforderungen zum Abrufen der Bilder an einen Web Worker delegieren. Dies macht das Laden von Bildern schneller, insbesondere in großen Listen. Die ion-img-Komponente verarbeitet auch das verzögerte Laden, wodurch das Bild nur dann angefordert und gerendert wird, wenn es im Ansichtsfenster des Benutzers sichtbar wird.

Ionic Native

Ionic Native entspricht ngCordova für Ionic 2. Beide fungieren als Wrapper für die Cordova-Plugins, um native Funktionen (z. B. Kamera, GeoLocation) zu implementieren. Sie können Ionic Native sogar in Ihrer Ionic 1-App verwenden, wenn Sie möchten. Der Hauptunterschied besteht darin, dass Sie mit Ionic Native Ihren Code mithilfe von ES6-Funktionen und TypeScript-Syntax schreiben können. Das erleichtert die Arbeit in Ionic 2, da standardmäßig bereits TypeScript verwendet wird. Hier ist ein Beispiel für die Implementierung des Cordova Camera-Plugins in ngCordova:

Und so wird es mit Ionic Native gemacht:

Dokumentation

Die Dokumentation hat sich stark verbessert. Mir gefällt besonders die Tatsache, dass es jetzt für jede Komponente auf jeder Plattform unterschiedliche Vorschauen gibt. Dies gibt Entwicklern eine wirklich gute Vorstellung davon, wie ihre App aussehen würde. All dies, ohne dass der Entwickler eine einzige Codezeile schreibt!

Sollten Sie Ionic 2 verwenden?

Zum Zeitpunkt des Schreibens dieses Artikels wurde Ionic 2 veröffentlicht. Dies bedeutet, dass es für Produktions-Apps verwendet werden kann. Angesichts all der neuen Funktionen, Tools und Vorteile von Angular 2 und TypeScript ist der Status Ihres Projekts das einzige, was Sie davon abhält, Ionic 2 zu verwenden.

Wenn Sie gerade erst ein neues Projekt starten, können Sie Ionic 1 weiterhin verwenden, wenn Sie und Ihre Teamkollegen nur mit Angular 1 vertraut sind und Ihr Projekt so schnell wie möglich abgeschlossen sein muss. Wenn Sie jedoch genügend Zeit für das Projekt haben, sollten Sie die Verwendung von Ionic 2 in Betracht ziehen. Es wird eine gewisse Lernkurve geben, und Sie werden auch auf einige Probleme stoßen, da es nicht so kampferprobt ist wie Ionic 1, aber es ist Die Mühe lohnt sich aufgrund der coolen neuen Funktionen und Verbesserungen von Ionic 2.

Wenn Sie Ihr aktuelles Projekt bereits mit Ionic 1 begonnen haben, möchten Sie wahrscheinlich bei Ionic 1 bleiben und ein umfangreiches Umschreiben vermeiden. Sorgen Sie sich nicht zu sehr um Support, Verbesserungen und Fehlerbehebungen für Ionic 1 - Ionic-Entwickler haben sich seit langem dazu verpflichtet, Ionic 1 zu unterstützen. Wie lange genau ist nicht klar. Zumindest wird es für ein paar Jahre unterstützt, nachdem die stabile Version von Ionic 2 veröffentlicht wurde. Wir müssen aber auch bedenken, dass Ionic ein Open-Source-Projekt mit über 200 Mitwirkenden ist. Solange die Leute es weiter benutzen, können wir immer irgendeine Form von Unterstützung von der Community erwarten.

Abschluss

Das ist zu Ende! In diesem Artikel haben Sie alles über Ionic 2 erfahren. Insbesondere haben Sie die signifikanten Unterschiede zwischen Ionic 2 und seinem Vorgänger kennengelernt. Wir haben uns auch die neuen Funktionen von Ionic 2 angesehen und ob Sie sie für Ihre zukünftigen Projekte verwenden sollten oder nicht. In einem zukünftigen Tutorial werden wir dieses Wissen in die Praxis umsetzen, indem wir eine Ionic 2-App erstellen. Bleiben Sie dran!

Wenn Sie mehr über Ionic 2 erfahren möchten, lesen Sie unbedingt die folgenden Ressourcen:

Und natürlich haben wir einen ausführlichen Ionic 2-Kurs, dem Sie folgen können, genau hier auf Envato Tuts+!

  • Ionic
    Erste Schritte mit Ionic 2
    Reginald Dawson
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.