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.
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:
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.
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.
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.
Weiterführende Links
- https://ionicframework.com/
- https://de.wikipedia.org/wiki/Ionic_(Framework)
- https://entwickler.de/online/web/web-app-tutorial-ionic-579898855.html
Sie haben noch Fragen?