Ionic Framework

Was ist ein Ionic Framework?

Ionic Framework ist ein komplettes Open-Source-Webframework für die Entwicklung hybrider mobiler Apps. Die ursprüngliche Version wurde im Jahr 2013 veröffentlicht und wurde auf der Basis von AngularJS und Apache Cordova konzipiert. Die neueren Versionen, bekannt als Ionic 3, basieren auf Angular. Ionic bietet zusätzliche Tools und Services mit Webtechnologien wie CSS, HTML5 und SasS. Die Applikationen können mit diesen Webtechnologien erstellt und dann über native App-Stores verteilt werden. Sie können auf Geräten installiert werden, bei welchen Cordova genutzt wird.

Ziel

Aufgrund von Kunden-Feedbacks, versuchten die Entwickler Drifty & Co. von Ionic Framework, mobile Apps zu entwickeln und entschieden sich dazu, ein eigenes Framework zu entwerfen, das sich auf die Leistung konzentriert und auf moderne Webstandards ausgerichtet ist.

Service und Funktionen

Ionic Framework verwendet Cordova-Plugins, um Zugriff auf Funktionen des Host-Betriebssystems wie Kamera, GPS, Taschenlampe usw. zu erhalten. Benutzer können ihre Apps erstellen und sie können dann für Android, iOS, Windows oder moderne Browser angepasst werden. Mit dem Ionic Framework können die Apps erstellt und bereitgestellt werden, indem das Build-Tool Cordova mit einem vereinfachten ionischen Befehlszeilenwerkzeug umschlossen wird.

Das Ionic Framework umfasst mobile Komponenten, Typografien, interaktive Paradigmen und ein erweiterbares Basisthema. Es bietet zudem mit Angular weitere benutzerdefinierte Komponenten und Methoden für die Interaktion mit diesen Anwendungen. Eine solche Komponente, z. B. die Sammlungswiederholung, ermöglicht dem Benutzer das Scrollen durch eine Liste zahlreicher Elemente ohne Leistungseinbußen. Eine andere Komponente, der Scroll-View, erstellt einen scrollbaren Container, mit dem der Benutzer unter Verwendung eines nativ beeinflussten Delegiertensystem interagieren kann.

Entwickler können die Bildlaufsicht programmgesteuert lenken, um die Bildlaufposition zu erhalten, nach unten oder oben zu blättern, zu zoomen oder Informationen über die aktuellen Bildlaufinstanzen zu erhalten.

Neben dem Software Development Kit (SDK) stellt Ionic Framework auch Dienste bereit, mit denen Entwickler Funktionen wie Push-Benachrichtigungen, A/B-Tests, Analysen, Code-Deploy sowie automatisierte Builds aktivieren können. Des Weiteren stellt das Ionic Framework eine leistungsstarke Befehlszeilenschnittstelle (CLI) bereit, sodass Entwickler mit dem Erstellen eines Projekts mit einem einfachen Befehl beginnen können. Mit der CLI können Entwickler außerdem Cordova-Plugins und zusätzliche Front-End-Pakete hinzufügen, ebenfalls Push-Benachrichtigungen aktivieren, App-Icons und Splash-Screens generieren sowie native Binärdaten erstellen.

Leistungen

Im Vergleich zu hybriden Anwendungen ermöglicht die Kombination von ionischen Codes mit nativen mobilen App-Codes in PhoneGap (jetzt Apache Cordorva) eine höhere Leistung des resultierenden Produkts: Durch die Verwendung von AngularJS (statt jQuery) kann Ionic auf native Hardwarebeschleunigung setzen und auf eine umfangreiche DOM (Document Object Model) verzichten. Ionic Framework nutzt CSS-Übergänge und Transformationen für Animationen, um die GPU optimal zu nutzen und die verfügbare Prozessorzeit zu maximieren.

Komponenten

Ionic Apps bestehen aus High-Level-Bausteinen, die Komponenten. Mithilfe dieser Komponenten kann eine Benutzeroberfläche für eine App erstellt werden. Ionic Framework liefert eine Reihe von Komponenten, einschließlich Modals, Popups und Karten. Beispiele dafür sind:

Aktionsblätter

Aktionsblätter (oder Action Sheets) gleiten vom unteren Rand des Gerätebildschirms nach oben und zeigen eine Reihe von Optionen mit der Möglichkeit an, eine Aktion zu bestätigen oder abzubrechen. Action Sheets können manchmal als Alternative zu Menüs verwendet werden, sie sollten jedoch nicht zur Navigation eingesetzt werden.

Das Aktionsblatt wird immer über andere Komponenten auf der Seite angezeigt und muss geschlossen werden, um mit dem zugrunde liegenden Inhalt zu interagieren. Wenn es ausgelöst wird, wird der Rest der Seite dunkler, um den Optionen der Aktionsblätter mehr Aufmerksam zu geben.

Warnhinweise

Warnhinweise (Alerts) sind eine großartige Möglichkeit, dem Benutzer die Möglichkeit zu geben, eine bestimmte Aktion oder Liste von Aktionen auszuwählen. Des Weiteren können sie dem Benutzer wichtige Informationen liefern oder sie dazu veranlassen, eine Entscheidung (oder mehrere Entscheidungen) zu treffen.

Aus einer UI-Perspektive können Alerts als eine Art “schwebendes” Modul betrachtet werden, das nur einen Teil des Bildschirms abdeckt. Das bedeutet, dass Warnhinweise nur für schnelle Aktionen wie Passwortverifizierung, kleine App-Benachrichtigungen oder schnelle Optionen verwendet werden sollten. Detailliertere Benutzerflüsse sollten für Vollbild-Modale reserviert werden.

Badges

Badges sind kleine Komponenten, die dem Benutzer normalerweise einen numerischen Wert mitteilen. Sie werden i. d. R. in einem Artikel verwendet.

Schaltflächen

Schaltflächen sind eine wichtige Methode, um mit einer App zu interagieren und durch sie zu navigieren. Sie kommunizieren klar, welche Aktion ausgeführt wird, nachdem der Benutzer sie angetippt hat. Schaltflächen können aus Text und/oder einem Symbol bestehen und können mit einer Vielzahl von Attributen erweitert werden.

Karten

Karten sind dafür geeignet, wichtige Inhalte anzuzeigen. Sie entwickeln sich schnell zu einem Kerndesignmuster für Apps. Sie dienen dafür, Informationen zu speichern und zu organisieren, während gleichzeitig vorhersehbare Erwartungen für den Benutzer gesetzt werden.

Für mobile Anwendungen erleichtern die Karten die visuelle Darstellung derselben Informationen über viele verschiedene Bildschirmgrößen hinweg. Sie ermöglichen mehr Kontrolle, sind flexibel und können sogar animiert werden. Die Karten werden normalerweise übereinander gelegt, aber sie können auch wie eine Seite verwendet werden und zwischen links und rechts wischen.