Das Konzept einer Hybrid-App ist bestechend. Als nach außen hin gewöhnliche App kann sie über die bekannten Stores distribuiert werden und erscheint als Icon auf dem Homescreen. Sie hat vollen Zugriff auf die Programmierschnittstellen und Sensoren des Geräts, also Kamera, Adressbuch, Vibration etc. Intern ist sie jedoch nur ein schlanker Container für eine so genannte WebView-Komponente, die als eine Art Fullscreen-Browser ohne Adressleiste eine gewöhnliche Website aus HTML, CSS und JavaScript ausführt. Cross-Plattform-Tools wie Apache Cordova erlauben mithilfe von JavaScript-APIs den Zugriff auf native Gerätefunktionen und übernehmen das Packaging in die nativen Container-Apps verschiedener Plattformen. Eine solche App ist folglich eine Mischung aus nativ und Web – eben ein „Hybrid“.
Hybrid-Apps der ersten Generation
Die Freiheiten zur Gestaltung und Programmierung erweisen sich jedoch nachteilig, da die User Experience auf mobilen Geräten etablierten Standards folgt, etwa beim Zurück-Button, dem Handling von Listenelementen oder der Funktionsweise von Formularelementen. Eine Missachtung der Standards verärgert nicht nur User, sie kann auch zur Ablehnung bei der Einreichung in den Stores führen. Abhilfe schaffen Mobile-Application-Frameworks wie jQuery Mobile oder Sencha Touch, die gewohnte Mobile-Komponenten mit Webtechnologien nachbilden. Diese erste Generation an Frameworks ist sehr JavaScript- bzw. jQuery-lastig; viele DOM-Manipulationen – etwa bei Animationen – gehen zu Lasten der Performance. Darüber hinaus gibt es wenige Vorgaben für die Architektur bzw. Struktur einer App, z. B. bei der Verzeichnisstruktur, dem Templating oder der Serverkommunikation. Daher ist jede App sehr individuell aufgebaut. Auch subtilere Details wie die korrekte Positionierung der Tastatur in Bezug auf Eingabefelder oder plattformspezifische Besonderheiten finden wenig Berücksichtigung.
Der attraktive hybride Ansatz überzeugte auch große Player wie Facebook und LinkedIn. 2012 folgte jedoch die Ernüchterung, als Mark Zuckerberg den Schwenk auf eine native App mit den Worten „The biggest mistake we’ve made as a company is betting on HTML5 over native“ ankündigte. LinkedIn folgte wenig später, bemängelt aber vielmehr das fehlende Tooling als die sonst bekannten Schwächen beim hybriden Ansatz. Gemeint sind fehlende bzw. ausgereifte Tools, die im nativen Umfeld selbstverständlich sind: Entwickler-, Debugging- und Performancetools.
Zusammengefasst galt daher bis vor Kurzem meist: Die Nachteile von Hybrid-Apps überwiegen in der Praxis die Vorteile.
Explosion des Toolings
In jüngster Vergangenheit kam es jedoch zu einer inflationären Verbesserung des Toolings für die Entwicklung mobiler Websites. Seit iOS 6 steht der volle Safari-Web-Inspektor zur Verfügung, und der Wechsel von der UIWebView- zur WKWebView-Komponente brachte in iOS 8 einen enormen Performanceschub. Vergleichbare Verbesserungen brachte Android 4.4 („KitKat“) mit dem Wechsel vom Android-Stock-Browser – von manchen auch als IE6 der Gegenwart bezeichnet – zu Chromium, ab Android 5.0 („Lollipop“) sogar mit Autoupdates.
Auf den beiden wichtigsten Plattformen stehen heute folglich neben sehr guter Performance und HTML5-Unterstützung auch umfangreiche Möglichkeiten für Inspection, Debugging und Logging zur Verfügung.
Ionic
Mit Ionic ist ein MIT-lizensiertes Open-Source-Frontend-Framework zur Entwicklung von hybriden HTML5-Mobile-Apps entstanden, das die neuesten Entwicklungen der mobilen Plattformen und Standards aufgreift. Ionic integriert etablierte Technologien, stellt ein großes Ecosystem an weiteren Services bereit und verknüpft alles mittels „Glue“-Code und über ein mächtiges Kommandozeilentool (CLI). Im Kern stellt Ionic ein Sass-/CSS-Framework (ähnlich Bootstrap/Foundation) zur Nachbildung von UI-Komponenten im nativen Look and Feel einer App dar.
Die AngularJS-basierte Architektur einer Ionic-App bringt große Vorteile: Sie ist verbreiteter Standard und ermöglicht die Entwicklung komplexer, skalierbarer Applikationen nach bewährten Mustern. Hardwarebeschleunigte CSS-Transitions und minimale DOM-Manipulationen („Zero jQuery“) sorgen für überzeugende Performance. Der Zugriff auf native APIs und die Kompilierung in native Apps erfolgt z. B. mit Cordova. Eigene Sass Styles, der Task Runner gulp und der Package-Manger Bower werden von Ionic direkt unterstützt bzw. selbst genutzt. Zahlreiche Zusatzprojekte und angebundene Services helfen bei der Entwicklung, zum Beispiel:
- ngCordova, Cordova-APIs als AngularJS-Services
- ionicons, passendes Font-Icon-Set
- Ionic Creator, Apps im Onlineeditor erstellen bzw. prototype
- Ionic View, App-Previews auf beliebigen Geräten und Plattformen ohne Installation der App
- Ionic Push, Push-Notifikationen
- Ions, kuratierte Auswahl nützlicher Zusatzkomponenten, etwa Swipe-Cards im Tinder-Style
- Cloud Builds, App-Build ohne lokale SDK-Installationen (Beta)
Für einige der (kostenfreien) Services müssen Sie zunächst einen Ionic-Account anlegen. Die Steuerung der App-Entwicklung sowie die Einbindung wichtiger Servicefunktionen erfolgt über das Ionic-CLI ionic. Einige nützliche Funktionen des CLI sind zum Beispiel:
- App-Skeletons aus verschiedenen Vorlagen erzeugen
- Built-in-Webserver mit Live-Reload und Split-View verschiedener Plattformen
- App-Builds für verschiedene Plattformen erstellen und auf Simulatoren/Geräten installieren, auch mit Live-Reload und Logausgabe auf die Konsole möglich
- Cordova-Plug-ins, Ions, Bower-Komponenten und Add-ons verwalten
- Icons für App und Splash-Screen für alle Plattformen aus einer Image-Vorlage erzeugen
- Cloud-Builds anstoßen
- Apps für Ionic View bereitstellen und mit anderen teilen
- einheitliche Browser-Engine in eine App einbetten
Da die Bezeichnung „Framework“ angesichts der Möglichkeiten zu kurz greift, wird Ionic gerne auch als Frontend-SDK („Software Development Kit“) bezeichnet.
Voraussetzung für die Installation von Ionic ist Node.js. Mit dem npm-Package-Manager werden Ionic und Cordova systemweit installiert:
$ sudo npm install -g cordova ionic
Nach erfolgreicher Installation lässt sich das CLI ionic aufrufen und zeigt alle verfügbaren Unterbefehle an. Mit der Option –help werden zusätzlich Hilfestellungen angezeigt: ionic — help.
Im zweiten Teil der Artikelserie – Ionic: So erstellt man Hybrid-Apps – zeige ich, wie man eine Hybrid-App entwickelt – anhand der Beispiel-App Vibrations.
Überblick zur Ionic-Artikelserie:
Teil 1: Einführung in das Erstellen von Hybrid-Apps
Teil 2: So erstellt man Hybrid-Apps
Teil 3: Spezifikationen und Testen von Hybrid-Apps
Auf der MobileTech Conference 2015 in Berlin gibt es vom 31. August bis 3. September jede Menge interessanter Sessions – auch zum Thema Cross-Plattform-Entwicklung mit Ionic:
- Cross-Plattform-Mobile-Apps mit Ionic und AngularJS 2
Dienstag, 1. September 2015 – 11:45 bis 12:45, Thorsten Hans - Mobil oder Desktop: Architekturen für moderne Businessanwendungen mit HTML5, JavaScript und Co.
Montag, 31. August 2015 – 9:00 bis 17:00, Thorsten Hans - Moderne App-Architektur mit Dagger 2 und RxJava
Dienstag, 1. September 2015 – 17:45 bis 18:45, Dominik Helleberg, Angelo Rüggeberg
PHP Magazin
Dieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.
Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Kiosk ist das PHP Magazin weiterhin im Print-Abonnement erhältlich.
Aufmacherbild: Flaches Design Vektor-Illustration via Shutterstock / Urheberrecht: PureSolution
[…] die Zusammenarbeit verstärkt, um auch von außerhalb Feedback einholen zu können – darunter das Cross-Plattform-Framework Ionic, dessen Version 2 bereits vollständig auf Angular 2 basieren wird, oder Telerik, die mit […]
[…] die Zusammenarbeit verstärkt, um auch von außerhalb Feedback einholen zu können – darunter das Cross-Plattform-Framework Ionic, dessen Version 2 bereits vollständig auf Angular 2 basieren wird, oder Telerik, die mit […]