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.

Aufmacherbild: Flaches Design Vektor-Illustration via Shutterstock / Urheberrecht: PureSolution